【CSS】CSS 总结 ⑤ ( CSS 盒子边框 | CSS 盒子模型内边距 | CSS 盒子模型外边距 | CSS 盒子模型圆角边框 | CSS 盒子模型阴影 ) ★

一、CSS 盒子边框

1、盒子模型

HTML 的 一个布局 可以看做一个 矩形的 盒子模型 , 该 盒子模型 是一个用于 容纳 标签元素 的容器 ;

盒子模型 组成 : 由内到外顺序如下 :

• 内容 Content : 下图中 内容为 100 x 100 像素的元素 ;
• 内边距 Padding : 内边距 Padding 位于 边框 与 内容 之间 ;
• 边框 Border : 边框 包裹 内边距 , 在 外边距 与 内边距 之间 , 边框 1 像素 ;
• 外边距 Margin : 最外层 元素 , 与其它盒子的距离 ;

2、盒子边框设置语法

单独设置语法

边框设置语法 :

• 设置边框宽度 : border-width 属性值为 像素值 ;

	border-width: 10px;

• 设置边框样式 : border-style 属性值 设置边框样式 , 可设置的值由如下选择 :
  • none : 默认选项 , 忽略边框宽度 ;
  • solid : 设置 实线边框 ;
  • dashed : 设置 虚线边框 ;
  • dotted : 设置 点线边框 ;

	border-style: solid;

• 设置边框颜色 :

	border-color: red;

综合设置语法

盒子边框设置综合写法 : 在 border 属性 后设置 边框宽度 边框样式 边框颜色 三个值 , 使用空格隔开 , 这三个值没有顺序 ;

border : border-width border-style border-color 

之前的边框需要写 3 行代码 , 设置 3 个属性 ,

			/* 边框宽度 4px */
			border-width: 4px;
			
			/* 边框样式-点线 */
			border-style: dotted;
			
			/* 边框颜色 */
			border-color: red;

边框设置综合写法 , 只需要写一行代码 , 即可替代上述 3 行代码 ;

			/* 边框样式综合写法 */
			border: 4px dotted red;

盒子的 边框 Border , 由 四个方向 的边框组成 , 左上右下 四个 方向 上的 边框 可以单独指定样式 ,

如 : 上边框指定 4 像素 的 红色 实线 , 下边框 指定 2 像素 的 灰色 虚线 ;

3、盒子边框单独指定语法

边框单独指定 语法 :

• 上边框 :
  • 上边框样式 : 通过 border-top-style 属性设置 ;
  • 上边框宽度 : 通过 border-top-width 属性设置 ;
  • 上边框颜色 : 通过 border-top-color 属性设置 ;
  • 总体写法 : 通过 border-top 属性设置 ;
• 下边框 :
  • 下边框样式 : 通过 border-bottom-style 属性设置 ;
  • 下边框宽度 : 通过 border-bottom-width 属性设置 ;
  • 下边框颜色 : 通过 border-bottom-color 属性设置 ;
  • 总体写法 : 通过 border-bottom属性设置 ;
• 左边框 :
  • 左边框样式 : 通过 border-left-style 属性设置 ;
  • 左边框宽度 : 通过 border-left-width 属性设置 ;
  • 左边框颜色 : 通过 border-left-color 属性设置 ;
  • 总体写法 : 通过 border-left 属性设置 ;
• 右边框 :
  • 右边框样式 : 通过 border-right-style 属性设置 ;
  • 右边框宽度 : 通过 border-right-width 属性设置 ;
  • 右边框颜色 : 通过 border-right-color 属性设置 ;
  • 总体写法 : 通过 border-right属性设置 ;

建议使用 每个边框 的 总体写法 ;

4、盒子边框合并

设置

border-collapse: collapse;

CSS 样式 , 可以 将 相邻的边框 合并在一起 ;

二、CSS 盒子模型内边距

概念

内边距 是 盒子 的 边框 与 内容 之间的 间隔长度 ;

