CSS优先级&CSS盒子模型

最新推荐文章于 2023-06-30 12:09:12 发布

疋瓞

最新推荐文章于 2023-06-30 12:09:12 发布

阅读量553

点赞数

分类专栏： web前端文章标签： css 前端 css3

本文链接：https://blog.csdn.net/sz1125218970/article/details/128374382

版权

web前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1、CSS继承

文字相关的样式可以被继承【作用在父元素上面，子元素可以继承】
布局相关的样式不可以被继承【可以通过inherit值进行继承】

2、CSS优先级

书写了相同样式时，后写的样式优先级较高
当内部样式和外部样式有相同的样式时，后写的样式优先级较高
style行间 > id > class > 标签 > * > 继承
通过权重来表示优先级：
- style行间权重 1000
- id 权重 100
- class 权重 10
- 标签权重 1

3、CSS盒子模型

content：物品【width和height组成】
padding：填充物【写两个值代表上下、左右，写四个值为上、右、下、左】不能为负值
border：包装盒
margin：盒子与盒子之间的间距【外边距，写两个值代表上下、左右，写四个值代表上、右、下、左】可以为负值
注意：
- 背景色填充到除了margin以外所有的盒子区域
- 文字在content区域
box-sizing：
- 盒尺寸，可以改变盒子模型的展示形态
- content-box：width、height是作用于content部分
- border-box：width、height是作用于content、padding、border三部分
盒子模型的一些问题：
- 1、margin叠加问题，当上下盒子同时存在margin的时候，会取上下两个margin中较大的作为叠加的值。（解决方案：1.给一个margin取值，另一个不取。2.BFC规范）
- 2、margin传递问题，当两个盒子嵌套在一起的时候，内部盒子如果有margin-top，就会牵连外部盒子一起存在margin-top（解决方案：1.BFC规范，2.给父容器加边框，3.给父容器添加padding取代子容器的margin-top）
- 3、盒子模型添加到不同标签会有不同的问题，以上问题是盒子模型添加到div标签之后出现的问题。
盒模型拓展：
- 1.将margin-left设置为auto，则左边占据剩余部分全部，同理margin-right设置为auto，则右边占据剩余部分全部。如果两个都设置为auto，则盒子会居中。【注意，margin左右自适应可以，上下自适应不行】
- 2.在嵌套的两个盒子中，外部盒子设置宽高，内部盒子不设置width，内部盒子会自动根据所给的值填充整个外部盒子宽度范围，不需要计算，节省代码。
- 3.在行内定义一个区域，也就是一行内可以被划分成好几个区域，从而实现某种特定效果。本身没有任何属性。

4、练习

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{ width: 350px; height: 350px; border: 1px black dashed; 
            padding: 27px;}
        #box2{ border:5px #d7effe solid; padding: 20px;}
        #box3{ background-color: #ffa0df; padding: 41px;}
        #box4{ border:1px white dashed; padding: 3px;}
        #box5{ border:1px white dashed; padding: 49px;}
        #box6{ width: 100px; height: 100px; background-color: #96ff38; border: #fcff00 5px solid;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3">
                <div id="box4">
                    <div id="box5">
                        <div id="box6"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>