能够认识不同选择器的优先级公式，能够进行CSS权重叠加计算，分析并解决CSS冲突问题，能够认识盒子模型的组成部分，能够掌握盒子模型的组成部分，能够掌握盒子模型的边框、内边距、外边距的作用及简写形式，能够计算盒子的实际大小，能够了解外边距折叠现象，并知道如何解决盒子塌陷问题
一、CSS三大特性
1.1继承性
1.2层叠性
1.3优先级
特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式
优先级公式：继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < ！important
注意点：!important写在属性值的后面，分号的前面，但是不能提升继承的优先级，主要是继承优先级最低，实际开发中不建议使用!important。
<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>
#box {
color: orange;
}
.box {
color: blue;
}
div {
color: green ;
}
/* !important不要给继承的添加, 自己有样式无法继承父级样式 */
body {
color: red !important; /* 此处为继承，所以无效 */
}
</style>
</head>
<body>
<div class="box" id="box" style="color: pink;">测试优先级</div>
</body>
</html>如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效，注意！important如果不是继承，则权重最高，天下第一。
<style>
/* 复合选择器中比较每一级的数量(行内, 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>权重计算步骤：先判断选择器是否能直接选中标签，如果不能直接选中，那么就是继承，优先级最低，直接pass掉，其次再通过权重计算公式，判断谁的权重最高
注意点：在实际开发中选择器标签需要精准，尽量避免多个选择器同时选中一个标签的情况，不要自己难为自己。
查错流程（遇到样式不出来，要学会通过调试工具找错）
二、PxCook的基本使用
2.1通过软件打开设计图
打开软件——拖拽入设计图——新建项目
2.2常用快捷键
放大设计图ctrl++、缩小设计图ctrl+-、移动设计图：空格按住不放，鼠标进行拖动
2.3常用工具
量尺寸、吸颜色
2.4模式切换
从psd文件中直接获取数据，切换到开发模式，直接点击获取数据，png、jpg等格式为设计模式
三、盒子模型
3.1盒子模型的介绍
页面中的每一个标签，都可以看作一个”盒子“，浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，通过盒子的视角更方便进行布局
CSS中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型
<style>
/* 纸箱子, 填充泡沫 */
div {
width: 300px;
height: 300px;
background-color: pink;
/* 边框线 == 纸箱子 */
border: 1px solid #000;
/* 内边距 == 填充泡沫 : 出现在内容和盒子边缘之间 */
padding: 20px;
/* 外边距 : 出现在两个盒子之间, 出现在盒子的外面*/
margin: 10px;
}
</style>在elements下的computed中显示的盒子模型布局
盒子实际大小计算公式：（设置border、padding会撑大盒子）
3.2内容区域的宽度和高度
使用width和height属性默认设置盒子内容区域大小
属性：width和heigth
常见取值：数字+px
3.3边框（border）
单属性写法（设置边框粗细、边框样式、边框颜色效果）
边框粗细border-width：数字+px、边框样式border-style：实线solid虚线dashed点线dotted、边框颜色border-color：颜色取值
连写形式（推荐使用该方法）
单个取值的连写，取值之间以空格隔开，如border：10px solid red；
快捷键写法：bd+tap
单方向设置：只给盒子的某个方向单独设置边框，属性名：border-方位名词，属性值；连写的取值。
div {
width: 200px;
height: 200px;
background-color: pink;
/* border: 粗细 线条样式 颜色 -- 不分先后顺序 */
/* solid : 实线 */
border: 1px solid #000;
/* dashed: 虚线 */
border: 5px dashed #000;
/* dotted : 点线 */
border: 5px dotted #000;
/* 单方向设置 */
border-left: 5px dotted rgb(78, 75, 170);
border-right: 5px dotted rgb(181, 32, 97);
border-top: 1px solid rgb(189, 221, 85);
border-bottom: 1px solid red;
}3.4内边距（padding）
作用：设置边框与内容区域之间的距离
属性名：padding
规则：从上到下赋值，然后顺时针赋值，如果没设置赋值的，看对面，具体写法如下：
/* padding 属性可以当做复合属性使用, 表示单独设置某个方向的内边距 */
padding: 10px 20px 40px 80px; /* 四值: 上 右 下 左 */
padding: 10px 40px 80px; /* 三值 : 上 左右 下*/
padding: 10px 80px; /* 两值 : 上下 左右*/
padding: 50px;/* 一值：添加了4个方向的内边距 */
padding-left: 10px; /* 单方向设置内边距*/
/* 总原则：多值写法, 永远都是从上开始顺时针转一圈, 如果数不够, 看对面 */3.5外边距（margin）
作用：设置边框以外，盒子与盒子之间的距离
属性名：margin
规则：从上开始赋值，然后顺时针赋值，如果没赋值的，看对面。
margin: 50px;
margin: 20px 30px;
margin: 10px 20px 20px;
margin-left: 100px;margin单方向设置的应用；可以使盒子往相反方向移动 ，例如：
margin-left 可以使盒子在水平方向向右移动
外边距正常情况：水平布局的盒子，左右的margin正常，互不影响，最终两者距离为左右margin的和。
外边距折叠现象-合并现象：垂直布局的块级元素，上下的margin会合并，最终两者距离为margin的最大值，解决的方法是只给其中一个盒子设置margin即可（尽量避免）。
外边距折叠现象-塌陷现象：互相嵌套的块级元素，子元素的margin-top会作用在父元素上，导致父元素一起向下移动。
<style>
.father {
width: 300px;
height: 300px;
background-color: pink;
/* padding-top: 50px; */
/* 如果设计稿没有border, 不能使用这个解决办法 */
/* border: 1px solid #000; */
/* overflow: hidden; 建议使用该方法*/
}
.son {
width: 100px;
height: 100px;
background-color: skyblue;
margin-top: 50px;
display: inline-block;
}
</style>
<body>
<div class="father">
<div class="son">son</div>
</div>
</body>解决方法：1. 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top） 2. 给父元素设置overflow：hidden 3. 转换成行内块元素 4. 设置浮动
行内元素的margin和padding无效情况：给行内元素设置margin和padding时，水平方向的margin和padding布局无效，垂直方向的margin和padding布局无效
<style>
span {
/* margin: 100px; */
/* padding: 100px; */
line-height: 100px; /* 可以通过改变行高来调整垂直方向的距离 */
}
</style>
<body>
<!-- 行内元素 内外边距 margin padding -->
<!-- 如果想要通过margin或padding改变行内标签的垂直位置, 无法生效 -->
<!-- 行内标签的margin-top和bottom 不生效 -->
<!-- 行内标签的padding-top或botttom 不生效 -->
<span>span</span>
<span>span</span>
</body>3.6清除盒子默认的内外边距
场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的margin和padding，后续自己设置，例如：body标签默认有margin：8px、p标签默认上下有margin、ul标签默认由上下的margin和padding-left
解决方法：给有默认属性的标签清理内外边距（淘宝网代码）、给所有的标签清理内外边距（京东
代码）。建议使用京东代码的方式
*{
margin：0；
padding：0；
}
版心居中语句：margin 0 auto；
四、案例
4.1 案例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>
.box {
height: 40px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
}
/* 后代: box里面的a */
.box a {
padding: 0 16px; /*这样写可以随意调整每个导航内容的字数而不影响美观*/
/* width: 80px; */
height: 40px;
/* 推荐先加上: 清楚的看到文字在什么位置 */
/* background-color: #edeef0; */
display: inline-block;
text-align: center;
line-height: 40px;
font-size: 12px;
color: #4c4c4c;
text-decoration: none;
}
.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>
<p>
<a href="#"></a>
</p>
</body>
</html>4.2 案例2新闻列表
<!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: 0;
padding: 0;
/* 所有的标签都可能添加内边距或border, 都內减模式 */
box-sizing: border-box;
}
.news {
width: 500px;
height: 400px;
border: 1px solid #ccc;
margin: 50px auto;
padding: 42px 30px 0;
}
.news h2 {
border-bottom: 1px solid #ccc;
font-size: 30px;
/* 行高是1倍, 就是字号的大小 */
line-height: 1;
padding-bottom: 9px;
}
/* 去掉列表的符号 */
ul {
list-style: none;
}
/* li {} */
.news li {
height: 50px;
border-bottom: 1px dashed #ccc;
padding-left: 28px;
line-height: 50px;
}
.news a {
text-decoration: none;
color: #666;
font-size: 18px;
}
</style>
</head>
<body>
<!-- 从外到内 -->
<div class="news">
<h2>最新文章/New Articles</h2>
<ul>
<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
</ul>
</div>
</body>
</html>代码书写总结：
CSS书写顺序：浏览器执行效率更高
从外到内，从上到下：先宽高背景色，放内容，调节内容的位置；控制文字细节
1、浮动/display
2、盒子模型：margin border padding 宽度高度背景色
3、文字样式
1212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
