【CSS盒子模型】补充

目录

垂直外边距的重叠

行内元素的盒子模型

默认样式

盒子的大小 

阴影和圆角

---

垂直外边距的重叠

兄弟元素

（1）如果两个都是正值，谁大听谁的；

（2）如果两个都是负值，绝对值谁大听谁的；

（3）如果一正一负，两者相加，听最终结果。

兄弟元素的外边距重叠，对我们开发来讲，一般是有利，所以不用做特殊调整 。 

父子元素

父子外边距重叠，它会影响页面其他元素，所以必须要调整。

   如何调整

（1）不用margin-top，给父元素用padding-top，同时减小父元素的高度；

（2）在父子之间用边框隔开；

（3）开启元素的BFC（隐含属性 overflow:hidden;）。

行内元素的盒子模型

（1）内容区：不能设置宽高，是被内容撑开；

（2）内边距：可以设置，但垂直方向不会改变页面的布局，也就是不会挤别人；

（3）边框：可以设置，但垂直方向不会改变页面的布局，不会挤别人；

（4）外边距：垂直方向不能设置外边距，水平方向可以设置，而且水平方向外边距不会重叠。

display 用来设置元素显示的类型

display 可选值：

（1）inline  将元素设置为行内元素；

（2）block   将元素设置为块元素；

（3）inline-block  行内块块元素（即可以设置宽高，又不会独占一行）；

（4）table   将元素设置为一个表格；

（5）none   元素不在页面中显示（隐藏一个元素）。

visibility 用来设置元素的显示状态

visibility 可选值：

（1）visible 默认值  元素在页面中正常显示；

（2）hidden  元素不在页面中显示（隐藏一个元素），位置依然保留。

 面试题：隐藏元素有几种方式，几者区别是什么？

（1）display：none；   删除了元素，元素位置不保留；

（2）visibility：hidden；  元素位置保留；

（3）将元素变为透明     元素位置保留。

默认样式

浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding等等，而它的这些默认样式，正常情况下我们是不需要使用的。所以我们往往在编写样式之前需要将浏览器中的默认样式都去除。

默认样式去除方式 

（1）清除浏览器的默认样式，手写，这种方式只适用于结构简单，小的练习；

（2）引入重置样式表。

盒子的大小 

默认情况下：盒子可见框的大小由内容区，内边距，边框共同决定。

 box-sizing  用来设置盒子尺寸的计算方式   width/height 指的是谁

box-sizing 可选值：

（1）content-box 内容区 默认值；

（2）border-box 宽度和高度用来设置整个盒子可见框的大小，包括边框，padding，内容区。

阴影和圆角

box-shadow用来设置元素的阴影效果，不会影响到页面布局

第一个值：水平偏移量  正->左  负->右 ，必选；

第二个值：垂直偏移量  正->下  负->上 ，必选；

第三个值：模糊半径  默认0px，可选；

第四个值：颜色     默认是黑色，可选。

border-radius 用来设置圆角 

border-radius: 50%;  设置圆形。