CSS三大特性及盒子模型

最新推荐文章于 2023-01-05 14:35:51 发布

昱晟168

最新推荐文章于 2023-01-05 14:35:51 发布

阅读量255

点赞数 1

分类专栏： HTMLCSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_47267628/article/details/125321691

版权

HTMLCSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

`CSS`的三大特性

三大特性：层叠性，继承性，优先级

层叠性：

相同选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突的样式

层叠性原则：就近原则，哪个样式结构近，执行那个

继承性：

在CSS中继承：子标签会继承父标签的某些样式，如文本颜色和字号

子标签可以继承父标签的样式：text- font- line- color属性

优先级：

选择器	选择器权重
继承或 `*`	0,0,0,0
元素选择器	0,0,0,1
类选择器伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式`style=""`	1,0,0,0
`!important`重要的	无穷大

盒子模型

盒子模型：由于border边框 content内容 padding内边距 margin外边距

盒子模型边框`border`

border可以设置：边框宽度（粗细），边框样式，边框颜色

语法：

border : border-width | border-style | border-color;

边框样式border-style可以设置如下值：

none：没有边框（默认值）
solid：边框为单实线（最为常用）
dashed：边框为虚线
dotted：边框为点线

CSS边框属性允许指定一个元素边框的样式和颜色如：

border : 1px solid red;//没有顺序，建议使用这种顺序

边框会影响盒子实际大小

边框会额外增加盒子的实际大小，两种方案解决：

测量盒子大小的时候，不量边框
如果包含边框，则需要使用width/height减去边框宽度

<!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>
        * {
            margin: 0 auto;
            width: 900px;
        }
        div {
            width: 498px;
            height: 198px;
            border: 2px solid red;
            /* 层叠性 */
            border-top: 2px solid skyblue;
        }   
    </style>
</head>
<body>
    <div></div>
</body>
</html>

内边距

padding属性用于设置内边距，即边框与内容之间的距离

属性	作用
`padding-left`	左内边距
`padding-right`	右内边距
`padding-top`	上内边距
`padding-bottom`	下内边距

padding属性

值的个数	表达意思
`padding:5px`	1个值，代表上下左右都有5个像素内边距
`padding:5px 10px`	2个值，代表上下都有5个像素内边距，左右都有10个像素内边距
`padding:5px 10px 20px`	3个值，代表上有5个像素内边距，左右都有10个像素内边距，下有20个像素内边距
`padding:5px 10px 20px 30px`	4个值，代表上5个像素内边距，右有10个像素内边距，下有20个像素内边距，左有30个像素内边距

当我们给盒子指定padding值后，发生2件事情：

内容和边框有了距离，添加了内边距
padding影响了盒子实际大小

就是说明了：当盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子

解决方案：如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可

盒子本身没有指定width/height属性，则此时padding不会撑大盒子大小

<!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>
        div {
            background-color: antiquewhite;
            height: 50px;
        }
        
        div a {
            text-decoration: none;
            
            padding: 0 41px;
            line-height: 50px;
        }  

        * {
            margin: 0 auto;
            width: 900px;
        }

        a:hover {
            background-color: skyblue;
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">撒打发槈</a>
        <a href="#">撒打发槈</a>
        <a href="#">撒打发槈</a>
        <a href="#">撒打发槈</a>
        <a href="#">撒打发槈</a>
    </div>
</body>
</html>

外边距`margin`

margin属性用于设置外边距，即控制盒子之间距离

属性	作用
`margin-left`	左外边距
`margin-right`	右外边距
`margin-top`	上外边距
`margin-bottom`	下外边距

margin简写方式代表的意义跟padding完全一致

外边距典型应用：

外边距可以让块级例子水平居中，但是必须满足两个条件：

盒子必须指定了宽度width
盒子左右外边距都没有设置auto

.header {width:960px;margin:0 auto;}

注意：以上方法是让块级元素水平居中，行内元素或行内块元素水平居中给其父元素添加text-align:center即可

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并，主要有两种情况：

相邻块元素垂直外边距的合并
嵌套块元素垂直外边距塌陷

相邻块元素垂直外边距合并：

当上下相邻的两个块元素（兄弟关系）都设置外边距时，如上面的元素有下外边距margin-bottom时，下面的元素有上外边距margin-top时，则他们之间的垂直间距不是margin-bottom和margin-top之和，取两个值中较大者 这种情况称为相邻块元素

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XwXnEGqA-1655377858920)(C:\Users\海康\Desktop\web\文档\img\1655111830486.png)]$

解决方案：尽量只给一个盒子添加margin值

<!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>
        .box {
            height: 800px;
            width: 900px;
            background-color: aliceblue;
        }

        .iaia {
            height: 300px;
            width: 300px;
            margin-bottom: 100px;
            background-color: skyblue;
        }

        .kaing {
            height: 200px;
            width: 300px;
            margin-top: 50px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="iaia">湛江</div>
        <div class="kaing">海康</div>
    </div>
</body>
</html>

嵌套块元素垂直外边距的塌陷：

对于两个嵌套关系（父子关系）的块元素，父元素有上边距同时子元素也有上边距，此时父元素会塌陷较大的外边距

解决方案：

可以为父元素定义上边框
可以为父元素定义上内边距
可以为父元素添加overflow:hidden

还有其他方法：比如：浮动，固定，绝对定位的盒子不会有塌陷的问题

清除内外边距：

在我们布局前，首先要清除下网页元素的内外边距

* {
	padding : 0;
	margin : 0;
}

注意：行内元素为兼容性，尽量只设置左右外边距，不要设置上下内外边距，但是转换为块级和行内块元素就可以了

圆角边框

在css中，新增圆角边框样式

border-radius属性用于设置元素的外边框圆角

语法：

border-radius : length;

参数值可以为数值或百分比形式
如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%
该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius

<!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>
        div {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: skyblue;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>海康</div>
</body>
</html>

盒子阴影

CSS中新增了盒子阴影，可以使用box-shadow属性为盒子添加阴影

语法：

box-shadow : h-shadow v-shadow blue spread color inset;

值	作用
`h-shadow`	必须值，水平阴影位置，允许为负值
`v-shadow`	必须值，垂直阴影位置，允许为负值
`blur`	可选。模糊距离
`spread`	可选。阴影的尺
`color`	可选。阴影颜色
`inset`	可选。将外部阴影（outset）改为内部阴影

注意：

默认的是外阴影（outset）但是不可以写这个单词，否则造成阴影无效
盒子阴影不占用空间，不会影响其他盒子排序

文字阴影

在css中，我们可以使用text-shadow属性将阴影应用于文本

语法：

text-shadow : h-shadow  v-shadow blur color;

值	作用
`h-shadow`	必须值，水平阴影位置，允许为负值
`v-shadow`	必须值，垂直阴影位置，允许为负值
`blur`	可选。模糊距离
`color`	可选。阴影颜色