css(五)之标准流

文章目录

• 网页布局本质
• css盒子模型
• 盒子组成
• 边框
• 内边距
• 外边距
• 嵌套块元素垂直外边距的塌陷
• 清除内外边距代码
• 圆角边框
• 盒子阴影

网页布局本质

网页布局就是由一个又一个的盒子组成的，盒子包括标准流，浮动和定位。
下面有个口诀：
列找标准流
行找浮动
飘动找定位

css盒子模型

网页布局的核心就是盒子。

盒子组成

边框

是由粗细，样式，颜色组成。

border:border-width | border-style | border-color

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框的颜色

• border-style：solid(实线边框)，dashed(虚线边框)，dotted(点边框)
• border-color：red

复合写法：

border: 3px solid red

内边距

设置盒子中的内容和边框的距离。

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

复合写法：

值的个数	表达意思
padding:5px;	1个值，代表上下左右都有5像素内边距
padding:5px 10px;	2个值，代表上下内边距是5像素，左右内边距是10像素;
padding:5px 10px 20px;	3个值代表上内边距5像素 左右内边距10像素 下内边距20像素
padding:5px 10px 20px 30px;	上5，右10，下20，左30

注意：padding会影响盒子的实际大小。

外边距

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

复合写法：

值的个数	表达意思
margin:5px;	1个值，代表上下左右都有5像素外边距
margin:5px 10px;	2个值，代表上下外边距是5像素，左右外边距是10像素;
margin:5px 10px 20px;	3个值代表上外边距5像素 左右外边距10像素 下内边距20像素
margin:5px 10px 20px 30px;	上5，右10，下20，左30

注意：左右margin设置为auto

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

对于两个嵌套关系的块元素，父元素有上外边距的同时子元素也有上外边距，此时父元素会塌陷较大外边距的值。

解决方案：

1. 为父元素定义上边框。

2. 可以为父元素定义上内边距。

3. 可以为父元素添加overflow:hidden。

清除内外边距代码

* {
	margin:0;
	padding:0;
}

圆角边框

盒子可以变成圆角的了。
只需要在盒子中添加如下代码就行了：

border-radius:length;

盒子阴影

只需要在盒子中添加如下代码就行了：

box-shadow:h-shadow v-shadow blur spread color inset;

同样可以用text-shadow来设置文字阴影。

值	描述
h-shadow	必须，水平阴影的位置
v-shadow	必须，垂直阴影的位置
blur	可选，模糊距离
spread	可选，阴影尺寸
color	可选，阴影颜色
inset	可选，外部阴影改为内部阴影

例子：

box-shadow:10px 10px 10px 10px rgba(0,0,0,0.3);

来源：CSDN

作者：vegetable exploded

链接：https://blog.csdn.net/qq_38783257/article/details/104110433