css3基础知识第四章布局

迷南。 2022-08-10 06:20 310阅读 0赞

布局是网站制作的第一步，让我们来了解一下怎么布局![微笑][smile.gif]

布局默认是流体布局，还有水平布局和定位布局。很多只是叫法不一样而已

流体布局：

在了解流体布局之前，我们应该先明白行内元素（内联元素），块元素和内联块元素

块元素：div ; p ; h1~h6 ; ol ; ul ; dl ; table ; address ; blockquote ; form

行内元素：a ; span ; br ; i ; em ; strong ; label ; q ; var ; cite ; code

内联块元素：img ; input

块元素：每个块级元素都各占一行，可以设置长和宽，设置display:inline可以转为行内元素;

行内元素：可以和其他元素占用同一行，没有长和宽，设置display:block可以转为块元素;

内联块元素：同时具备内联元素和块元素；和其他元素都在一行，元素的宽和高以及顶部和底边的距离都可以设置；设置display:inline-block;

流体布局中，块元素是从上到下一次排列，而行内元素是先从左到右再从上到下排列

很好理解，我就不上代码了。![生气][mad.gif]

水平布局：

水平布局需要用到浮动float，可以让霸道的块元素水平布局

可以同时在左 float:left;

可以同时在右 float:right;

一左一右 \{  float:left; \} \{  float:right; \}

学习代码：

<!doctype html>
    <html>
    	<head>
    		
    		<meta http-equiv="Content-Type" content="text/html; charset=gbk">
    		<title>html模板</title>
    		<meta name="Keywords" content="关键词,关键词">
    		<meta name="description" content="">
    		
    		<style type="text/css">
    			*{margin:0;padding:0;}
    			.centent{width:300px;border:1px solid red;margin:150px auto;}
    			.centent .one{width:100px;height:200px;background:#66CCFF;float:left;}
    			.centent .two{width:200px;height:200px;background:#FFCC33;float:right;}
    			.clear{clear:both;}
    		</style>
    
    	</head>
    <body>
    	<div class="centent">
    		<div class="one"></div>
    		<div class="two"></div>
    		<div class="clear"></div>
    	</div>
    </body>
    </html>

one div使用了向左浮动，two div使用了向右浮动，clear div使用了清除浮动，如果不清楚，红色边框会出现在最上层  
效果图：

![20151114235009564][]

定位布局：

定位布局就稍微难一点，想要弄清楚定位。

定位

1.绝对定位 position: absolute

2.相对定位 position: relative

3.固定定位 position: fixed

relative和absolute组合使用

需要注意的是

1.参照定位的元素必须是相对定位元素的前辈元素

2.参照定位的元素必须加入position:relative

3.定位元素加入position:absolute便可以使用top；bottom；right；left开始定位

我是比较喜欢用固定定位的，很多地方都会用到。

学习代码：

<!doctype html>
    <html>
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=gbk">
    <title>html模板</title>
    <meta name="Keywords" content="关键词,关键词">
    <meta name="description" content="">
    
    <style type="text/css">
    *{margin:0;padding:0;}
    .head{width:1000px;height:40px;background:#ccc;position:fixed;}
    .centent{width:1000px;border:1px solid red;}
    .centent .one{width:200px;height:500px;background:#6CF;float:left;}
    .centent .three{width:200px;height:500px;background:#FC3;float:right;}
    .bottom{width:1000px;height:40px;background:#666;position:absolute;bottom:0px;}
    .clear{clear:both;}
    </style>
    </head>
    <body>
    <div class="head"></div>
    <div class="centent">
    <div class="one"></div><span style="white-space:pre">
    <div class="three"></div>
    <div class="clear"></div>
    </div>
    <div class="bottom"></div>
    </body>
    </html>

效果图：

![20151115001030758][]

一点点进步，一点点成长，如果有问题可以留言，我会及时更正

[smile.gif]: /images/20220731/46aea613010f401394d35438777ac6da.png
[mad.gif]: /images/20220731/1cead4fa73e648169a3f15cd7eb19af0.png
[20151114235009564]: /images/20220731/ae3808b45e8545e4a115b2f2eb5d5da8.png
[20151115001030758]: /images/20220731/7d5616abc5c240628c9ffe37c12adef0.png