一、CSS的三大特性
1、层叠性
给相同的选择器设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。层叠性主要解决样式冲突的问题
原则：
- 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
- 样式不冲突，不会层叠
<style>
div {
color: red;
font-size: 12px;
}
div {
color: blue;
}
</style>
<div>test</div>
最后div里的字体大小为12px，颜色为blue
2、继承性
1.CSS的继承
子标签会继承父标签的某些样式，如文本颜色和字号。
- 恰当使用可以简化代码
- 子元素可以继承父元素的样式（text-，font-，line-，color）其他的不会
div {
color: red;
font-size: 12px;
}
<div>
<p>test</p>
</div>
p标签中的文字和颜色继承了div标签中的文字和颜色
2.继承行高
body {
font: 12px/1.5 microsoft yahei;
}
当前是字体1.5倍大小的行高
- 行高可以跟单位也可以不跟单位
- 如果元素没有设置行高，则会继承父元素的行高为1.5
- 此时子元素的行高是：当前子元素的文字大小*1.5
- 这种写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高
3、优先级
1.优先级
<style>
div {
color: pink!important;
}
.test {
color: red;
}
#demo {
color: green;
}
</style>
<div class="test" id="demo">test</div>
!important最高
注意：继承的权重是0，如果该元素没有被直接选中，不管父元素权重多高，子元素得到的权重都是0。
a链接游览器默认制定了一个样式，蓝色下划线 a {color: blue}
2.复合选择器权重叠加
复合选择器会有权重叠加的问题
例如：
/* li 的权重是0,0,0,1 1 */
li {
color: red;
}
/* ul li 权重是0,0,0,1 + 0,0,0,1 = 0,0,0,2 2 */
ul li {
color: green;
}
/* .nav li 权重是0,0,1,0 + 0,0,0,1 = 0,0,1,1 11 */
.nav li {
color: pink;
}
<ul class="nav">
<li>test</li>
</ul>
效果为pink色
注意：权重虽然会叠加，但永远不会有进位
二、CSS的盒子模型
1、网页布局过程
1.先准备好网页元素，网页元素基本都是盒子Box
2.利用CSS设置好盒子样式，然后摆放到相应位置
3.往盒子里面装内容
2、盒子模型组成
盒子模型：就是把HTML页面中的布局元素看作是一个矩阵的盒子，也就是一个盛装内容的容器。
- border边框
- content内容
- padding内边距
- margin外边框
3、border边框
border-width 定义粗细，单位是px
border-style 边框的样式
border-color 边框颜色
style：solid是实线边框，dashed虚线边框，dotted点线边框。
可以复合写，
border：1px，solid，red；
没有先后顺序
border-top：1px，solid，red；
只设定上边框，其余同理
border-collapse：collapse；
合并相邻的边框
注意：边框会影响到盒子的宽高，为盒子宽高+2*边框宽高
4、padding内边距
padding-left：20px；
左边内边距20像素
复合写法：
padding也会影响盒子的实际大小
同边框
padding不会撑开盒子大小情况：
盒子本身没有指定width/height属性
继承关系写了父亲宽度就不用写孩子容器的宽度了
5、margin外边距
margin属性用于设置外边距，即控制盒子和盒子之间的距离
margin-left，right，top，bottom
margin符合写法方式与padding一致
开发中常写margin：0 auto； //左右auto居中对齐
注意：外边距合并，当上下两个块元素相遇，如果上面又下外边距，下面有上外边距，垂直距离不是两者之和；而是取中间较大者。
嵌套块元素塌陷，父元素有上外边距同时子元素也有上外边距，会一起移动
解决方案：
- 为父元素定义上边框
- 为子元素定义内边距
- 为父元素添加overflow：hidden
6、清除内外边距
* {
padding: 0;
margin: 0;
}
三、样例1
<!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>
* {
padding: 0;
margin: 0;
}
body {
background-color: #f5f5f5;
}
.box {
width: 372px;
height: 519px;
background-color: #ffffff;
margin: 100px auto;
}
.box img {
width: 100%;
}
.box .review {
height: 114px;
margin-top: 45px;
padding: 0 35px;
}
.box .appraise {
padding: 0 35px;
font-size: 14px;
color: #b0b0b0;
}
.info {
margin-top: 22px;
padding: 0 35px;
font-size: 14px;
}
.name {
display: inline-block;
font-weight: 400;
}
em {
font-style: normal;
color: #ebe4e0;
margin: 0 14px 0 30px;
}
span {
color: #ff6700;
}
</style>
</head>
<body>
<div class="box">
<img src="images/img.jpg" alt="#">
<p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p>
<p class="appraise">来自于 117384232 的评价</p>
<div class="info">
<h4 class="name">Redmi AirDots真无线蓝... </h4>
<em>|</em>
<span>99.9元</span>
</div>
</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>
* {
padding: 0;
margin: 0;
}
body {
background-color: #f5f5f5;
text-align: center;
}
.box {
height: 300px;
width: 234px;
background-color: #ffffff;
margin: 100px auto;
overflow: hidden;
}
.box img {
width: 160px;
height: 160px;
margin: 0 auto;
margin-top: 20px;
}
.box h3 {
display: inline-block;
margin: 0, 10px, 2px;
font-weight: 400;
}
.box p {
font-size: 12px;
color: #b0b0b0;
margin-top: 10px;
}
.box .price {
font-size: 14px;
margin-top: 5px;
color:coral;
}
</style>
</head>
<body>
<div class="box">
<img src="images/xm.webp">
<h3>
Xiaomi Civi 1S
</h3>
<p class="preview">原生美肌人像</p>
<div class="price">2299元起</div>
</div>
</body>
</html>
为自制
第二天：一、复习案例
新知识：去掉li前面的项目符号（小圆点）
语法
list-style：none；
样例1
<!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>
* {
padding: 0;
margin: 0;
}
.box {
width: 248px;
height: 163px;
border: 1px solid #ccc;
margin: 200px auto;
}
li {
list-style: none;
height: 23px;
padding-left: 20px;
}
ul {
padding-top: 7px;
}
.box h3 {
height: 32px;
font-weight: 400;
border-bottom: 1px dotted #ccc;
font-size: 14px;
line-height: 32px;
padding-left: 15px;
}
.box ul li a {
text-decoration: none;
font-size: 12px;
color: #666;
}
ul li a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="box">
<h3>品优购快报</h3>
<ul>
<li><a href="#">【特惠】爆款耳机5折秒！</a></li>
<li><a href="#">【特惠】母亲节，健康好礼低至5折！</a></li>
<li><a href="#">【特惠】爆款耳机5折秒！</a></li>
<li><a href="#">【特惠】9.9元洗100张照片！</a></li>
<li><a href="#">【特惠】长虹智能空调立省1000</a></li>
</ul>
</div>
</body>
</html>
二、圆角边框
盒子可以变成圆角的，不是矩形的
语法
border-radius:length;
半径为length的圆摆在四个角
参数单位可以是px也可以是百分比
圆角矩形可以把length设定为高度的一半
可以写四个值，为从左上角开始的顺时针方向四个角
两个值为左上、右下一组，另外两个一组
可以指定
border-top-left-radius为左上
先上下再左右
三、盒子阴影
语法
box-shadow属性为盒子添加阴影
后有六个属性
color通常为rgba(0, 0, 0, .3)
outset不需要写！写了用不了，直接不写就行
鼠标进过可以用div：hover实现
四、文字阴影
语法
text-shadow：
同上
543
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
