CSS

三大特性（层叠性、继承性、优先级）

CSS 三大特性之层叠性
在开发中出现样式层叠时候：对一个元素多次设置同一个样式，会使用最后一次设置的属性值。
样式层叠的原则：样式冲突，就近原则，后定义，后生效；样式不冲突，无论定义先后，始终有效。
CSS 三大特性之继承性
CSS 的继承性的好处：可以从一定程度上简化代码。
子元素通常能够继承哪些样式：子元素会继承父元素的某些样式，如文本颜色、字体属性等。
用 Chrome 的调试工具可以查询哪些属性是继承的：

*行高的继承
行高不跟单位表示文字大小的倍数，例如 1.5 表示以文字大小的 1.5 倍作为行高。
在 body 中指定行高 1.5 的最大优势：子元素可以根据自己的文字大小自动调整行高。
CSS 三大特性之优先级
学习优先级能解决的问题：当同一个元素被指定了多个选择器，需要掌握了 CSS 的优先级，才能准确地分析出到底会应用哪个选择器中的样式
选择器的权重：

*优先级注意的问题
1.权重的数字不能进位
2.类选择器永远大于标签选择器
3.继承的权重是0
CSS 权重的叠加
在使用复合选择器时需要考虑权重叠加的问题
案例：（讲解看代码注释）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>权重的叠加</title><style>/* 复合选择器会有权重叠加的问题 *//* 权重虽然会叠加,但是永远不会有进位 *//* ul li 权重  0,0,0,1 + 0,0,0,1  =  0,0,0,2     2 */ul li {color: green;}/* li 的权重是 0,0,0,1    1 */li {color: red;}/* .nav li  权重    0,0,1,0  +  0,0,0,1  =  0,0,1,1    11 */.nav li {color: pink;}</style>
</head>
<body><ul class="nav"><li>大猪蹄子</li><li>大肘子</li><li>猪尾巴</li></ul>
</body>
</html>

盒子模型原理

网页布局的三大核心：盒子模型 → 浮动 → 定位
盒子模型 - 边框 border
在 CSS 中可以通过border属性来设置边框
能够设置的边框样式：

边框的复合写法：
边框的复合写法没有顺序要求，推荐写法：

 border: 1px solid #000;

可以单独设置一个边框：

*表格细线边框
适用场景：仅仅适用于表格

border-collapse: collapse

可以把相邻的边框合并到一起
*边框会影响盒子实际大小
如何解决：
1.测量盒子大小时，不测量边框。
2.width / height 减去边框宽度。
盒子模型 - 内边距 padding
内边距的应用场景:设置内容与边框之间的距离 .
分别设置四个方向的内边距:

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

*padding 内边距的复合写法

*padding 会影响盒子实际大小
如何解决:width / height 减去多出来的 padding
案例：
利用 padding 撑开盒子巧做等距离的导航栏
相关取值：

上边框 3px #ff8500
下边框 1px #edeef0
盒子高度 41px ，背景色 #fcfcfc
文字颜色 #4c4c4c

