2022黑马程序员-前端学习第一阶段（Day05-CSS布局-盒子模型）_sakura22123

未知 02-07 4098

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>Document</title> <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>Document</title> <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>Document</title> <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 Articles</h2> <ul> <li><a href="#">北京招聘网页设计，平面设计，php</a></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>