◆ 能够认识不同选择器的优先级公式
◆ 能够进行 CSS 权重叠加计算，分析并解决CSS 冲突问题
◆ 能够认识盒子模型的组成部分
◆ 能够掌握盒子模型的边框、内边距、外边距的作用及简写形式
◆ 能够计算盒子的实际大小
◆ 能够了解外边距折叠现象，并知道如何解决盒子塌陷问题

一、CSS 三大特性

目标：能认识不同选择器的优先级公式，能够进行 CSS 权重叠加计算，分析并解决CSS 冲突问题
学习路径：

继承性
层叠性
优先级

3.1 优先级的介绍

➢ 特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
➢ 优先级公式：
• 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
➢ 注意点：

!important写在属性值的后面，分号的前面！
!important不能提升继承的优先级，只要是继承优先级最低！
实际开发中不建议使用 !important 。
实际开发当中不建议使用!important
!important不能提升继承的优先级，只要是继承优先级最低，
!important不能提升继承的优先级，只要是继承优先级最低，继承<通配符<标签<类<id<行内<!important
继承<通配符<标签<类<id<行内样式<!important

小结

➢ 优先级比较公式是怎样的？
• 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
➢ !important能提升继承的优先级吗？
• 不能
！important不能提升继承的优先级
继承<通配符<标签<类<id<行内样式<!important
！important不能提升继承的优先级

<!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 {
    
    
            color: orange;
        }

        .box {
    
    
            color: blue;
        }

        div {
    
    
            color: green !important;
        }

        body {
    
    
            color: red;
        }

        /* !important不要给继承的添加, 自己有样式无法继承父级样式 */
    </style>
</head>
<body>
    <!-- 意义: 当一个标签使用了多个选择器, 样式冲突的时候, 到底谁生效 -->
    <div class="box" id="box" style="color: pink;">测试优先级</div>
</body>
</html>

！important不要给继承的添加，自己有样式无法继承父级样式，当一个标签使用了多个选择器样式冲突的时候到底

3.2 权重叠加计算

➢ 场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
➢ 权重叠加计算公式：（每一级之间不存在进位）
在这里插入图片描述
行内，id选择器，类选择，标签选择器
行内，id选择器，类选择器，标签选择器
➢ 比较规则：

先比较第一级数字，如果比较出来了，之后的统统不看
如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
……
如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算!） ➢ 注意点：!important如果不是继承，则权重最高，天下第一！
行内，id，标签，类
行内，id标签，类
如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面谁说了算）
➢ 注意点：!important如果不是继承，则权重最高，天下第一！
！important如果不算是继承，则权重最高，天下第一

3.3 小结

➢ 复合选择器权重叠加计算的公式是怎样的？
在这里插入图片描述

（拓展）权重叠加计算案例

➢ 权重计算题解题步骤：

先判断选择器是否能直接选中标签，如果不能直接选中 → 是继承，优先级最低 → 直接pass
通过权重计算公式，判断谁权重最高
➢ 注意点：
• 实际开发中选择标签需要精准，尽量避免多个选择器同时选中一个标签的情况，不要自己难为自己

先判断选择器是否能直接选中标签，如果不能直接选中是继承，优先级最低，直接pass
通过权重计算公式，判断谁的权重最高

（拓展）查错流程（遇到样式出不来，要学会通过调试工具找错）

在这里插入图片描述
在elements找到对应的元素
在styles当中有没有自己设置的选择器，如果没有，一般是选择器写错了，如果选择器有，但是样式没出来，删除线，样式被注释，覆盖，小三角形：属性值后面没有分号，出现中文标点，属性名或者属性值单词拼写错误

二、PxCook的基本使用

目标：能够使用 PxCook 工具测量设计图的尺寸和颜色，能够从psd文件中直接获取数据
psd文件当中直接获取数据
学习路径：

打开设计图
常用快捷键
从psd文件中直接获取数据

1. PxCook的基本使用

