1、CSS包含：标准文档流，浮动，绝对定位
标准文档流的特点：从上到下，从左到右，输出文档内容
盒子模型：块级元素（div ui li dl dt p）与行级元素（span strong img input）
盒子模型：边框（border）外边框（margin）内边框（padding）内容（content）
盒子3D模型：border、 content+padding 、background-img、background-color、margin
<html> <head> <style type="text/css"> .a{ border:1px solid #CCC; padding: 30px 10px<!--第一个代表上下的距离，第二个代表左右的距离-->; width:225px;} .b { background:url(../../aaa/0044.jpg) repeat;} </style> </head> <body> <div class="a b"><img src="../../aaa/1026/aaa/201502161055436380.jpg" width="50"> <img src="../../aaa/1026/aaa/201502161055561562.jpg" width="50"> <img src="../../aaa/1026/aaa/201502161056148701.jpg" width="50"> <img src="../../aaa/1026/aaa/201502161056243854.jpg" width="50"> </div> </body> </html>
2、网页自动居中
沿用上面的数据：
<html> <head> <style type="text/css"> * {margin:0px;padding:0px;} #warp {<!--用warp包裹住整个页面，设置居中，则整个页面就居中--> border:1px solid #FF0; width:250px; margin:0 auto;<!--如果想让页面居中，当设置margin属性为auto时，不能设置浮动属性或者绝对定位属性；margin左右设置为auto，而且设置width为定值-->} #header { border:1px solid #0F0; width:100%<以warp规定的页面宽度为标准>; height:100px;<!--高度一般不写-->} #mid { border:1px solid #903; width:100%; height:100px;} #foot { border:1px solid #FF0; width:100%; height:100px;} .a{ border:1px solid #CCC; padding: 30px 10px; width:225px;} .b { background:url(../../aaa/0044.jpg) repeat;} </style> </head> <!--页面分为上中下三部分 header是头 mid是中间 foot是结尾--> <body> <div id="warp"> <div id="header"></div> <div id="mid"> <div class="a b"><img src="../../aaa/1026/aaa/201502161055436380.jpg" width="50"> <img src="../../aaa/1026/aaa/201502161055561562.jpg" width="50"> <img src="../../aaa/1026/aaa/201502161056148701.jpg" width="50"> <img src="../../aaa/1026/aaa/201502161056243854.jpg" width="50"></div> </div> <div id="foot"></div> </div> </body> </html>
3、float浮动与清除
特点：元素会左移或者右移直至碰到容器为止 ，设置了浮动的元素仍然会处于标准文档流之中
当元素没有设置宽度值而设置了浮动属性，元素的宽度随内容的尺寸变化而变化
当元素设置浮动属性后，会对相邻的元素产生影响，相邻元素特指紧邻其后的元素
清除浮动的方法：1、clear:both ;clear:left;clear:right
2、100%(或者固定宽度)+overflow:hidden
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>float浮动布局</title> <style type="text/css"> .box1{ height:50px; background-color:#3F9; float:left} .box2{ height:50px; background-color:#03C; float:right} p { clear:both;} body { font-size:12px; font-family:楷体;} </style> </head> <body> <div class="box1">fafhgdlfhdfui</div> <div class="box2">方便哈收到部分速报给我个iehieghwgn</div><!--对p标签产生影响--> <p>对公女uilr哦能女尼看了吗joeif奖我国偶就诶哦叫我人工湖给ibnethrhirsdv东方</p> <div class="box2">方便哈收到部分速报给我个iehieghwgn</div> <p >fbsdbvskkjfjk空间的不死哦该内容ngogiorg尽快公布日锅包肉ihb</p> <div class="box1">fafhgdlfhdfui</div> </body> </html>
4、横向两列布局
父元素没有浮动，而子元素中有浮动，则要从父元素中消除浮动，使用overflow
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>横向两列布局</title> <style type="text/css"> *{ margin:0; padding:0;} .warp{ background:#0F3; margin:0 auto; width:450px;} .a{ background:#900; width:100%;} .b{ background:#FF0; width:100%; overflow:hidden;} .c{ background:#00F; width:100%;} #left{ background:#FC0; width:280px; float:left;} #right{ background:#666; width:150px; float:right;} #le{ background:#0FF; width:250px; float:left; margin-top:15px;} p{ clear:both;} </style> </head> <body> <div class="warp"> <div class="a">头部</div> <div class="b"> <div id="left">在那遥远的地方，有位好姑娘</div> <div id="right">不要问我从哪里来，也不要问我到哪里去，我像爱一阵风，人之所见，解=皆是我的栖所</div> <div id="le">你是风儿我是沙，缠缠绵绵永不分离</div> <p>主题内容</p></div> <div class="c">版权归属</div> </div> </body> </html>