盒模型
概念：如果CSS对HTML文档元素生成了该元素在HTML文档布局中占据空间的矩形元素框（element box），称盒子
通过一系列定义盒子的相关属性（内容content，填充padding，边框border，边界margin），控制各个盒子乃至HTML文档来呈现的效果与布局结构
border:5px solid/dash虚线/dotted点划线/double双线 #444;值加在原有元素的高宽上
padding:值加在原有元素的高宽上的，如果要保持元素不变，需要调整高宽
{20px上下 20px左右}
marigin：
{0 auto}元素居中，相邻兄弟元素垂直方向会相互融合，取大值。子级有margin-top的时候，子级会传递到父级，解决，父级overflow:hidden
元素类型
根据css显示分类，XHTML元素被分为三种类型
块状元素：block element,显示成矩形区域，常用div dl dt dd ol ul fieldset h1-h6 p form hr iframe colgroup col table tr td
一般作为容器容纳内联元素和其他块状元素，一般称盒子
内联元素：inline element(或行内元素) 常用 span i a em strong b
没有自己的形状，不能定义宽高，由内容决定宽高，最小内容单元呈现矩形，可定义padding border margin background 都有时候不起作用
可变元素：需要上下文确定该元素是块元素还是内联元素
applet - java applet
button， del，iframe -inline frame，ins-插入的文本，map-图片区块，object-object对象，script-客户端脚本
元素类型的转换
display:定义布局时元素生成的显示框类型
none：
block:当元素使用了float以后，相当于加上了display:block，（块状元素默认）
inline:代码换行被解释成一个空格，不支持宽高（内联元素默认）
inline-block：（表单控件button，图片img默认值）行内块元素，内容以块状显示，行内其他元素显示同一行（中间有空隙，各浏览器定义空隙大小不同，一般用float），支持宽高，其他和inline差不多
list-item：可以变成列表块状元素，列表默认值
元素的定位设置
position
static:默认值，忽略top,bottom,left,right,z-index,的声明
absolute:绝对定位，相对于static以外的第一个父元素进行定位
relative:相对定位，正常位置进行定位,z-index默认比absolute高
fixed:绝对定位元素，相对于窗口进行定位
z-index:auto遵从父对象/number，只作用于absolute和relative
宽度自适应
希望元素能根据窗口或者子元素进行变化，可以让窗口适应不同设备、窗口、分辨率下运行
min-height:IE6不支持，
兼容性hack1：min-height:200px;_height:200px;
兼容性hack2：min-height:200px;height:auto!important;height:200px;
min-width:IE6不支持,
max-width:IE6不支持，
max-height:IE6不支持，
高度自适应
方法：html,body{height:100%}元素{height:100%}
height:auto;根据内容自动改变高度，默认
height:100%;根据父块高度决定。
浮动属性练习
css
/* ::-webkit-scrollbar{display: none}/* 取消overflow的默认下拉条 */ */
.v1{float: left;height: 30px;width: 30px;background-color: #333;}
.v2{height: 130px;width: 130px;background-color: #999;}
.fa{overflow: hidden;border:5px solid red; width: 1160px}
.b1{width: 230px;background-color: brown;}
.b2{width: 700px;background-color: burlywood;}
.b3{width: 230px;background-color:#333;}
.b1,.b2,.b3{height: 50px;float: left;}
.bottom{height: 100px;width: 100%;background-color: darkblue;}
只对后面的元素产生影响，后面一个元素紧贴前面一个元素（使用px的时候），如果浏览窗口变小，则区块换行，clear:none默认/both/left/right,
高度塌陷问题：父元素如果没有高度，无法被撑起
方法一：父元素overflow:hidden
方法二：在浮动元素下添加DIV{clear:both;height:0;overflow:hidden（或font-size:0 IE不允许高度为0）}
html
<div class="v1"></div>
<div class="v2">
文字环绕文字环绕文字环绕文字环绕，v2区域在v1区域下面，背景色可以看到
</div>
<div class="fa">
<div class="b1"></div><div class="b2"></div><div class="b3"></div>
</div>
<div class="bottom"></div>
<!-- 只设置高度的时候，图片等比例缩放，如果同时设置了宽度和高度，只要考虑图片比例变形的结果-->
<img src="img/top.jpg" width="100%" title="图片划上去图片出现的提示" alt="图片加载失败后出现的字">
<img src="" width="100%" >
练习导航条
css
.nav{height: 100px;background: #111}
.nav ul{list-style: none;width: 980px;background: #777;margin: 0 auto;overflow: hidden;}
.nav ul li{float: left;border-right: 1px #999 solid}
.nav ul li .last{border-right: none}
.nav ul li a{display:block;width: 139px;height: 100px;line-height: 100px;text-align: center;text-decoration: none}
.nav ul li a:hover{background:orangered}
html
<div class="nav">
<ul>
<li><a href="#">集团信息</a></li>
<li><a href="#">集团信息</a></li>
<li><a href="#">集团信息</a></li>
<li><a href="#">集团信息</a></li>
<li><a href="#">集团信息</a></li>
<li><a href="#">集团信息</a></li>
<li class="last"><a>集团信息</a></li>
</ul>
</div>
练习锚点
定位锚点
锚点链接：<div id="p1">位置1</div><a href="#p1">跳转到位置1</a>
css
.imgmd{height: 500px;width: 500px;position: relative;}
.list{position: absolute;bottom: 10px;right: 5px;}
.list a{float: left;height: 30px;width: 30px;background: rgba(0,0,0,.7);margin-right: 5px;text-decoration: none;text-align: center;line-height: 30px;color: #fff}
.list a:hover{background: rgba(0,0,0,1);}
.imglist{overflow: hidden;height: 500px;width: 500px;}
html
<div class="imgmd">
<div class="list">
<a href="#img1">1</a>
<a href="#img2">2</a>
<a href="#img3">3</a>
<a href="#img4">4</a>
</div>
<div class="imglist">
<img src="../img/1.jpg" id="img1" />
<img src="../img/2.jpg" id="img2" />
<img src="../img/3.jpg" id="img3" />
<img src="../img/4.jpg" id="img4" />
</div>
</div>
练习css图片拼合
图片整合
css sprites或者精灵图，CSS图像拼合或CSS贴图定位
减少http iis的请求数，对于淘宝这种大型网站是必须的
css
.cssimg{width: 200px;height: 22px;overflow: hidden;list-style: none;}
.cssimg li{float: left;}
.cssimg li a{display: block;height: 22px;width: 50px;background: url(/img/1.jpg);text-align: center;text-decoration: none;line-height: 22px}
.p2 a{background: url(/img/1.jpg) -50px 0;}
.p3 a{background: url(/img/1.jpg) -100px 0;}
.p4 a{background: url(/img/1.jpg) -150px 0;}
.p2 a:hover{background: url(/img/1.jpg) -50px -22px;}
.p3 a:hover{background: url(/img/1.jpg) -100px -22px;}
.p4 a:hover{background: url(/img/1.jpg) -150px -22px;}
html
<ul class="cssimg">
<li class="p1"><a href="#">新闻</a></li>
<li class="p2"><a href="#">新闻</a></li>
<li class="p3"><a href="#">新闻</a></li>
<li class="p4"><a href="#">新闻</a></li>
</ul>
text-overflow练习
文本溢出
overflow:
visible：默认，内容不会被修剪，会出现在元素框之外。
hidden:内容会被修剪，其余内容不可见
scroll：内容会被修剪，但出现下拉框
auto：如果内容被修剪，则出现下拉框
inheirit：从父级继承overflow值
white-space:设置如何处理元素内空白
normal:默认，空白会被浏览器忽略
pre:被浏览器保留
nowrap：文本不会换行，文本会在同一行继续，直到遇到<br />（常用）
pre-wrap:保留空白符序列，会正常换行
pre-line:合并空白符序列，但是保留换行符
inherit:继承父元素的white-space
text-overflow:文本溢出包含元素时发生
clip:不显示省略号，简单裁切
ellipsis:溢出时，显示省略号
要显示省略号需要的条件：width,over-flow:hidden,white-space:nowrap
css
.textul{border: 1px solid #333;}
.textul .p1{width: 100px;text-overflow: ellipsis;white-space: nowrap;border: 1px solid #222;overflow: hidden;}
html
<ul class="textul">
<li class="p1"><a href="#">新闻sfdfsffsdfsfsdf</a></li>
<li class="p2"><a href="#">新闻</a></li>
<li class="p3"><a href="#">新闻</a></li>
<li class="p4"><a href="#">新闻</a></li>
</ul>