front-end CSS(4) 盒子模型的组成4元素/border-radius/box-shadow/text-shadow

网页布局

网页布局的3大核心：盒子模型，浮动，定位。
网页布局靠盒子：

• 准备好元素
• 设置CSS，摆放到页面中 【最麻烦】
• 往盒子里放内容

盒子的组成

边框+内外边距+实际内容
content + padding + border + margin = box

border

边框会增加盒子的大小，当测量的时候，width和height需要减去边框的宽度，进行计算。

border: border-width border-style border-color;
border: 5px solid #000;/*没有顺序，约定俗成*/
分开写：
border-top: 5px solid #000;
border-bottom:
border-right:
border-left:
只改一条边：先写border，再写border-top。【利用层叠性】

border-collapse

设置表格边框
table,
td {
	border: 1px solid black;
	border-collapse: collapse;合并相邻单元格边框
	}

padding

盒子的大小会被padding影响，div设置的width，height是不包括padding，border的，只是里面的内容的大小。
也就是说width，height设置的是content的大小。
如果子元素没有设置width和height，但是从父元素那里继承了width和height，在这种情况下，即使给子元素设置了padding，也不会更改自身盒子的大小，代码如下：

<div class="father">father
        <div class="son">son</div>
    </div>
<style>
        .father {
            width: 100px;
            height: 100px;
            background-color: palegreen;
        }
        .son {
            background-color: pink;
            padding: 20px;
        }
</style>

图片如下：

padding的4种写法：
以下4种情况在开发中都会遇到，所以都要记住。

padding-top | padding-right | 
padding-bottom | padding-left

padding: 20px; 【4个值都是20px】
padding: 10px 20px;【上下为10，左右为20】
padding: 10px 20px 30px;【上10，左右20，下30】
padding: 5px 10px 20px 25px;【依次是上、右、下、左，顺时针】

为什么我们需要设置padding而不是直接设置width？下图就是原因

margin

margin同样有上、右、下、左，其使用方法和padding基本一致。
默认情况下，margin=0，紧紧挨在一起。

块元素水平居中

margin可以让块元素水平居中。前提是：盒子必须要有宽度。然后把左右外边距设置为auto；

width: 100px;
margin: 0 auto;

行内元素or行内块元素水平居中

给父元素添加：text-align： center

一个有趣的点：
我给父元素div设置了宽高，然后给a标签设置display为inline-block。此时，按照我的设想，a标签自动继承宽高，也变大才对。但实际上没有变化。
只有把宽高放到a标签里才会变大，也就是说a标签不继承父元素的宽高。
后面我又测试了span，同样如此，看来所有的行内元素，即使设置成了inline-block，也不会继承父级的宽高，它还是保留有行内元素的特性，除非你亲自把宽高指定给这些inline-block。
然后我测试了块元素，块元素继承了宽度，没有高度。而且如果自行设置一个大于父元素的高度或者宽度，会超出去，也就是说会覆盖父元素。----这个知识点其实是层叠性【发生冲突时，后来者居上】，或者也可以说是优先级【权重大的是老大】。

<div>
	<a></a>
</div>

注意事项：

相邻块元素垂直外边距的合并

2个相邻的元素【兄弟关系】，一个设置了margin-top：100px，一个设置了margin-bottom: 200px，那么这2个盒子的相邻距离不是相加=300，而是200，因为取较大者的外边距。
解决方案：尽量只给一个盒子添加margin值。

嵌套块元素垂直外边距的塌陷

对于父子元素，如果2个都设置了margin-top的话，子元素的margin-top的值大于父元素，则父元素会按照子元素的margin-top值进行渲染。
但是我自己试验的时候，并没有出现这个问题。依然是父元素按照自己的margin-top，子元素按照自己的margin-top。
找到原因了：发生这种塌陷必须有2个前提：

• 父子元素都没有设置边框
• 父子元素里面都没有文字

我为了方便区分两个元素，不仅设置了边框，还增加了father，child两个单词来区分，所以并没有发生塌陷的情况。
所以解决方案是：

• 给父元素设置border-top: 1px solid transparent;
• 给父元素设置上内边距，替代子元素的上外边距
• 给父元素添加overflow: hidder;

网页自带的内外边距

body标签默认自带一个8px的外边距
ul标签默认自带一个40px的内边距
补充一下：span标签的空白缝隙为6px【谷歌浏览器】
而且不同的浏览器默认的边距的值还不一样，所以要先清楚所有的内外边距来保持一致性：

* {
	margin: 0;
	padding: 0;
}

注意，行内元素----尽量只设置左右的margin和padding，不要设置上下的margin和padding，但是转换成块元素和行内块元素就可以。

产品盒子案例的总结

以下两个会产生非常不同的效果，我曾经把背景颜色写在了通配符里，结果发现下面明明包裹在div.box的盒子的各种标签居然背景色没有继承写在Box的背景色，而是继承了写在通配符里的000颜色。
然后才得知background-color是不被继承的，通常默认显示为transparent，所以平常看到的背景颜色可能是父元素的。你也可以设置background:inherit;将背景色设置为和父元素一样的颜色。
其次，所有背景属性都不能继承，也就是说background细分的属性都是不可以继承的。
但是font系列的属性都能被继承。

* {
   backgroud-color: #000;
}
和
body {
   backgroud-color: #000;
}

注意事项：

1. 布局为什么不全用div？
   因为标签有语义，该用啥就用啥，但是靠积累，根据经验来判断。
2. 为什么这么多类名？
   类名相当于给每个盒子一个名字，这样方便后期维护，方便寻找。
3. 什么时候用margin，什么时候用padding？
   可以混用，注意，margin是在border之外的，而padding有时候会撑开盒子。
4. 自己没有思路？
   先模仿，然后按照自己的思路做。 能实现效果就OK。

圆角边框

CSS3新增的属性：
参数可以是数值或者百分比。
border可以设置四个值，从左上角开始，顺时针旋转。border-top-left-radius等等。

border-radius: 10px;
border-radius: 1px 2px 3px 4px;

原理：
半径为10px的圆和边框相交：

如何画出一个圆：

div {
	width: 100px;
	height: 100px;
	border-radius: 50% | 50px;
}

如何画出一个圆角矩形：

div {
	width: 500px;
	height: 100px;
	border-radius:  50px;
}

盒子阴影

CSS3新增属性，盒子阴影不占空间，不影响排列。

box-shadow: 10px 10px 10px -4px rgba(0,0,0,0.3);
水平10
垂直10
模糊10
阴影尺寸-4
颜色
默认outset外部阴影，还有一个inset内部阴影

文字阴影

CSS3新增属性

text-shadow: 5px 5px 6px rgba(0,0,0,0.3);

文章中的全部图片来自B站Pink老师课程，侵删