通过软件打开设计图
① 打开软件 ② 拖拽入设计图 ③ 新建项目
常用快捷键
放大设计图：ctrl + +
缩小设计图：ctrl + -
移动设计图：空格按住不放，鼠标拖动
常用工具
量尺寸
吸颜色
从psd文件中直接获取数据
切换到开发界面，直接点击获取数据

三、盒子模型

目标：能够认识盒子模型的组成，能够掌握盒子模型边框、内边距、外边距的设置方法
学习路径：

盒子模型的介绍
内容区域的宽度和高度
边框（ border ）
内边距（ padding ）
外边距（margin）

1.1 盒子模型的介绍

盒子的概念
页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局
浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子
盒子模型
➢ CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（
margin）构成，这就是盒子模型
记忆：可以联想现实中的包装盒

页面当中的每一个标签，都可以看作是一个盒子，通过盒子视角更方便的进行布局，内容区域content内边距区域padding,边框区域border外边距区域margin
在这里插入图片描述

1.2 小结

➢ 盒子模型一共有几个部分组成？分别是什么？

内容区域：content
边框区域：border
内边距区域：padding
外边距区域：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>
        div {
    
    
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

width:200px;
height:200px;
background-color:pinik;

2.1 内容的宽度和高度

➢ 作用：利用 width 和 height 属性默认设置是盒子内容区域的大小
➢ 属性：width / height
➢ 常见取值：数字+px
在这里插入图片描述
width/height:数字+ppx;
利用width和height属性默认设置是盒子内容区域的大小

2.2 小结

➢ 设置盒子模型内容区域大小可以通过什么属性设置？

宽度：width
高度：height

设置盒子模型内容区域大小通过宽度和高度width,height

3.1 边框（border）- 单个属性

作用：给设置边框粗细、边框样式、边框颜色效果
➢ 单个属性：
在这里插入图片描述
solid,实现，dashed虚线，dotted点线

3.2 边框（border）- 连写形式

10px solid red;10px solid red;
属性名：border
➢ 属性值：单个取值的连写，取值之间以空格隔开
• 如：border : 10px solid red;
➢ 快捷键：bd + tab
10px solid red;10px slod red;10px solid red;

3.3 边框（border）- 单方向设置

➢ 场景：只给盒子的某个方向单独设置边框
➢ 属性名：border - 方位名词
➢ 属性值：连写的取值

<!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: 200px;
            height: 200px;
            background-color: pink;
            /* border: 粗细  线条样式   颜色 -- 不分先后顺序 */
            /* solid : 实线 */
            /* border: 1px solid #000; */

            /* dashed: 虚线 */
            /* border: 5px dashed #000; */

            /* dotted : 点线 */
            /* border: 5px dotted #000; */

            border-left: 5px dotted #000;
            border-right: 5px dotted #000;
            border-top: 1px solid red;
            border-bottom: 1px solid red;
        }
    </style>
</head>
<body>
    <div>内容</div>
</body>
</html>

