2022黑马程序员-前端学习第一阶段（Day05-CSS布局-盒子模型）
CSS布局-盒子模型-Day05 学习笔记打卡
- CSS布局
-
- CSS三大特征
-
- 继承性
- （拓展）继承的应用
- （拓展）继承失效的特殊情况
- 层叠性
- 优先级
- 权重叠加计算
- PxCook的基本使用
- 盒子模型
-
- 盒子模型的介绍
- 内容的宽度和高度
- 边框（border）
-
- 边框-单个属性
- 边框-连写
- 边框-方向设置
- 盒子实际大小初级计算公式
- 内边距（ padding ）
-
- 内边距（padding）- 取值
- 内边距（padding）- 单方向设置
- 盒子实际大小终极计算公式
- （拓展）不会撑大盒子的特殊情况
- CSS3盒模型（自动内减）
- 外边距（margin）
-
- 外边距（margin）- 取值
- 外边距（margin） - 单方向设置
- margin单方向设置的应用
- 综合案例
学习视频B站：黑马程序员-前端学习（第一阶段）
CSS布局
CSS三大特征
继承性
特性： 子元素有默认继承父元素样式的特点（子承父业）
可以继承的常见属性(文字控制属性都可以继承)
1. color
2. font-style、font-weight、font-size、font-family
3. text-indent、text-align
4. line-height
5. ……
注意点：
• 可以通过调试工具判断样式是否可以继承
（拓展）继承的应用
好处： 可以在一定程度上减少代码
常见应用场景：
1. 可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式
2. 直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小
（拓展）继承失效的特殊情况
如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式
1. a标签的color会继承失效
• 其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
2. h系列标签的font-size会继承失效
• 其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
层叠性
特性：
1. 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
2. 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
注意点：
1. 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
优先级
特性： 不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式：
• 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
注意点：
1. !important写在属性值的后面，分号的前面！
2. !important不能提升继承的优先级，只要是继承优先级最低！
3. 实际开发中不建议使用 !important 。
权重叠加计算
场景： 如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
权重叠加计算公式： （每一级之间不存在进位）
代码示例：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
/* #one {
color: red;
}
.son {
color: blue;
}
p {
color: green;
} */
/* (行内, id, 类, 标签) */
/* (0, 1, 0, 1) */
div #one {
color: orange;
}
/* (0, 0, 2, 0) */
.father .son {
color: skyblue;
}
/* 0, 0, 1, 1 */
.father p {
color: purple;
}
/* 0, 0, 0, 2 */
div p {
color: pink;
}
style>
head>
<body>
<div class="father">
<p class="son" id="one">我是一个标签p>
div>
body>
html>
比较规则：
1. 先比较第一级数字，如果比较出来了，之后的统统不看
2. 如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
3. ……
4. 如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算!）
注意点：!important如果不是继承，则权重最高，天下第一！
PxCook的基本使用
- 通过软件打开设计图
① 打开软件 ② 拖拽入设计图 ③ 新建项目 - 常用快捷键
- 放大设计图：ctrl + +
- 缩小设计图：ctrl + -
- 移动设计图：空格按住不放，鼠标拖动
- 常用工具
- 量尺寸
- 吸颜色
- 从psd文件中直接获取数据
- 切换到开发界面，直接点击获取数据
盒子模型
盒子模型的介绍
盒子的概念
1. 页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局
2. 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子
盒子模型
CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（
margin）构成，这就是 盒子模型
记忆： 可以联想现实中的包装盒
内容的宽度和高度
作用： 利用 width 和 height 属性默认设置是盒子 内容区域 的大小
属性： width / height
常见取值： 数字+px
边框（border）
边框-单个属性
作用： 给设置边框粗细、边框样式、边框颜色效果
| 作用 | 属性名 | 属性值 |
|---|---|---|
| 边框粗细 | border-width | 数字+px |
| 边框样式 | border-style | 实线 solid、虚线 dashed、点线 dotted |
| 边框颜色 | border-color | 颜色取值 |
边框-连写
属性名： border
属性值： 单个取值的连写，取值之间以空格隔开
• 如：border : 10px solid red;
快捷键： bd + tab
边框-方向设置
场景： 只给盒子的某个方向单独设置边框
属性名： border - 方位名词
属性值： 连写的取值
盒子实际大小初级计算公式
盒子实际大小初级计算公式：
• 盒子宽度 = 左边框 + 内容宽度 + 右边框
• 盒子高度 = 上边框 + 内容高度 + 下边框
内边距（ padding ）
内边距（padding）- 取值
作用： 设置 边框 与 内容区域 之间的距离
属性名： padding
取值：
| 取值 | 示例 | 含义 |
|---|---|---|
| 一个值 | padding：10px |
上右下左 设置为10px |
| 两个值 | padding：10px 20px |
上下 设置为10px、左右设置为20px |
| 三个值 | padding：10px 20px 30px |
上 设置为10px、右左设置为20px、下设置为30px |
| 四个值 | padding：10px 20px 30px 40px |
上 设置为10px、右设置为20px、下设置为30px、左设置为40px |
记忆规则： 从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！
内边距（padding）- 单方向设置
场景： 只给盒子的某个方向单独设置内边距
属性名： padding - 方位名词
属性值： 数字 + px
盒子实际大小终极计算公式
盒子实际大小终极计算公式：
• 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
• 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框
（拓展）不会撑大盒子的特殊情况
不会撑大盒子的特殊情况（块级元素）
1. 如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
2. 此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子
CSS3盒模型（自动内减）
操作： 给盒子设置属性 box-sizing : border-box ; 即可
优点： 浏览器会自动计算多余大小，自动在内容中减去
外边距（margin）
外边距（margin）- 取值
作用： 设置边框以外，盒子与盒子之间的距离
属性名： margin
常见取值：
| 取值 | 示例 | 含义 |
|---|---|---|
| 一个值 | margin：10px |
上右下左 设置为10px |
| 两个值 | margin：10px 20px |
上下 设置为10px、左右设置为20px |
| 三个值 | margin：10px 20px 30px |
上 设置为10px、右左设置为20px、下设置为30px |
| 四个值 | margin：10px 20px 30px 40px |
上 设置为10px、右设置为20px、下设置为30px、左设置为40px |
记忆规则： 从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！
外边距（margin） - 单方向设置
➢ 场景： 只给盒子的某个方向单独设置外边距
➢ 属性名： margin - 方位名词
➢ 属性值： 数字 + px
margin单方向设置的应用
| 方向 | 属性 | 效果 |
|---|---|---|
| 水平方向 | margin-left | 让当前盒子往右移动 |
| 水平方向 | margin-right | 让右边的盒子往右移动 |
| 水平方向 | margin-top | 让当前盒子往下移动 |
| 水平方向 | margin-bottom | 让当下面子往下移动 |
综合案例
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>Documenttitle>
<style>
/* 清除标签默认的margin和padding */
* {
margin: 0;
padding: 0;
}
.box {
/* 不设置宽度，块级元素默认会占满一行 */
height: 40px;
/* background-color: skyblue; */
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
}
.box a {
/* 转换行内块 */
display: inline-block;
width: 80px;
height: 40px;
/* background-color: pink; */
color: #4c4c4c;
text-decoration: none;
text-align: center;
line-height: 40px;
font-size: 12px;
}
.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>
body>
html>
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>Documenttitle>
<style>
/* 清除标签默认的margin和padding */
* {
margin: 0;
padding: 0;
}
body {
/* 去除行高带来的默认间隙，完成精准布局 */
line-height: 1;
}
.box {
width: 500px;
height: 400px;
/* background-color: pink; */
border: 1px solid #ccc;
padding: 41px 30px 0;
/* 自动内减 */
box-sizing: border-box;
}
.box h2 {
height: 41px;
/* background-color: pink; */
border-bottom: 1px solid #ccc;
/* 自动内减 */
box-sizing: border-box;
font-size: 30px;
}
.box ul {
list-style: none;
}
.box ul li {
height: 50px;
padding-left: 30px;
border-bottom: 1px dashed #ccc;
line-height: 50px;
}
.box li a {
text-decoration: none;
font-size: 18px;
color: #666;
}
style>
head>
<body>
<div class="box">
<h2>最新文章/New Articlesh2>
<ul>
<li><a href="#">北京招聘网页设计，平面设计，phpa>li>
<li><a href="#">体验javascript的魅力a>li>
<li><a href="#">jquery世界来临a>li>
<li><a href="#">网页设计师的梦想a>li>
<li><a href="#">jquery中的链式编程是什么a>li>
ul>
div>
body>
html>