CSS盒子模型

CSS盒子模型 【重点】
一个标签相当于一个盒子
盒子各种属性
width宽
height高
Margin边界 外边界
Padding填充 内边距
Border边框

书写：
padding : 40px 60px 30px 20px;
上 右 下 左
padding : 40px 40px 30px;
上 左右 下
padding : 40px 60px;
上下 左右
padding : 40px；
上下左右
（margin同上）

/*box-sizing: content-box;*/
/*盒子的实际大小 (内容+border+padding)*/
box-sizing: border-box;
/*盒子的实际大小(宽高) border+padding压缩内容的大小*/

思考：
div {
width:400px;
height:200px;
margin:40px 20px 30px 30px;
padding:10px 50px 70px;
border: solid 10px #000;
}
请问盒子的实际宽高？
宽 高
520 300
670 370

两种盒子
box-sizing: border-box;
box-sizing: content-box;默认

块级元素和行级元素通常自带一些默认盒子属性值
div{
width:100%;
height:auto;
margin:0px;
padding:0px:
border:none;
}
h1{
width:100%;
height:auto;
margin:19px 0px;
padding:0px:
border:none;
}

边界合并【重点】
上下两元素，临近边界，取较大的值

边界溢出
假如父级元素没有设定盒子属性时
首个子级元素的上边界将会跑出该父级元素

盒子模型无效标签：
strong,em,a,span
display:block;变成块级标签让盒子属性起作用

img,video,audio 行内块标签
宽、高、填充和边界均可设定

一、行块互转【重点】
display : block; 指定对象为块元素。 p div h ul li table form
display : inline; 指定对象为内联元素。 span font a b strong label
空元素 hr br
display:inline-block；指定对象为内联块元素。 img input
vertical-align: middle 两个结合 实现行内块元素居中

隐藏整个对象
display:none
visibility:hidden
opacity:0
display隐藏对象不占位
溢出隐藏
overflow

总结：
块级元素经常带有一些默认的边界填充属性
行级元素不能自由设定盒子属性，但可以转块
隐藏有两种方法，占位有别

二、分栏：
column-count : 分栏数目
column-width : 分栏宽度
column-rule: 分割线
column-gap: 栏与栏之间的间距
兼容写法
-webkit-column-rule:

三、浮动【重点】
浮动的属性和浮动产生的一些影响
float:left; /*或right*/

两列排版（固定宽度 百分比宽度）

图文排版

多行多列排版
父元素子元素宽度设置好 子元素float

float之后元素变为inline-block

float之后margin值不再重叠

清除浮动
并列元素清除浮动
1、不受浮动影响的元素设置clear:both;
2、在两个元素之间添加一个块元素设置clear:both;height:0px;
3、在两个元素之间添加<br clear="all" />

父对象高度塌陷问题
当父级元素中的所有子元素(如li)都设定了浮动左对齐，该父元素自身高度丧失，解决办法：
1. 给父级添加浮动
2. 给父级添加display:inline-block;
3. 给父元素添加overflow:hidden;
4. 给父元素添加高度

clear清除浮动
1. 在浮动元素下加
<div class="clear"></div>
.clear{height:0px; background:blue;font-size:0; clear:both;}
2. 在浮动元素下加
<br clear="all">
3. after伪类清除浮动（现在主流方法）
.clear:after{
content: ""
display: block;
clear: both;
}
.clear{
zoom: 1; /*ie7重载 1:1展示*/
}

Ie6左边界双倍
解决办法：display:inline属性