CSS进阶
盒子模型介绍，如下图
盒子模型.png
一、盒子模型之border
四个border，就是边框,每个border都有width,color,style,radius等属性，
1.同时设置上下左右4个border的相关属性【推荐写法】
- 同时设置可以根据参数的不同设置对应边的相关属性
- 四个值： 上---右---下---左
- 三个值： 上-----左右----下
- 两个值： 上下---------左右
- 一个值： 上下左右
border-style:solid /*实线*/
dashed /*大虚线*/
dotted /*小虚线*/
double; /*双线*/
border-color: red green palegoldenrod; /*颜色*/
border-width: 2px; /*边框宽度*/
border-radius: 5px 2px 3px 10px; /*边框四个角度的圆角化程度*/
2.单独设置各个border的相关属性
不推荐的写法，看代码就应该猜出向表达的意思！我就不过多的解释了
border-left:2px solid red;
border-right-style: double;
border-bottom-width: 4px;
border-top-left-radius: 4px;
border-right-color: red;
二、盒子模型之margin
overflow属性介绍
overflow: visible; /*默认值。超过盒子的内容不会被修剪，会呈现在盒子之外
hidden;超过盒子的内容会被修剪，并且那些内容是不可见的
scroll;内容会被修剪，但是浏览器会显示滚动条一遍查看剩余内容
auto;如果内容被修剪，则浏览器会显示滚动条以便查看其余内容
*/
边框到其他元素的距离，margin不会扩大盒子的大小；padding和border可能会扩大盒子大小！
注意，浏览器会默认加上一些margin,建议在CSS首行写上
*{
margin: 0;
padding: 0;
}
- 一次到位
margin: 0 auto; 上下为0，左右最大化，也就是居中！
- 分开写
margin-top:20px;
margin-left:20px;
margin-right:2px;
margin-bottom:20px;
注意，对于一个嵌套的盒子，如果父元素没有设置
border的style,子盒子的margin-top属性会默认相对于父盒子外的margin-top，也就是这种效果，子父盒子的上边重合，子父盒子相对于外部的margin-top为子父盒子最大的那个margin-top值，如下
margin-top出现的问题.png
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
<style>
.father{
width: 200px;
height: 200px;
margin-top:0;
background-color: #ffb66c;
}
.son {
width: 100px;
height: 100px;
background-color: aqua;
margin-top: 80px;
margin-left: 20px;
}
- 在
.father添加一个属性overflow:hidden;【推荐】或者border: 1px solid #ffb66c;,问题就解决了，如下
margin-top解决.png
其他解决办法
- 父级或子元素使用浮动或者绝对定位absolute,浮动或绝对定位不参与margin的折叠
- 父级overflow:hidden;
- 父级设置padding（破坏非空白的折叠条件）
- 父级设置border
总结
- 垂直边距相遇时，会形成一个外边距，称为 外边距合并，解决办法：给父元素添加一个border！
- 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。
三、盒子模型之padding
内容区域到边框的距离；padding可能会扩大盒子大小；
padding: 100px;
盒子模型计算尺寸
- 长：2 *(margin-left + margin-right + padding-left + padding-right + border-left + border-right) + width
- 宽：2 *(margin-top + margin-bottom + padding-top + padding-bottom + border-top + border-bottom) + height
四、display属性
1.display属性的作用
- 控制元素的显示与隐藏
- 块级元素与行内元素的转变
- css3中flex弹性布局【比float布局牛逼多了。css3高级玩儿法中介绍】
2.代码演示
visibility:hidden; /*隐藏元素，占位置*/
display: none; /*元素隐藏，不占位置
inline;元素转换为内联元素
block; 转换为块级元素
inline-block 行内块元素*/
五、十分棘手的浮动float【不推荐使用，强烈推荐使用flex布局】
float: left; /* 左浮动
right; 右浮动*/
left左浮动 左侧为起始、从左往右;right右浮动 右侧为起始、从右往左
文档流：可见元素在文档中排列位置
浮动产生的效果
- 浮动可以使元素按指定位置排列，直到遇到父元素的边界或另一个元素的边界停止
- 浮动可以使元素脱离文档流，不占位置，
- 浮动会使元素提升层次
- 浮动可以使块元素在一行内排列不设置宽高时可以使元素适应内容
- 浮动可以使行内元素支持宽高
浮动产生的问题！以及解决方案
父元素不设置高度时，子元素设置了浮动，子元素不占位置，不会撑开父原子的高度
- 解决方案
- 给父盒子设置固定高度，但是不灵活
- 给浮动元素最后一个加一个空的块级元素，且该元素不浮动
float: none;并设置clear:both;但是结构冗余 - 官方推荐的解决浮动最常用的方法，给父元素添加伪元素！如果页面中有定位元素，并超过了父级的范围，就必须使用clear属性来清除浮动来扩展盒子的高度。
父级:after{
visibility:hidden;
clear:both;
display:block;
content:".";
height: 0;
}
- 推荐使用！！！给父元素添加
overflow:hidden;
五、position定位
position: static; /* 默认值，没有定位
relative; 相对自身原来的位置进行偏移，
用top left right bottom 进行设置
不设定偏移量则本身没有变化
无论在标准流还是浮动流中，不会对父级元素和相邻元素有任何影响。
原先的位置还是占用空间的，相对移动不会影响其他。
可以提升层级关系(会显示在最表面，不会被之前设置的元素遮盖)
absolute:
用top left right bottom 进行设置
绝对定位,可以提升层级关系，脱离文档流
在没有父级父级元素定位时定位，以浏览器的左上角为基准
有父级的情况下，父级设置相对定位，子级设置绝对定位，是以父盒子进行定位的
“父相子绝对”提升层级关系；脱离文档流
fixed :
固定定位，当浏览器滑动的时候，保持位置不变
*/
六、z-index提升显示层级
z-index越大，就表示显示在屏幕的越上方！z-index定位处理 堆叠，默认值为0
z-index:100;
