CSS的三大特性
css有三个非常重要的特性：层叠性、继承性、优先级
- 层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式，层叠性主要解决样式冲突的问题
层叠性原则：- 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
例如：
- 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
<style>
div {
color:red;
}
div {
color:pink;
}
</style>
结构中的div中的文字就会呈现粉色，红色被覆盖
- 样式不冲突，不会层叠
例如：
<style>
div {
color:red;
font-size: 16px;
}
div {
color:pink;
}
</style>
加了一行代码，样式就不冲突了
2. 继承性
css中的继承：子标签会继承父标签的某些样式，如文本颜色和字号，简单的理解就是：子承父业
- 恰当的使用继承可以简化代码，降低css样式的复杂性
- 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
例如：
<style>
div {
color:pink;
}
</style>
</head>
<body>
<div>长江后浪推前浪
<p>龙生龙，凤生凤</p>
</div>
- 行高的继承
<style>
body {
font:12px/1.5 "microsoft yahei";
}
div {
font-size: 14px;
}
p {
font-size: 16px;
}
</style>
</head>
<body>
<div>粉红色的回忆</div>
<p>粉红色的回忆</p>
<ul>
<li>我没有指定文字大小</li>
</ul>
</body>
1. 行高可以跟单位也可以不跟单位
2. 如果子元素没有设置行高，则会继承父元素的行高为1.5
3. 此时子元素的行高是：当前子元素的文字大小*1.5
4. body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高
- 优先级
当同一个元素指定多个选择器，就会有优先级的产生- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行
选择器的权重如下
例如：
<style>
div {
color: pink;
}
.test {
color: red;
}
#demo {
color: green;
}
</style>
</head>
<body>
<div class="test" id="demo" style="color: purple;">
你笑起来真好看
</div>
</body>
颜色变化为从上到下，每增加一种选择器（权重更高）颜色就改变
但如果在选择器样式后加！importent就优先执行这一句
注意：
1. 权重是有4组数字组成，但是不会有进位
2. 可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推
3. 等级判断从左到右，如果某一位数值相同，则判断下一位数据
4. 可以简单记忆法：通配符和继承权重为0，标签选择器为1，类（伪类）选择器为10，id选择器100，行内样式表为1000，！important无穷大。
5. 继承为0，即使父亲很厉害，但是孩子继承过来的权重是0，孩子被任何选择器直接选中，都优先执行选中的选择器的样式
- 权重叠加
<style>
/*复合选择器会有权重叠加的问题*/
/*权重虽然会叠加,但永远不会有进位*/
/*ul li 权重 0,0,0,1 + 0,0,0,1 = 0,0,0,2*/
ul li {
color: green;
}
/*li 的权重是 0,0,0,1*/
li {
color: red;
}
/*.nav li 权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1*/
.nav li {
color: pink;
}
</style>
</head>
<body>
<ul class="nav">
<li>大猪蹄子</li>
<li>大肘子</li>
<li>猪尾巴</li>
</ul>
</body>
注意：权重会叠加，但不会有进位
盒子模型
页面布局要学习三大核心：盒子模型，浮动和定位
网页布局的本质
网页布局过程：
- 先准备好相关的网页元素，网页元素基本都是盒子Box
- 利用css设置好盒子样式，然后摆放到相应位置
- 往盒子里面装内容
网页布局的核心本质：就是利用css摆盒子
盒子模型组成
盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框，外边距，内边距和实际内容
- border 边框
边框有三部分组成：边框宽度（粗细）边框样式 边框颜色
语法：
border ： border-width || border-style || border-color
样式练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
div {
width: 300px;
height: 200px;
/*border-width 边框的粗细 一般情况下都用px*/
/*border-width:5px;*/
/*border-style 边框的样式 ：solid 实线边框; dashed 虚线边框; dotted 点线边框*/
/*border-style: solid;*/
/*border-style: dashed;*/
/*border-style: dotted;*/
/*border-color 边框的颜色*/
/*border-color: pink;*/
/*边框的复合写法 简写 没有顺序，一般默认下边的顺序*/
/*border: 1px solid red;*/
/*边框分开写*/
/*border-top: 5px solid red;
border-bottom: 5px dashed pink;*/
/*只上边框修改为红色,其他三边为蓝色*/
/*注意以下代码不可以更换顺序*/
border:1px solid blue;
border-top:1px solid red ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- 表格的细线边框
border-collapse属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框
border-collapse：collapse； //表示相邻边框合并在一起
collapse是合并的意思
- 注意点：边框会影响盒子的实际大小
两种解决方法：1.测量盒子大小的时候，不量边框；2.如果测量的时候包含了边框，则需要width/height 减去边框宽度
- content 内容
盒子的内容，默认文字与盒子的边在一起，与盒子的边框的距离由padding决定 - padding 内边距
padding-left/top/bottom/right
**注意：**给盒子指定padding值之后，1.内容和边框有了距离，添加了内边距；2.padding影响了盒子实际大小，会撑大盒子
解决方案：让盒子保持和原来一样大，需要width/height 减去多出来的内边距大小
新浪导航栏案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新浪导航</title>
<style>
.nav {
height: 41px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
background-color: #fcfcfc;
line-height: 41px;
}
.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>
</div>
</body>
</html>
结果显示：
特殊情况：padding不会撑开盒子如果盒子本身没有指定width/height属性，此时padding不会撑开盒子大小；
4. margin 外边距
margin属性用于设置外边距，即控制盒子和盒子之间的距离
margin-left/right/top/bottom 左/右/上/下边距
margin简写方式和padding表示的意义是一样的
- 外边距典型应用
外边距可以让块级盒子水平居中，但必须满足两个条件：- 盒子必须指定了宽度（width）
- 盒子左右的外边距都设置为auto
.header{ width: 960px; margin: 0 auto;}
常见的写法，以下三种都可以：
1. margin-left: auto; margin-right: auto;
2. margin:auto;
3. margin:0 auto;(见到最多的，表示上下为0，左右auto)
**注意:**以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center 即可
- 外边距合并
- 相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上边的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，取两个值中的较大者。这种现象被称为相邻块元素垂直外边距的合并。
解决方案：尽量只给一个盒子添加margin值 - 嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值
解决方案：
1. 为父元素定义上边框（例如：在父盒子中添加 border:1px solid transparent(透明的)）
2. 可以为父元素定义上内边距（padding:1px）
3. 可以为父元素添加 ovreflow:hidden
还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷的问题。 - 清除内外边距
网页元素很多带有默认的内外边距，而且不同的浏览器默认的也不一致，因此我们在布局前，首先要清除网页元素的内外边距
- 相邻块元素垂直外边距的合并
* {
margin: 0; /*清除内边距*/
padding: 0; /*清除外边距*/
}
PS基本操作
综合案例-产品模块
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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%;
}
.pname {
height: 50px;
font-size: 14px;
/*盒子没有width属性，不会撑开盒子*/
padding: 0 28px;
/*margin-top: 30px;*/
}
.describe {
font-size: 12px;
color: #b0b0b0;
/*margin-top: 20px;*/
padding: 0 28px;
}
.info {
text-align: center;
font-size: 14px;
margin-top: 10px;
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">
<a href="#"><img src="img/小米10 至尊版.webp" alt="" /></a>
<p class="pname"> <a href="#">快递牛，整体不错，蓝牙可以秒链接，小米给力</a></p>
<div class="describe">来自 117236 的评价</div>
<div class="info">
<h4> <a href="#">小米10 至尊版...</a></h4>
<em>|</em>
<span>5299元</span>
</div>
</div>
</body>
</html>
以上只完成了一个模块的制作
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
