1.css的三大特性
层叠性、继承性、优先性
层叠性：
1.什么是样式冲突？
当同一个标签被多次设置同一样式的时候会发生样式冲突
2、什么是样式的层叠性？
当样式冲突的时候，只会有一个起作用，即样式的层叠，就近原则
<style>
div {
color: pink;
font-size: 20px;
/* 这个属性不会被覆盖掉 */
}
div {
color: green;
}
</style>
继承性：
1、什么是样式的继承？
给父标签设置的样式，在子标签中也起作用
2、什么样式会有继承作用？
text- font- line- color
<div>
<p>继承性，p继承div</p>
</div>
行高的继承：
给父标签设置的行高，子标签的文本也会有该标签
优先级：
当样式冲突的时候，选择器的权重大则该选择器下面的样式起作用
!important：无穷大
标签行内样式：1,0,0,0
id选择器：0,1,0,0
类选择器：0,0,1,0
标签选择器：0,0,0,1
通配符或继承：0,0,0,0
css权重的叠加：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>权重的叠加</title>
<style>
/* 权重虽然会叠加，但不会进位 */
li {
color: pink;
}
/* 复合选择器会有权重叠加的问题 ul + li */
ul li {
color: green;
}
.nav li {
color: pink;
}
</style>
</head>
<body>
<ul class="nav">
<li>福鼎揉面</li>
<li>沙茶面</li>
<li>泡鸭爪</li>
</ul>
</body>
</html>
2.盒子模型
1、盒子模型从外到内的顺序是什么？
从外到内：外边距、边框、内边距、内容
2、盒子的大小包括哪些？
边框、内边距、内容
border : border-width || border-style || border-color
3.边框简写： border: 1px solid red;
边框分开写法：border-top: 1px solid red
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型边框</title>
<style>
div {
width: 200px;
height: 200px;
/* 边框的粗细 */
/* border-width: 5px; */
/* 边框实现solid 边框虚线dashed */
/* border-style: solid; */
/* border-style: dashed; */
/* 边框点线 */
/* border-style: dotted; */
/* border-color: pink */
/* 边框的复合写法; */
/* border: 5px solid pink; */
/* border-top: 1px solid red;
border-bottom: 1px solid blue;
border-left: 1px solid blue;
border-right: 1px solid blue; */
border: 1px solid blue;
/* 利用层叠性 层叠了上边框 */
border-top: 1px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
4.边框会影响盒子的实际大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边框影响盒子实际大小</title>
<style>
/* 200*200的盒子，但是这个盒子有10像素的红色边框 */
div {
width: 180px;
height: 180px;
background-color: pink;
border: 10px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
5.内边距：
padding: 上 右 下 左
内边距会影响盒子的实际大小
1、内边距的作用？
内边距可以拉开标签的内容和标签边缘的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内边距</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/* padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px; */
/* 上下左右内边距都是5px */
/* padding: 5px; */
/* 上下边距都是10px 左右都是20px */
/* padding: 10px 20px; */
/* 上边距是5px 左右边距10px 下边距20px */
/* padding: 5px 10px 20px; */
/* 上 右 下 左 顺时针 */
padding: 5px 10px 10px 20px;
}
</style>
</head>
<body>
<div>
盒子内容content盒子内容 盒子内容content盒子内容 盒子内容content盒子内容 盒子内容content盒子内容 盒子内容content盒子内容 盒子内容content盒子内容
</div>
</body>
</html>
3.padding应用-新浪导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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;
text-decoration: none;
color: #4c4c4c;
font-size: 12px;
padding: 0px 20px;
}
.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>
<a href="#">我博客</a>
<a href="#">邮箱</a>
<a href="#">博客</a>
</div>
</body>
</html>
如图：
要注意
1.转换元素类型，将元素a进行转换为行内块元素，能设置行高并且能在一行显示！display: inline-block;
2.设置边框时记得设置边框的类型，如实线solid，否则不会显示出来！
4.盒子模型外边距margin
margin 属性用于设置外边距，即控制盒子和盒子之间的距离。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型之外边距margin</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.one {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="one">1</div>
<div>2</div>
</body>
</html>
简写方式和padding完全一样
外边距典型应用：
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
auto自动
1、如何让一个块级标签在其父标签中水平居中？
如果一个块级标签没有设置宽度，那么默认的宽度和父标签保持一致，无居中的概念
如果一个块级标签有设置宽度，可以通过设置左右外边距为auto来让当前标签在父标签中水平居中
给行内元素和行内块元素的父标签设置text-align : center ;
2.外边距合并-相邻块元素垂直外边距
解决方案：尽量只给一个盒子添加 margin 值。
如：A :margin-top :200px; B:margin-bottom :200px;
若AB垂直分布，则他们的上下边只会为200px;
3.外边距合并-嵌套元素塌陷
解决方案：
1.为父元素定义上边框
2.为父元素定义上内边距
3.为父元素添加overflow:hiddent
4.清除内外边距
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
为什么要清除内外边距？
因为部分标签默认在浏览器中有内外边距，不利于布局，所以需要清除所有标签的内外边距
5.PS的基本操作
Ctrl+R：可以打开标尺
Ctrl+ 加号(+)可以放大视图， Ctrl+ 减号(-)可以缩小视图
按住空格键，鼠标可以变成小手，拖动 PS 视图
Ctrl+ D 可以取消选区，或者在旁边空白处点击一下也可以取消选区
6.综合案例
案例：产品模块
分析过程：
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>综合案例-产品模块</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #f5f5f5;
}
.box {
width: 298px;
height: 416px;
background-color: #fff;
/* 让块级元素（盒子）水平居中 */
margin: 100px auto;
}
.box img {
width: 100%;
/* 图片的宽度和父亲一样宽 */
}
.review {
height: 70px;
font-size: 14px;
/* 因为没有指定width所以padding不会撑开盒子的宽度 */
padding: 0px 28px;
margin-top: 20px;
}
.apprise {
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;
text-decoration: none;
font-weight: 400;
}
.info span {
color: #ff6700;
}
.info em {
font-style: normal;
color: #ebe4e0;
margin: 0 6px 0 15px;
}
.info h4 a {
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<div class="box">
<img src="images/img.jpg" alt="">
<p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p>
<div class="apprise">来自于 117384232 的评价</div>
<div class="info">
<h4><a href="#">Redmi AirDots真无线蓝... </a></h4>
<em>|</em>
<span> 99.9元</span>
</div>
</div>
</body>
</html>
复习：
css的三大特性：层叠性、继承性、优先级
盒子模型的组成部分：外边距、边框、内边距、内容
把有宽度的块级标签水平居中：margin:0 auto
padding：10px 20px 30px; 四边的内边距分别是：
上边距10px 、右边距20px 、下边距30px 、左边距20px 、
1078
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
