文章目录

尺寸与颜色单位

1. 尺寸单位
2. 颜色单位

CSS 盒模型

1. 内容尺寸
2. 边框

1). 边框实现
2). 单边框设置
3). 圆角边框
4). 轮廓线
5). 盒阴影

3. 内边距
4. 外边距
5. 元素最终尺寸的计算

尺寸与颜色单位

1. 尺寸单位

px 像素单位
% 百分比，参照父元素对应属性的值进行计算 响应式页面（适配不同设备屏幕）
em 字体尺寸单位，参照父元素的字体倍数大小计算，1em=16px
rem字体尺寸单位,参照根元素(**html **)的字体倍数大小计算，1rem=16px

2. 颜色单位

英文单词：red，green，blue
rgb(r,g,b) 使用三原色表示，每种颜色取值0~255
rgba(r,g,b,alpha) 三原色每种取值0~255，alpha取值0（透明）~1（不透明）
十六进制表示：以#为前缀，分为长十六进制和短十六进制。
- 长十六进制：每两位为一组，代表一种三原色；每位的取值范围0~9，a~f
  例：red rgb(255,0,0) #ff 00 00
- 短十六进制：由3位组成，每一位代表一种三原色，浏览器会自动对每一位进行重复扩充，仍然按照长十六进制解析
  例：#000 #fff #f00

CSS 盒模型

1. 内容尺寸

一般情况下，为元素设置width/height，指定的是内容框的大小
内容溢出：内容超出元素的尺寸范围，称为溢出。默认情况下溢出部分仍然可见，可以使用overflow调整溢出部分的显示,取值如下：
取值作用
visible 默认值，溢出部分可见
hidden 溢出部分隐藏
scroll 强制在水平和垂直方向添加滚动条
auto 自动在溢出方向添加可用滚动条

取值	作用
visible	默认值，溢出部分可见
hidden	溢出部分隐藏
scroll	强制在水平和垂直方向添加滚动条
auto	自动在溢出方向添加可用滚动条

2. 边框

1). 边框实现

语法：

border:width style color;

边框样式为必填项，分为：

样式取值	含义
solid	实线边框
dotted	点线边框
dashed	虚线边框
double	双线边框

2). 单边框设置

分别设置某一方向的边框，取值：width style color;

属性	作用
border-top	设置上边框
border-bottom	设置下边框
border-left	设置左边框
border-right	设置右边框

3). 圆角边框

属性：border-radius 指定圆角半径
取值：像素值或百分比

取值规律：

顺时针， 没有值看对角
一个值 	表示统一设置四个角
两个值 	表示分别设置1左上 右下  2 右上 左下
三个值 	表示分别设置1左上 2右上左下  3右下
四个值 	表示分别设置左上 右上 右下 左下

4). 轮廓线

属性：outline
取值：width style color
区别：边框实际占位，轮廓不占位
特殊：取none可以取消文本输入框默认轮廓线

5). 盒阴影

属性：box-shadow
取值：offsetX offsetY blur (spread) color;

使用：不管是浏览器窗口还是元素自身都可以构建坐标系，统一以左上角为原点，向右向下为X轴和Y轴的正方向

offsetX 	取像素值，阴影的水平偏移距离
offsetY 	取像素值，阴影的垂直偏移距离
blur 	    取像素值，表示阴影的模糊程度，值越大越模糊
spread 	    选填，取像素值，阴影是否需要延伸变大变小
color 		设置阴影颜色,默认为黑色

3. 内边距

属性：padding
作用：调整元素内容框与边框之间的距离

取值：

顺时针，没有值看对角
20px;				  一个值表示统一设置四边
20px 30px;		      两个值表示分别设置(上下) (左右)
20px 30px 40px;		  三个值表示分别设置上右下，左右保持一致
20px 30px 40px 50px;  表示分别设置上右下左

单方向内边距,只能取一个值：

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

4. 外边距

属性：margin
作用：调整元素与元素之间的距离

特殊：

margin:0; 取消默认外边距
margin:0 auto;左右自动外边距，实现元素在父元素范围内水平居中
margin:-10px;元素位置的微调

单方向外边距：只取一个值

margin-top
margin-right
margin-bottom
margin-left

外边距合并（溢出）：
- 垂直方向
  1.子元素的margin-top作用于父元素上
```
解决：
为父元素添加顶部透明边框；
或为父元素设置padding-top:0.1px;
```
  2.元素之间同时设置垂直方向的外边距，最终取较大的值
- 水平方向
  1.块元素对盒模型相关属性（width,height,padding,border,margin）完全支持;
  2.行内元素对盒模型相关属性不完全支持，不支持width/height,不支持上下边距
  3.行内元素水平方向上的外边距会叠加显示
  4.带有默认边距的元素：
```
body,h1,h2,h3,h4,h5,h6,p,ul,ol{
margin:0;
padding:0;
list-style:none; 清除列表样式
}
```

5. 元素最终尺寸的计算

盒模型相关的属性会影响元素在文档中的实际占位，进而影响布局
属性：box-sizing
取值：content-box/border-box

标准盒模型计算：各个属性值累加得到最终尺寸
```
box-sizing:content-box;
```
元素设置width/height指定的是内容框的大小
最终尺寸 = width/height+padding+border+margin
特殊盒模型计算（按钮元素）：
```
box-sizing:border-box;
```
元素设置width/height指定的是包含边框在内的区域大小
最终尺寸 = width/height+margin

来源：CSDN

作者：码雲.py

链接：https://blog.csdn.net/weixin_43814474/article/details/103847784

标签

css边框

三原色

css样式

(三)CSS盒模型