CSS盒子模型

最新推荐文章于 2024-10-04 00:46:18 发布

步步生花@苏殿主

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量105

点赞数

分类专栏： HTML+CSS基础学习文章标签：前端 css3 学习

本文链接：https://blog.csdn.net/sjp991012/article/details/123604489

版权

HTML+CSS基础学习专栏收录该内容

21 篇文章 0 订阅

订阅专栏

文章目录

一、CSS三大特性
二、盒子模型

一、CSS三大特性

1、继承性

子元素默认继承父元素样式的特点
可继承的常见属性（文本控制属性都可以继承）：

a . color
b . font-style,font-weight,font-size,font-family
c . text-indent,text-align
d . line-height
e . ······

巧记：控制字的都可以继承，不是控制字的不能继承
a标签的color会继承失效
h系列标签的font-size会继承失效

2、层叠性

给同一个标签设置不同的样式–>样式会层叠叠加–>共同作用在标签上
给同一个标签设置相同同的样式–>样式会层叠覆盖–>写在最后的样式会生效
当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

3、优先级

优先级高的选择器样式会覆盖优先级低的选择器样式
优先级公式：继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式< !important
!important会写在属性值的后面，分号的前面
!important不能提升继承的优先级，只要是继承优先级最低
实际开发中不建议使用!important
复合选择器时，可进行权重叠加计算进行判断

二、盒子模型

1、盒子模型介绍

css中规定每个盒子分别由：内容区域、内边距区域、边框区域、外边距区域构成，这就是盒子模型

2、内容区域的宽度和高度

利用width和height属性默认设置盒子内容区域的大小
常见取值：数字+px

3、边框（border）

复合属性
属性值：单个取值的连写，取值之间以空格隔开，例：border:1px solid red
solid：实线 , dashed：虚线, dotted：点线
边框-单方向设置：border-方位名词，例：border-left
边框粗细：border-width:数字+px
边框样式：border-style:solid / dashed / dotted
边框颜色：border-color:颜色取值

<!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: 280px;
            height: 280px;
            background-color: #ffc0cb;
            border: 10px solid #00f;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>