CSS盒子模型

最新推荐文章于 2024-07-25 16:45:46 发布

鹏zxp

最新推荐文章于 2024-07-25 16:45:46 发布

阅读量230

点赞数 1

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/m0_74229555/article/details/128650506

版权

CSS盒子模型

css三大特性

继承性

特性:子元素可以继承父元素的某些特性(某些样式子承父业)

控制文字的属性都可以被继承,不是控制文字的属性不能被继承

常见继承的属性如下显示:

color: red;
font-style: italic;
font-weight: 700;
font-size: 30px;
font-family: 宋体;
text-indent: 2em;
text-align: center;
line-height: 300px;

继承的特殊情况:

如果浏览器有默认的样式,此时继承依然存在,但是会优先执行浏览器的默认样式

a标签的颜色属性可以被继承,但是被浏览器默认的样式给覆盖.

h系列标签的字体大小被继承,但是被浏览器默认的样式覆盖

高度不能被继承,但是宽度有类似继承的效果

层叠性

相同选择器才会有层叠性

层叠性遵循原则:就近原则.

样式冲突—则层叠(覆盖)

样式不冲突–则叠加(共同作用在一个标签上)

当样式冲突. 只有选择器优先级相同,才会通过层叠性判断.

优先级

不同选择器会有不同的优先级, 优先级高的样式会覆盖优先级低的样式.

判断公式:

继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important>

下面方便大家理解,但是不是很规则.

0 < 0 < 1 < 10 < 100 < 1000 < 无穷大

!important不能提高继承的优先级只要是继承优先级最低.

各个选择器的权重:

标签选择器 0 0 0 1 简单记忆 1

类选择器 0 0 1 0 简单记忆10

id选择器 0 1 0 0 简单记忆100

行内样式 1 0 0 0 简单记忆1000

!important如果不是继承,权重最高天下第一

复合选择器权重会叠加： div p 后代选择器： 0001 + 0001 = 0002

不会有进位的情况，比如 0,0,0, 10

优先级相同,会执行层叠性,写在最后面的会生效.

去除列表标签样式

list-style:none;

盒子模型

盒子模型的组成:内容(content) 内边距(padding) 外边距(margin) 边框(border)

边框(border)

边框属性

边框粗细边框样式边框颜色

border-width:5px;
border-style:solid|dotted|dashed
border-color:red

边框简写

boder:solid 1px red;
无顺序要求

边框单方向设置

上边框
border-top:solid 1px red;
下边框
border-bottom:solid 1px red;
左边框
border-left:solid 1px red;
右边框
border-right:solid 1px red;

盒子实际大小初级计算公式

盒子宽度=左边框+内容的宽度+右边框

盒子高度=上边框+内容的高度+下边框

border可以撑大盒子

如何解决:

1 手动内减

2 测量盒子的时候可以从边框的里面进行量取(不测量边框)

3 自动内减(box-sizing: border-box;)

	 .box {
            width: 400px;
            height: 400px;
            /* width: 380px;
            height: 380px; */
            background-color: green;
            border: 10px solid #000;
            /* css3盒子模型可以解决边框撑大盒子问题(自动内减) */
            box-sizing: border-box;
        }

内边距(padding)

内容区域到边框的距离

上 右 下 左
padding:10px;
上下  左右
padding:20px 30px;
上  左右  下
padding:20px 30px 40px;
上 右 下 左
padding:20px 30px 40px 50px;
单方向设置
padding-top:30px;
padding-bottom:40px;
padding-left:50px;
padding-right:60px;

盒子终极计算公式

盒子的宽度=左右边框+左右内边距+左右内容

盒子的高度=上下边框+上下内边距+上下内容

边框与padding不会撑大盒子特殊情况

当子元素不给宽度的时候, 子元素默认宽度就是父元素的宽度(父元素的100%)

此时给左右的边框和左右的内边距不会撑大盒子.

外边距(margin)

盒子到盒子之间的距离

上 右 下 左
margin:10px;
上下  左右
margin:20px 30px;
上  左右  下
margin:20px 30px 40px;
上 右 下 左
margin:20px 30px 40px 50px;
单方向设置
margin-top:30px;
margin-bottom:40px;
margin-left:50px;
margin-right:60px;

margin正常现象

水平布局的盒子,左右的 margin值互不影响

最终的距离为margin左右的和

 <div class="box1"></div><div class="box2"></div>

	* {
            margin: 0;
            padding: 0;
        } 	
	div {
            display: inline-block;
            width: 200px;
            height: 200px;
        }

        .box1 {
            background-color: pink;
            margin-right: 20px;
        }

        .box2 {
            background-color: green;
            margin-left: 30px;
        }

margin合并现象

垂直布局的块级元素上下 margin会合并.

最终的距离为margin的最大值

解决办法:

开发避免就可以,只设置一个盒子的上下外边距即可.

<div class="box1"></div>
<div class="box2"></div>

	* {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;

        }

        .box1 {
            background-color: green;
            /* margin-bottom: 30px; */
        }

        .box2 {
            background-color: pink;
            margin-top: 40px;
        }

margin塌陷现象

互相嵌套块级元素, 如果给子元素设置margin-top会作用在父元素身上,这种现象就叫嵌套块级元素塌陷

解决办法:

1 给父元素设置 padding-top或 border-top

2 给父元素设置 overflow: hidden;

3 把子元素转换为行内块 display: inline-block;

4 浮动绝对定位相对定位的盒子不会有嵌套块级元素外边距塌陷现象

 <div class="father">
        <div class="son"></div>
    </div>

 	* {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* padding-top: 1px; */
            /* border-top: 1px solid transparent; */
            /* overflow: hidden; */

        }

        .son {
            display: inline-block;
            /* float: left; */
            margin-top: 20px;
            width: 200px;
            height: 200px;
            background-color: purple;
        }