下图中 , 中心 100 x 100 像素 的 是内容 , 内容外侧 , 边框内侧 , 就是 内边距 范围 ;

内边距设置语法

内边距设置语法 :

• padding-left : 设置 左内边距 ;
• padding-top : 设置 上内边距 ;
• padding-right : 设置 右内边距 ;
• padding-bottom : 设置 下内边距 ;

内边距设置效果

设置内边距效果 : 为 盒子模型 设置 内边距 Padding 后 ,

• 在 盒子内容 与 盒子边框 中间 , 会产生一个内边距 ,
• 与此同时 盒子模型 的 尺寸 会变大 ;

2、盒子模型内边距复合写法

盒子模型内边距 可以通过

• padding-left 左内边距
• padding-right 右内边距
• padding-top 上内边距
• padding-bottom 下内边距

进行 分别设置 , 也可以通过 padding 属性进行复合实现 ;

padding 属性值设置 : 设置 1 ~ 4 个 值 , 单位 像素 px ;

• 设置 1 个值 : 设置 上下左右 内边距 ;

/* 设置 上下左右 内边距 20px */
padding: 20px;

• 设置 2 个值 : 设置 上下、左右 内边距 ;

/* 设置 上下内边距 20px , 左右内边距 10px */
padding: 20px 10px;

• 设置 3 个值 : 设置 上、左右、下 内边距 ;

/* 设置 上内边距 20px , 左右内边距 10px , 下内边距 30px */
padding: 20px 10px 30px;

• 设置 4 个值 : 设置 上、右、下、左 内边距 ;

/* 设置 上内边距 20px , 右内边距 10px , 
   下内边距 30px , 左内边距 50px */
padding: 20px 10px 30px 50px;

3、盒子模型尺寸计算

上面设置 Padding 会撑大盒子 , 因此在设计 盒子模型 样式的时候 , 要提前计算好

• 内容尺寸
• 内边距
• 边框宽度
• 外边距

这四个值 , 其中的 内容尺寸 + 内边距 + 边框宽度 最终得到的才是盒子模型的宽度 ;

分析下面的代码 , 盒子模型 的尺寸如下 :

• 内容尺寸 : 200 x 200 像素 ;
• 内边距 : 上内边距 20px , 右内边距 10px , 下内边距 30px , 左内边距 50px ;
• 边框宽度 : 10 像素 ;

盒子模型的宽度 = 内容宽度 200px + 右内边距 10px + 左内边距 50px + 边框宽度 10px * 2 = 280px ;

盒子模型的高度 = 内容高度 200px + 上内边距 20px + 下内边距 30px + 边框宽度 10px * 2 = 270px ;

4、内边距 对 盒子模型尺寸 的影响

如果 标签元素 没指定 具体的尺寸 , 为该元素设置 Padding 内边距 , 则不会撑开盒子 ;

如果 标签元素 指定了 具体的尺寸 , 为其设置 Padding 内边距 , 会撑开盒子 ;

三、CSS 盒子模型外边距

盒子模型外边距 Margin 用于控制 盒子 与 盒子 之间的距离 ;

1、盒子模型外边距属性单独设置

外边距设置语法 :

• margin-left : 设置 左外边距 ;
• margin-top : 设置 上外边距 ;
• margin-right : 设置 右外边距 ;
• margin-bottom : 设置 下外边距 ;

代码示例 :

			/* 设置外边距 */
			margin-left: 100px;
			margin-top: 100px;

2、外边距属性复合写法

外边距复合写法 : 设置 1 ~ 4 个 值 , 单位 像素 px ;

• 设置 1 个值 : 设置 上下左右 外边距 ;
• 设置 2 个值 : 设置 上下、左右 外边距 ;
• 设置 3 个值 : 设置 上、左右、下 外边距 ;
• 设置 4 个值 : 设置 上、右、下、左 外边距 ;

