本文共 3404 字,大约阅读时间需要 11 分钟。
CSS布局
1 布局是什么? -把页面分成一块一块,按左中右、上中下等排列。2 布局分类
3 布局的两种思路
4 用什么布局
不兼容IE9则意思为只兼容手机端。1.步骤
2.负margin(平均布局时使用)
在平均布局时加上margin-left最后一个会对不齐.imagelist>.x{ margin-right: -12px;/*x原本的宽度为800px,在右边加上一个-12px就是812的宽度*/}
2.注意事项:
_margin-left: 5px;
二、加上:display: inline-block3.案例
顶部条: logo用户名
*{ margin:0;padding:0; box-sizing: border-box;}/*先reset一下*/.clearfix:after{ content:''; display: block; clear:both;}.logo{ border: 1px solid red; height: 40px; width: 100px; float: left;/*脱离文档流,两个块级元素靠拢到一排*/ margin-top: 5px;/*让LOGO和导航居中对齐*/ margin-left: 10px; display: inline-block;/*其他浏览器会跳过,只有IE6/7认识*/}nav{ border: 1px solid green; width:100px; height: 50px; float: left;/*脱离文档流,两个块级元素靠拢到一排*/}.user{ border: 1px solid blue; height: 50px; float: left; max-width: 100px;/*限定最大宽度,不会超过页面即可*/}header{ border: 1px solid black;}
导航栏:
![]()
- 首页
- 课程
- 优惠
- 关于
*{ margin:0;padding:0;box-sizing: border-box;}ul,ol{ list-style:none;/*将list前面的小圆点去掉*/}img{ max-width: 100%;/*图片最大宽度不能超过这一行*/}.logo{ background: grey; display: inline-block; float: left; margin-top: 8px;/*根据图片高度和文字行高计算出来对齐的高度*/ margin-left: 10px;/*图片距离做左边距*/}.logo > img{ height: 26px;/*LOGO里面的img设定高度,高度在对齐的时候比较好计算*/ vertical-align: top;/*如果图片下面由多余的东西则用该行代码*/}.clearfix::after{ content:''; display: block; clear:both;}.nav{ float: left;}ul > li{ float:left;/*竖列变成行,脱离文档流*/ padding: 4px 0.5em;/*1em等于当前字体的大小,高度必须确定数值*/ line-height: 32px;/*设置行高方便对齐*/}ul{ display: inline-block;/*宽度为内部元素的宽度*/ margin-left: 10px;/*调整文字与图片的距离*/}header{ background: grey; color: white;/*header里面所有字体变成白色*/}
主要内容区
.content{ outline:1px solid red;/*outline不占空间,border占空间 ,border-box会算在里面*/ width: 800px; margin-left: auto; margin-right: auto; /*让页面居中,这两句更好,因为没有覆盖上下的margin*/}.content>aside{ width: 190px; background: #999; height: 300px; float: left;}.content>main{ width: 500px; background: #ccc; height: 300px; float: left;}.content> .ad{ width: 110px; background: #000; height: 300px; float: left;}/*完成后要将border删掉,不然在border-box中会占据位置*/
平均布局:
要注意float元素边缘不会合并,因此当格子超过一行时,中间的间距会变成两倍,解决办法是将margin-top删掉,变成单个margin-bottom,最上方的边距放到外面imagelist去.imagelist{ outline: 1px solid red; width: 800px; margin-left: auto; margin-right: auto;/*位置居中*/ margin-top:10px;}.imagelist>.x>.image{ /*要注意父子级关系*/ width: 191px; height: 191px; background: #777; float: left; margin-top: 10px; margin-right: 12px;}.imagelist>.x{ margin-right: -12px;/*x原本的宽度为800px,在右边加上一个-12px就是812的宽度*/}
转载地址:http://pfvi.baihongyu.com/