CSS-盒子模型

YL0301
219 阅读5分钟

CSS-盒子模型

一、标准盒子模型

1、盒子：任何一个元素都可以称之为盒子, 盒子就是容器。

2、盒子模型：CSS布局的基石，它规定了网页元素如何显示以及元素间相互关系。

盒子模型由四个部分组成，分别是content（内容区域）、padding（内边距）、border（边框）、margin（外边距），如图所示：

image.png

二、内容属性

内容区域指的是元素盛放文本或者是其他元素的区域，可以理解成宽度高度

可设置宽高的元素:div、p、ul、ol、dl、dt、dd、h1-h6等

注意：行内元素不能实现宽度高度

三、padding属性

image.png

1、属性：padding

2、属性取值：

padding:v1;---------------实现了四个方向的内边距，v1上右下左
padding:v1 v2;------------实现了四个方向的内边距，v1上下，v2左右
padding:v1 v2 v3;---------实现了四个方向的内边距，v1上，v2左右，v3下
padding:v1 v2 v3 v4;------实现了四个方向的内边距，v1上，v2右，v3下，v4左

规律：当padding取值为四个值时，可以记忆为上右下左

3、注意事项

（1）盒子变大了，即内边距会撑开盒子大小，占位置

（2）背景颜色会蔓延到内边距区域，同背景颜色能蔓延到边框位置道理一致

4、实现单一内边距

若不想实现四个方位的内边距，只想实现某一方位的内边距时，就用到了下面四个属性，即 padding-方向词

（1）上内边距：padding-top

（2）右内边距：padding-right

（3）下内边距：padding-bottom

（4）左内边距：padding-left

5、实现效果如下所示：

四个方位都设置了内边距，具体取值见图中绿色区域

image.png

注意：

padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值

四、border属性

边框属性在CSS核心属性中已介绍，具体链接见：

juejin.cn/post/720366…

五、margin属性

image.png

1、含义：margin代表的是外边距，外边距是边框与边框，元素与元素之间的距离

2、属性：margin

3、属性取值：

margin:v1;---------------实现了四个方向的外边距，v1上右下左
margin:v1 v2;------------实现了四个方向的外边距，v1上下，v2左右
margin:v1 v2 v3;---------实现了四个方向的外边距，v1上，v2左右，v3下
margin:v1 v2 v3 v4;------实现了四个方向的外边距，v1上，v2右，v3下，v4左

规律：当margin取值为四个值时，可以记忆为上右下左

4、注意事项

（1）背景颜色不会蔓延到外边距区域中

（2）盒子模型添加外边距时，会撑开盒子占位

4、实现单一外边距

若不想实现四个方位的外边距，只想实现某一方位的外边距时，就用到了下面四个属性，即 margin-方向词

（1）上外边距：margin-top

（2）右外边距：margin-right

（3）下外边距：margin-bottom

（4）左外边距：margin-left

5、实现效果如下所示：

四个方位都设置了外边距，具体取值见图中橙色区域

image.png

说明：margin:0 auto;可以实现一个有宽度的块元素盒子水平居中

六、间距特殊情况

1、margin和padding的取值相关问题

（1）取值都可以为0，用来清除

*{margin:0;padding:0;}

上面这行代码不精确，因为匹配的精准度不高，有一些元素没有内边距和外边距，也参与匹配了

（2）margin取值可以为负数,padding不能取值为负数

padding：取值为负数的时候, 浏览器的代码中显示会报错
margin：可以取值为负数, 因为取值负数的时候可以移动元素的位置

（3）margin:0 auto;

元素位于浏览器或者是父元素的水平居中位置
前提：当前盒子必须要有宽度，才能设置成水平居中位置

备注：
    如果给添加margin:0 auto;的元素添加浮动后，margin:0 auto;会失效
    原因：margin:0 auto;只能让文档流中的内容实现水平居中，浮动之后脱离文档流了

2、margin相关问题以及解决方法

（1）margin-top的解析(父子关系)

现象：
    默认情况下在包含结构里面,给子元素添加了margin-top之后，父元素会跟着一起下来
解决办法1：
    1.给最近的父元素添加透明上边框-border-top:1px solid transparent;
    使得外边距实现边框与边框之间的距离，从而对于父元素移动
    2.给父元素或者是子元素添加浮动-float: left; 
    只要添加浮动就会触发BFC机制，会形成一个独立的区域，这个区域不会受外界干扰，也不会干扰到外界
    3.给父元素添加-overflow:hidden;
    也会形成一个BFC区域
    4.给父元素添加定位-position:absolute/fixed;
        也会形成一个BFC区域；
        
解决方法2：
    不给子元素添加margin-top，直接给父元素添加对应的padding-top ;
    且需要给父元素的高度降低对应的padding取值（因为padding会撑大盒子）

（2）margin的上下间距重叠问题(兄弟关系)

现象：
    2个上下并列结构的时候,如果给上面的盒子添加了margin-bottom,同时给下面的盒子添加了margin-top,此时应该解析的垂直间距是2者之和,但是浏览器解析的时候,会按照最大数值去解析。

解决方法：
    1.给下面的盒子添加父元素且添加声明overflow:hidden;
        会形成一个BFC区域
    2.只给一个元素添加外边距即可

（3）margin的左右间距不重叠问题(兄弟关系)

现象：
    2个左右排列的盒子,给左侧盒子添加margin-right; 给右侧盒子添加margin-left; 两个盒子之间的距离不会出现间距重合。
    
原因：
    因为浮动会触发BFC(块级格式化上文)
avatar
文章
阅读
粉丝