盒模型
八 盒模型（框模型）
页面上任何一个元素我们都可以看成是一个盒子，盒子会占用一定的空间和位置他们之间相互制约，就形成了网页的布局
w3c的盒模型的构成：content border padding margin
1 padding:内边距（内部填充距）
padding-right:50px/10%;
padding-left:50px/10%;
padding-top:50px/10%;
padding-bottom:50px/10%;
缩写：
padding: 上 右 下 左;----从十二点钟方向开始，顺时针
padding: 50px;表示四个方向的值都设置成50px
padding: (上下) (左右);表示上下的值一样，左右的值一样
padding: 上 (左右) 下;
2 margin:外边距，元素与元素之间的距离
margin-right:50px/10%;
margin-left:50px/10%;
margin-top:50px/10%;
margin-bottom:50px/10%;
缩写：
margin: 上 右 下 左;----从十二点钟方向开始，顺时针
margin: 50px;表示四个方向的值都设置成50px
margin: (上下) (左右);表示上下的值一样，左右的值一样
margin: 上 (左右) 下;
如果让一个容器水平方向居中：margin: px/% auto;
margin值在垂直方向会有重叠的现象，在取值的时候取较大值
九 浮动
文档流：正常的文档流是块级元素从上到下，行内元素从左到右的顺序展示
给一个元素赋值浮动后，该元素就会脱离正常的文档流进行左右浮动，直到它本身的外边缘碰到包含框或另一个浮动框的左右
float:left/right;
left---向左浮动
right---向右浮动
加了浮动过后的元素会导致父元素高度陷塌，由加了浮动过后的元素导致的，脱离了正常文档流
如果将多个同辈元素设置成向右浮动过后，会让这些元素倒着排序
解决父元素高度陷塌的方法：
1 设置父元素的高度
2 清除浮动
浮动的作用：可以让块级元素同行显示
十 列表属性（li）
列表的项目符号
list-style-type:disc(实心)/circle(空心圆)/square(方块)/none(不设置或者去掉)
list-style-image:url("图片路径");可以用背景图来设置项目符号
list-style-postion:outside(外面)/inside(里面);设置项目符号的位置
缩写：
list-style: type/image positon;
list-style:none;去掉项目符号
十一 表格属性(table)
border-collapse:separate(表格独立)/collapse(相邻边合并)
border-spacing:px/%;设置td与td之间的距离；
布局总结：
分类导航、菜单栏：div>>>>ul（ol）>>>>li
显示数据：table>>>>>tr>>>>td
表单布局：form(div)>>>>input
十二 隐藏和显示
visibility:visible/hidden
visible:可见的
hidden:隐藏
display:none与visibility:hidden的区别
前者的位置都没有了，后者将会保留位置
十三 溢出处理
overflow:visible/auto/scroll/hidden
visible:默认值，当内容超出时，会显示在父元素框外
auto:自动，当内容超出时，会出现滚动条
scroll:无论内容有没有超出，都会出现滚动条
hidden:当内容超出时，超出部分直接隐藏
overflow-x:visible/auto/scroll/hidden,表示横向的溢出处理
overflow-y:visible/auto/scroll/hidden,表示纵向的溢出处理
十四 a标签的css属性
1 text-decoration:none;去掉a标签的下划线
2 outline:0 none;去掉a标签点击时出现的虚线，也可以去掉表单元素获取焦点时出现的边框
3 <a href="#">回到顶部</a>---如果href的属性值为"#",有一个回到顶部的效果
4 如何去掉a标签给图片添加的边框？
在img的css属性加上border:0 none;
5 a标签的伪类选择器
css的伪类选择器：用来添加一些选择器的特殊效果，且该样式不是作用于标签上，而是作用于该标签的行为上
a:link{},未访问时出现的状态
a:visited{},访问后出现的状态
a:hover{},鼠标悬停时出现的状态---body里面的所有元素都有hover这个伪类
a:active{},鼠标按下时出现的状态---body里面的所有元素都有active这个伪类
如果a标签都要写上这四个伪类的样式，顺序应该为：L -->V -->H -->A
十五 给元素添加手势
cursor:pointer;
十六 定位(position)
position:static/fixed/relative/absolute/inhret
1 static:正常文档，默认值，忽略top/bottom/left/right/z-index
2 fixed:固定定位，脱离了文档流，以浏览器为坐标始（浏览器的左上角位置）终固定在浏览器窗口的某个坐标上，不会随着滚动条滚动
3 定位方式通常要配合：left/right/top/bottom
4 relative:相对定位，不会脱离文档流，以自己的原始位置为坐标进行偏移，偏移后该元素的原始位置将会保留
5 absolute:绝对定位，脱离了文档流，以浏览器为坐标进行偏移（浏览器的左上角位置）
但是如果该元素最近的已定位的祖先元素设置了定位方式了（除了static）,那么就以这个祖先元素为起始坐标
-----------
z-index:层叠顺序
z-index:5;数字大的元素在数字小的元素上面
z-index只适用于定位属性所产生的重叠
如何让一个元素始终居中与另一个元素？
left:50%;top:50%;margin-left:-width/2;margin-top:-height/2;