border:粗细，线条样式，颜色，粗细，先调样式，颜色；
border:撑大盒子尺寸border撑大盒子尺寸，，盒子尺寸=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>
        div {
    
    
            /* border 撑大盒子尺寸 */
            /* 盒子尺寸 = width  / height + 边框线 */
            /* 如果400 * 400 尺寸 */
            width: 380px;
            height: 380px;
            background-color: green;
            border: 10px solid #000;
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

小结

➢ 给盒子设置四周 20像素、实线、蓝色的边框，属性应该如何设置？
• border：20px solid blue； ➢ 给盒子设置上边框 10像素、虚线、黄色的边框，属性应该如何设置？
• border-top：10px dashed yellow；
20px solud blue;
10px dashed yellow;

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

在这里插入图片描述
➢ 需求：盒子尺寸 400*400，背景绿色，边框10px 实线黑色，如何完成？
• 注意点： ① 设置width和height是内容的宽高！② 设置border会撑大盒子！
➢ 盒子实际大小初级计算公式：
• 盒子宽度 = 左边框 + 内容宽度 + 右边框
• 盒子高度 = 上边框 + 内容高度 + 下边框
➢ 解决：当盒子被border撑大后，如何满足需求？
• 解决：计算多余大小，手动在内容中减去（手动内减）
设置border会撑大盒子

（案例）盒子边框的小案例

➢ 需求：根据设计图，通过PxCook量取数据，通过代码在网页中完成一致的效果
在这里插入图片描述

<!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>

（案例）新浪导航案例

➢ 需求：根据设计图，通过PxCook量取数据，通过代码在网页中完成一致的效果
➢ 布局顺序：在这里插入图片描述

从外往内，从上往下
➢ 每一个盒子的样式：
宽高
辅助的背景颜色
盒子模型的部分：border、padding、margin
其他样式：color、font-、text-、……

宽高，辅助的背景颜色，盒子模型的部分border,padding,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: 40px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
        }

        /* 后代: box里面的a */
        .box a {
    
    
            width: 80px;
            height: 40px;
            /* 推荐先加上: 清楚的看到文字在什么位置 */
            /* background-color: #edeef0; */
            display: inline-block;
            text-align: center;
            line-height: 40px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
        }

        .box a:hover {
    
    
            background-color: #edeef0;
            color: #ff8400;
        }
    </style>

    <!-- 从外到内 : 先宽高背景色, 放内容, 调节内容的位置; 控制文字细节 -->
</head>
<body>
    <div class="box">
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
    </div>
    <p>
        <a href="#"></a>
    </p>
</body>
</html>

4.1 内边距（padding）- 取值

➢ 作用：设置边框与内容区域之间的距离
➢ 属性名：padding
➢ 常见取值：
在这里插入图片描述
上10px,左右设置20px,下30px;
➢ 记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！

CSS布局盒子模型(1)CSS 三大特性优先级的介绍，权重叠加计算权重叠加计算案例，边框（border）- 单方向设置，盒子模型，边框，内容的宽度和高度

一、CSS 三大特性

3.1 优先级的介绍

小结

3.2 权重叠加计算

3.3 小结

（拓展）权重叠加计算案例

（拓展）查错流程（遇到样式出不来，要学会通过调试工具找错）

二、PxCook的基本使用

1. PxCook的基本使用

三、盒子模型

1.1 盒子模型的介绍

1.2 小结

2.1 内容的宽度和高度

2.2 小结

3.1 边框（border）- 单个属性

3.2 边框（border）- 连写形式

3.3 边框（border）- 单方向设置

小结

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

（案例）盒子边框的小案例

（案例）新浪导航案例

4.1 内边距（padding）- 取值

猜你喜欢

CSS布局 盒子模型(1)CSS 三大特性优先级的介绍，权重叠加计算权重叠加计算案例，边框（border）- 单方向设置，盒子模型，边框，内容的宽度和高度

一、CSS 三大特性

3.1 优先级的介绍

小结

3.2 权重叠加计算

3.3 小结

（拓展）权重叠加计算案例

（拓展）查错流程 （遇到样式出不来，要学会通过调试工具找错）

二、PxCook的基本使用

1. PxCook的基本使用

三、盒子模型

1.1 盒子模型的介绍

1.2 小结

2.1 内容的宽度和高度

2.2 小结

3.1 边框（border）- 单个属性

3.2 边框（border）- 连写形式

3.3 边框（border）- 单方向设置

小结

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

（案例）盒子边框的小案例

（案例）新浪导航案例

4.1 内边距（padding）- 取值

猜你喜欢

CSS布局盒子模型(1)CSS 三大特性优先级的介绍，权重叠加计算权重叠加计算案例，边框（border）- 单方向设置，盒子模型，边框，内容的宽度和高度

（拓展）查错流程（遇到样式出不来，要学会通过调试工具找错）