/* 设置外边距 - 复合写法 - 上、右、下、左 外边距 */
margin: 20px 30px 40px 50px;

使用 margin: auto; , 将四个边距都设置为 auto , 此时左右边距自动就是 auto , 也可以实现水平居中 ;

/* 盒子水平居中 */
margin: auto;

使用 margin: 0 auto; , 将上下边距设置为 0 像素 , 左右边距设置为 auto ;

/* 盒子水平居中 */
margin: 0 auto;

3、盒子水平居中设置

如果要 将一个 块级元素 的 盒子模型 设置为 水平居中 样式 , 需要设置以下两项 :

• 盒子模型 的 宽度 必须设定 , 也就是 width 属性 ;
• 盒子模型 的 左外边距 和 右外边距 必须 设置为 auto 值 ;

如果没有设置宽度 , 块级盒子自动充满父容器 , 因此 如果要设置水平居中, 必须设置宽度 ;

auto 的含义是 指定的 边距方向 自动充满 ;

/* 盒子水平居中 */
margin-left: auto;   
margin-right: auto;

4、图片位置改修

对于 img 标签 插入的图片 , 可以 通过设置 盒子模型 左边距 和 上边距 而设置图片的位置 ;

• margin-left 设置图片的 左外边距 ;
• margin-top 设置图片的 上外边距 ;

/* 通过修改 盒子模型 外边距 修改图片显示位置 */
margin-left: 50px;
margin-top: 50px;

对于 盒子模型 的 背景图片 , 可以 通过修改 背景位置 background-position 属性 修改图片显示位置 ;

/* 设置图片背景 */
background: pink url(images/image.jpg) no-repeat;
/* 通过修改 背景位置 background-position 修改图片显示位置 */
background-position: 50px 50px;

5、标签默认外边距

向 HTML 的 <body> 标签中 , 添加元素 , 并 不是紧贴 左侧 和 顶部 , 而是有一个 默认的间距 ;

<body> 标签 默认设置了 8 像素的外边距 , 对应的调试模式中 橙色的 部分 ;

body {
    display: block;
    margin: 8px;
}

<p> 标签 的 默认 上边距 和 下边距 都是 1em ;

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

6、清除默认的外边距

使用 通配符选择器 设置 清除内外边距 样式 , 将所有的标签元素 的 默认的内外边距 全部设置为 0 ;

清除标签默认的内外边距 样式 :

* {
   /* 清除标签默认的内边距 */
   padding: 0;   
   /* 清除标签默认的外边距 */      
   margin: 0;
}

上述代码是所有的 CSS 标签的第一行代码 ;

7、上下相邻两个模型盒子 外边距塌陷

上下相邻 的 两个模型盒子 , 如果出现下面的情况 :

• 上面的 模型盒子 设置了 下外边距 margin-bottom ,
• 下面的 模型盒子 设置了 上外边距 margin-top ,

这两个 模型盒子 之间的 垂直间距 不是 两个边距之和 = margin-bottom + margin-top ,

而是 这两个边距 中的较大的值 , 即 max (margin-bottom , margin-top) ,

该现象称为 外边距 塌陷 , 如下图所示 :

推荐的解决方案 : 设置上下相邻的 模型盒子 时 , 只给一个设置 上下边距 , 不要都设置 ;

注意 : 仅在 垂直方向 上会出现 外边距合并 现象 , 水平方向 外边距 不会合并 ;

8、嵌套模型盒子 外边距塌陷

嵌套 的 模型盒子 中 , 如果出现下面的情况 :

• 父元素 没有 内边距 和 边框
• 父元素 和 子元素 都设置了 上外边距 ,

则会出现 父元素 上外边距 与 子元素 上外边距 合并的情况 ,

合并后的 上外边距为 二者之间 较大的值 ;

推荐解决方案 :

• 为 父元素 设置 边框 或 内边距 , 不要让 两个外边距 互相接触 ;
• 为 父元素 添加 overflow:hidden 属性 ;