参考代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>新浪导航</title><style>.nav {height: 41px;border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;background-color: #fcfcfc;line-height: 41px;font-size: 0;}.nav a {/* a属于行内元素 此时必须要转换 行内块元素 */display: inline-block;height: 41px;padding: 0 20px;font-size: 12px;color: #4c4c4c;text-decoration: none;}.nav a:hover {background-color: #eee;color: #ff8500;}</style>
</head>
<body><div class="nav"><a href="#">新浪导航</a><a href="#">手机新浪网</a><a href="#">移动客户端</a><a href="#">微博</a><a href="#">三个字</a></div>
</body>
</html>

*处理 inline-block 的间隙（面试题）
将父级元素的字体设置为 0，内部重新设置字体。
*padding 不会撑开盒子的情况
块元素没有指定 width 属性, padding 不会撑大盒子的宽度,但是设置 padding-top 和 padding-bottom 会撑大盒子的高度。
盒子模型 - 外边距 margin
外边距的应用场景：控制盒子与盒子之间的距离
给一个盒子分别设置四个方向的外边距：(行内元素垂直外边距除外)

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

盒子外边距的复合写法：

*外边距典型应用-块级盒子水平居中对齐
两个条件：1. 盒子必须有宽度 2. 水平间距设置为 auto

margin：auto；

*行内元素和行内块元素水平居中
给其父盒子添加 text-align: center;

*外边距合并-相邻块元素垂直外边距
上面的盒子有 margin-bottom ，下面的盒子有 margin-top ，取最大值
解决办法：只设置一个盒子的 margin

*外边距合并-嵌套块元素塌陷
嵌套块元素塌陷的情况：
父子元素同时具有上外边距，父元素会塌陷较大的外边距。
解决方案：
1.顶部增加边框
2.顶部增加 padding
3.父级元素overflow: hidden; （推荐）

*清除内外边距
开发时要做清除内外边距的事情的原因：
网页元素很多都带有默认的内外边距，而且浏览器的默认值也不尽相同，清除内外边距可以避免默认样式对布局的干扰。
推荐的清除内外边距的方案:

* {   margin: 0;   padding: 0;
}

行内元素在设置内外间距时尽量只设置左右内外间距，不要设置上下内外间距。

综合案例 - 产品模块布局

产品模块布局分析图

像素大厨切图稿

素材图片

素材代码

<div class="box">
<img src="data:images/img.jpg" alt="" />
<p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p>
<div class="appraise">来自于 117384232 的评价</div>
<div class="info">
<h4>Redmi AirDots真无线蓝...</h4>
<em>|</em>
<span> 99.9元</span>
</div> </div>

参考代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>综合案例-产品模块</title><style>* {margin: 0;padding: 0;}body {background-color: #f5f5f5;}a {color: #333;text-decoration: none;}.box {width: 298px;height: 415px;background-color: #fff;/* 让块级的盒子水平居中对齐 */margin: 100px auto;}.box img {/* 图片的宽度和父亲一样宽 */width: 100%;}.review {height: 70px;font-size: 14px;/* 因为这个段落没有 width属性 所有 padding不会撑开盒子的宽度 */padding: 0 28px;margin-top: 30px;}.appraise {font-size: 12px;color: #b0b0b0;margin-top: 20px;padding: 0 28px;}.info {font-size: 14px;margin-top: 15px;padding: 0 28px;}.info h4 {display: inline-block;font-weight: 400;}.info span {color: #ff6700;}.info em {font-style: normal;color: #ebe4e0;margin: 0 6px 0 15px;}</style></head><body><div class="box"><img src="data:images/img.jpg" alt="" /><p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p><div class="appraise">来自于 117384232 的评价</div><div class="info"><h4><a href="#">Redmi AirDots真无线蓝...</a></h4><em>|</em><span> 99.9元</span></div></div></body>
</html>

如有不足，请多指教，
未完待续，持续更新！
大家一起进步！

前端与移动开发-----CSS（三大特性+盒子模型原理）相关推荐

CSS / 三大特性+盒子模型+PS基础
目录 CSS的三大特性层叠性继承性优先级盒子模型边框 border 内边距 padding 外边距 margin PS测量 CSS的三大特性层叠性后来居上,相同选择器设置相同样式时,一个 ...
web前端学习128-134（CSS三大特性---层叠性，继承性，优先级）
文章目录 1 CSS的三大特性 1.1 层叠性 1.2 继承性 1.3 优先级 1 CSS的三大特性 CSS有三个非常重要的三个特性︰层叠性.继承性.优先级. 1.1 层叠性相同选择器给设置相同的样 ...
16.JAVA之前端，HTML，CSS(选择器，盒子模型)，JS，JQuery，Json，ajax
一.Web前端技术栈 1.HTML超文本标记语言实现页面展现,形成静态网页 2.CSS层叠样式表实现页面美化 3.JS javascript脚本语言实现 ...
【前端基础之css2(emmet语法、CSS复合选择器、元素的显示模式、Snipaste截图工具、小米侧边栏制作、CSS背景、CSS三大特性、盒子模型、PS基本操作】
emmet语法快速生成HTML标签: 快速生成CSS样式语法: 方法1(没有找到对应的文件,所以用了方法2): 方法2: 左下角选择设置搜索框输入"格式化",勾选上如图三个选项 ...
前端笔记（4）css，复合选择器，标签的显示模式，行高，css背景，css三大特性
css样式表/层叠样式表(2) (1)css复合选择器后代选择器子元素选择器交集选择器(不常用) 并集选择器链接伪类选择器 (2)标签的显示模式块级元素block-level 行内元素inl ...
从零开始学前端：CSS元素模式的转换和CSS三大特性 --- 今天你学习了吗？（CSS：Day12）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:复习课程 - 今天你学习了吗?(CSS:Day11) 文章目录从零开始学前端:程序猿小白也可以完全掌握! ...
CSS布局：CSS三大特性、盒子模型
CSS布局 Date: September 3, 2022 Summary: CSS三大特性.盒子模型 CSS三大特性 ◆ 能够认识不同选择器的优先级公式 ◆ 能够进行 CSS 权重叠加计算,分析 ...
day 9/16 css三大特性和盒子模型
CSS 三大特性层叠性继承性特殊性 CSS层叠性所谓层叠性是指多种CSS样式的叠加. 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另 ...
CSS 三大特性与盒子模型
CSS 三大特性 CSS层叠性 css=层叠样式表所谓层叠性是指多种CSS样式的叠加. 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个 ...

前端与移动开发-----CSS（三大特性+盒子模型原理）

CSS

三大特性（层叠性、继承性、优先级）

盒子模型原理

综合案例 - 产品模块布局

前端与移动开发-----CSS（三大特性+盒子模型原理）相关推荐

最新文章

热门文章

前端与移动开发-----CSS（三大特性+盒子模型原理）

CSS

三大特性（层叠性、继承性、优先级 ）

盒子模型原理

综合案例 - 产品模块布局

前端与移动开发-----CSS（三大特性+盒子模型原理）相关推荐

最新文章

热门文章

三大特性（层叠性、继承性、优先级）