Web前端：2、盒模型的组成

在HTML中，若想要实心划分区域，则：
1、添加标签；
2、对标签设置尺寸（宽高）

但只要是添加了一个元素（标签），就会在页面中生成一个盒子，不同元素产生的盒子模型可能不同，这取决于它CSS的display属性

1、display:当前元素的显示方式

• display：none；不生成盒子

           特点：在页面不显示且不占用尺寸

• display：block；块盒

        特点：块盒独占一行，即使内容只有一个字后面的元素也会换行显示
                  可以设置宽高

• display：inline；行盒

        特点：所有行盒在一行显示，且里面的内容超出一行会自动换行显示

                 设置宽高无效

• display：inline-block；行内块盒

        特点：既有行盒的特点又有块盒的特点，在一行显示且设置宽高有效

• display：其他取值；其他盒子

        例：后面布局会用display：flex；弹性盒模型

 

2、IE盒模型

在检查器中，鼠标移到某个标签。页面显示的是该标签边框盒的尺寸，默认渲染的区域也是边框盒。
IE盒模型会导致元素在页面中的实际占用尺寸会发生变化。

box-sizing：盒模型的计算规则。取值有：

内容盒 content-box;;
————由content内容区域组成，设置的宽高就是内容盒的尺寸

边框盒 border-box;
————由padding和content和border组成，设置的宽高就是边框盒的尺寸

填充盒 padding-box;
————由内边距padding和content组成
**注意！！！ **：这个取值box-sizing没有，在设置背景剪切background-clip取值这三个才都可以

 

3、盒模型的组成

centert：内容（存放文本内容）
对某一个标签设置宽度或高度，实际是对content区域内容设置

——font-weight:bold/bolder/;lighter; 字体的粗细

——overflow：溢出内容的显示方式（会创建一个BFC，后面会单独详细说到）

——overflow：visible；依然显示溢出内容

——overflow：hidden；隐藏溢出内容；对超出填充盒padding的内容进行隐藏
——overflow：auto；超出内容的方向出现滚动条

——overflow：scoll；xy轴两个方向出现滚动条

文本换行规则：
中文：标点符号、空格、汉字
英文：标点符号、空格、单词
数字：标点符号、空格

 

设置标签的断词规则：word-break:break-all; 英文会按照字母进行换行

最大/最小宽高：min/max-height；最小/最大高度；min/max-width；最小/最大宽度

font-size：取值必须是偶数（整数）且不许小于12px
字体：黑体，微软雅黑，衬线字体，非衬线字体
1个汉字=2个字符；1个字符=2个字节 双倍计算

 

 

border：边框（取值：粗细；样式；颜色；）

取值：solid实线,dashed虚线,dotted点线,double双实线
简写—border:1px solid red;
不简写——border-top：1px solid red; 只设置上边框
border-top-style：solid;
border-top-color：red;
以此类推

border:solid; 样式不可以省略
border可以省略：
1、厚度，默认3px(为了能展示双实线)
2、颜色，默认文本色（黑色）

outline轮廓，取值：厚度 样式 颜色

 

问题：outline和border的区别？
外边框，用处和border一样，但是不占像素，无法单独设置每条边
其他适用场景：去除input、a标签的焦点框

transparent，设置颜色透明（可用来做带方向的三角形）

 

圆角边框border-radius:20px;
目标：在页面中生成一个圆
1、设置宽高数值一致
2、设置边框
3、border-radius设置为宽高的一半

取1个值：4个角的弧度
取2个值：左上右下、左下右上
取3个值：左上、左下右上、右下
取4个值：左上、右上、右下、左下（顺时针）
border-radius:Apx/Bpx; A是x轴的半径，B是y轴的半径

盒子阴影box-shadow:2px 4px 6px red;
控制当前标签的阴影
取值：第1个值：x轴偏移量(宽) 正：向右；负：向左； 第2个值：y轴偏移量(高) 正：向下；负：向上； 第3个值：模糊值； 第4个值：阴影扩散的范围（可不写）； 第5个值：颜色
box-shadow:2px 4px 6px 1px red;

文本阴影：text-shadow:2px 4px 6px red;
注：每个值之间的分隔符是空格

 

padding：内边距（边框与内容之间的距离）
简写：padding：20px;
不简写：padding-top:20px;以此类推
————
取1个值：上下左右
取2个值：上下、左右
取3个值：上、左右、下
取4个值：上、右、下、左 （顺时针方向）

 

margin：外边距（表示与其他盒子的距离）

缩写方式与padding一样

注：每个值之间的分隔符是空格。 缩写只是提升开发者效率，检查器上找不到

 

4、盒模型取值单位

px 固定尺寸
em 相对尺寸，父级/当前标签字体大小的倍数
rem 相对尺寸，基于html元素的倍数
% 尺寸是包含块宽度的百分比
auto 自动，按照不同定位体系的规则计算
margin：px、em、rem、%、auto
border：px、em
padding：px、em、rem、%
width：px、em、rem、%、auto
height：px、em、rem、%、auto
 

注意！！！：
1、margin、padding、width的百分比，是包含块宽度的百分比

2、height百分比很少使用

3、width、height默认值是auto，内容的宽高尺寸

4、margin取auto，有宽度就是居中，没有宽度就是0

5、只有margin可以取负值

 

 
完。
更多资料请微信搜索公众号「 夜来妖风起」第一时间阅读。