四、CSS 盒子模型圆角边框

1、圆角边框

在 CSS3 中 , 新加入了 圆角边框 样式 , 设置

border-radius: length;  

属性 , 即可设置 盒子模型 的 圆角边框 ;

border-radius 属性值取值 :

• 像素数值 : 设置一个 像素值 , 如 : 50px ;
• 百分比数值 : 设置一个 百分比数值 , 如 : 50% ;

在网页设计中 , 大量用到了圆角边框 , 如 :

• 购物车上的数字 : 购物车上的浮动数字 , 使用了圆角边框 ;

在这里插入图片描述

• 圆角的按钮 : 下图中 头像 以及 下面的两个 按钮 , 都是圆角边框 ;

2、圆角边框案例

如果 盒子模型 高度 = 宽度 , 并且 圆角矩形 的 圆角半径 为 50% 或者 高度/宽度 的一半 , 则该圆角矩形 表现就是一个圆 ;

/* 设置圆角 下面两种设置效果相同 , 该容器宽高 200px */
/*border-radius: 100px;*/
border-radius: 50%;

如果 盒子模型 高度 != 宽度 , 并且 圆角矩形 的 圆角半径 为 高度 的一半 , 则该圆角矩形 表现就是一个正常的圆角矩形 , 左右两侧是圆角 ;

		/* 圆角矩形样式 */
		div {
			width: 200px;
			height: 50px;
			
			/* 设置圆角 */
			border-radius: 25px;
		}

五、CSS 盒子模型阴影

1、盒子模型阴影属性

盒子模型阴影 使用 如下 属性设置 :

box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内外阴影;

只有 前两个阴影 , 水平阴影 和 垂直阴影 必须写 , 后面的四个值可以省略 ;

标准的阴影代码 :

			/* box-shadow: 水平阴影 垂直阴影 
			  模糊距离 阴影尺寸 阴影颜色 内外阴影；*/
			box-shadow: 2px 2px 2px 2px black;

			/* box-shadow: 水平阴影 垂直阴影 
			  模糊距离 阴影尺寸 阴影颜色 内外阴影；*/
			box-shadow: 0 15px 30px rgba(0,0,0,.3);

2、盒子模型阴影属性示例

水平阴影代码 : 只修改第一个属性值 ;

			/* box-shadow: 水平阴影 垂直阴影 
			  模糊距离 阴影尺寸 阴影颜色 内外阴影；*/
			box-shadow: 20px 2px 2px 2px black;

垂直阴影代码 : 只修改第二个属性值 ;

			/* box-shadow: 水平阴影 垂直阴影 
			  模糊距离 阴影尺寸 阴影颜色 内外阴影；*/
			box-shadow: 2px 20px 2px 2px black;

模糊距离代码 : 只修改第三个属性值 ;

			/* box-shadow: 水平阴影 垂直阴影 
			  模糊距离 阴影尺寸 阴影颜色 内外阴影；*/
			box-shadow: 2px 2px 20px 2px black;

阴影尺寸示例代码 : 只修改第四个属性值 ;

			/* box-shadow: 水平阴影 垂直阴影 
			  模糊距离 阴影尺寸 阴影颜色 内外阴影；*/
			box-shadow: 2px 2px 2px 20px black;

阴影颜色示例代码 : 只修改第五个属性值 ;

			/* box-shadow: 水平阴影 垂直阴影 
			  模糊距离 阴影尺寸 阴影颜色 内外阴影；*/
			box-shadow: 2px 2px 2px 2px blue;

内外阴影示例代码 : 只修改第六个属性值 ; 如果设置外阴影 , 不需要写第六个值 , 就是默认状态 , 写了就错了 ;

			/* box-shadow: 水平阴影 垂直阴影 
			  模糊距离 阴影尺寸 阴影颜色 内外阴影；*/
			box-shadow: 2px 2px 2px 2px black;