【day05】css
一.盒模型(BoxModel)
1.width 宽度
2.height 高度
说明: 块元素和有宽高属性的标记(img,input) ，能设置宽度和高度，而行元素不能设置宽高
3.padding ：内边距,内容到边框的距离
padding-top: 上内边距
padding-right: 右内边距
padding-bottom: 下内边距
padding-left: 左内边距
缩写形式:
padding:value; 四个方位相同值
padding:value value; 上下值 左右值
padding:value value value; 上值 左右值 下值
padding:value value value value; 上值 右值 下值 左值
说明: padding只有正值， 并且设置padding可以撑大背景盒子
4. margin ： 外边距,盒子外围的距离
margin-top: 上外边距
margin-right: 右外边距
margin-bottom: 下外边距
margin-left: 左外边距
缩写形式:
margin:value; 四个方位相同值
margin:value value; 上下值 左右值
margin:value value value; 上值 左右值 下值
margin:value value value value; 上值 右值 下值 左值
说明:
a. margin有 正值，负值,auto
b. margin:0 auto;盒子的水平居中
c. 清除块元素空隙(全局样式)
margin:0;
padding:0;
d. margin 冲突,上下取大值，左右相加
e. 嵌套元素，给子元素添加上下margin，会将上下margin值传递给父元素
5.border 边框
border-top-width: 上边框宽度
border-top-style: 上边框样式 (值: solid 实线, dashed虚线，dotted 点线，double双线 )
border-top-color: 上边框颜色
border-right-width: 右边框宽度
border-right-style: 右边框样式
border-right-color: 右边框颜色
border-bottom-width: 下边框宽度
border-bottom-style: 下边框样式
border-bottom-color: 下边框颜色
border-left-width: 左边框宽度
border-left-style: 左边框样式
border-left-color: 左边框颜色
缩写形式1
border-top: width style color;
border-right: width style color;
border-bottom: width style color;
border-left: width style color;
缩写形式2
border-width: value; 四个方向宽度
border-width: value value; 上下值 左右值
border-width: value value value; 上值 左右值 下值
border-width: value value value value; 上值 右值 下值 左值
border-style: value; 四个方向样式
border-color: value; 四个方向颜色
缩写形式3
border: width style color;
例如: border: 1px solid #00f;
6.盒模型总宽度计算:
总宽度=左margin + 左border + 左padding + 盒子宽度 + 右padding +右border + 右margin
二.布局(Layout)
(1) 文档流布局(默认)
(2) 浮动布局
(3) 定位布局
三.浮动布局(Float)
1.格式 float: left 左浮动 | right 右浮动 | none 不浮动
2.浮动布局特性
(1) 浮动元素脱离文档流(不占位)
(2) 原理: 无论是左浮动还是右浮动，会靠在有边界的边框，或会靠在另一个浮动盒子的后面才停止编辑。
(3) 浮动的块元素，如果没设置宽高，那跟文本一致的宽高（文档流块元素宽是父级的100%）
(4) 浮动的行元素能设置宽高(文档流行元素不能设置宽高)
(5) 浮动的元素对后面元素的影响是实现
文本环绕
四.清除浮动（Clear）
1. 格式:
clear: both 清除两边浮动 | left清除左边浮动 | right清除右边浮动
2. 高度塌陷
(1)原理:子元素都浮动，而父元素没有设置高度，那父元素的高度是零
(2)解决方法
a.
.clear1{ clear:both;}
b.万能清除(写在父元素上)
.clear{
zoom:1;
}
.clear:after{
content:".";
display:block;
clear:both;
height:0;
visiiblity:hidden;
}
说明:
a.万能清除写在父元素上
b.解决高度塌陷
c.让版块间划分界限
3.布局显示
(1) display: none | block块 | inline内联 | inline-block内联块
说明:
a. inline-block 内联块:是块元素(能设宽高) 但是有行元素不折行的特性
b. display:none 不占位隐藏
(2) visibility: visible默认值 | hidden 隐藏
说明: visibility: hidden
