1 前情回顾
关于选择器进阶、背景色、元素显示模式和css特性的前半部分集中在下面的笔记中：
css进阶知识点速览
2 CSS特性
2.1 优先级
特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式：
继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
注意点：
1 !important写在属性值后面，分号前面
2 !important不能提升继承的优先级，继承的优先级最低
3 实际开放中不建议使用!important
2.2 权重叠加计算
场景：如果是符合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器
权重叠加计算公式：
复合选择器中：
从左到右分别是第一级，第二级，第三级，第四级
(行内样式个数，id选择器个数，类选择器个数，标签选择器个数)
分别比较数量，先比较第一级数量再比之后的，第一集数量能比出结果，后面不需要再比。
这些选择器的关系是相对于要装饰内容而言的。
/*(0,1,0,1)*/
/*#one id选择器*/
div #one{
color: orange;
}
/*(0,1,2,0)*/
.father .son{
color: skyblue;
}
/*(0,0,1,1)*/
.father p{
color: purple
}
/*(0,0,0,2)*/
div p{
color: pink
}
div div{
color: skyblue;
}
div{
color: red;
}
<div>
<div>
<div>
文本
</div>
</div>
</div>
上面两个css选中文本，但并不是继承。最终因为div div{color: skyblue;}标签选择器数目多，因此文本为skyblue色。
2.3 谷歌浏览器调试
对出错部分右键-检查-查看
.father .son .sun {
color: skyblue;
}
/*多个类选择器中间以空格隔开也表示交集选择器*/
3 PxCook
3.1下载与安装
官网下载链接
下载后一直下一步就可完成安装。
3.2 基本使用
1将图片拖入后双击
2对于png图使用设计模式，对于psd的分层图用开发模式
3设计模式主要工具
最上面的是尺子，用来量长度；最下面的是吸管，用来获取颜色。
抓手工具，如果图片放的过大，需要移动到某一区域，就用抓手。
4开发模式
点击选中可知一切信息
4盒子模型
4.1 盒子模型的介绍
1盒子的概念
（1）页面中的每一个标签，都可以看做是一个“盒子”，通过盒子的视角更方便地进行布局；
（2）浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子
2盒子模型
css中规定每个盒子分别由：内容区域、内边距区域、边框区域、外边距区域构成，这就是盒子模型。
最简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 300px;
height: 300px;
background-color: pink;
/*边框线*/
border: 1px solid black;
/*内边距，出现在内容和盒子之间*/
padding: 20px;
/*外边距，两个盒子之间*/
margin: 50px;
}
</style>
</head>
<body>
<div>content</div>
<div>content2</div>
</body>
</html>
在浏览器里点击检查/F12，可以查看到下图，方便调试。
4.2 内容区域
作用：利用width和height属性默认设置是盒子内容区域的大小
属性：width/height
常见取值：数字+px
4.3 边框
属性名：border
复合属性，取值之间用空格隔开
boder: 10px solid red;
10px是指粗细；red是指线条的颜色，solid是指线条的种类（直线虚线等），这些参数没有顺序之分。
solid:实线线段；
dashed:虚线线段；
dotted:点线。
单方向设置：
场景：只给盒子的某个方向单独设置边框
属性名：border-方位名词，比如border-left
属性值：连写的取值
单个属性
作用：给设置边框粗细、边框样式、边框颜色效果
单个属性：
| 作用 | 属性值 |
|---|---|
| 边框粗细border-width | 数字+px |
| 边框样式border-style | 实线solid、虚线dashed、点线dotted |
| 边框颜色border-color | 颜色取值 |
4.4 盒子实际大小初级计算公式
只考虑内容和边框线
需求：盒子尺寸400400，背景绿色，边框10px，实线，黑色
盒子尺寸：width/height + 边框线粗细2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
height: 40px;
border-top: 3px #ff8500 solid;
border-bottom: 1px #edeef0 solid;
}
.box a{
width: 80px;
height: 40px;
display: inline-block;
text-align: center;
line-height: 40px;
font-size: 12px;
color: #4c4c4c;
text-decoration: none;
}
.box a:hover{
background-color: #edeef0;
color: #ff8500;
}
</style>
</head>
<body>
<div class="box">
<a href="">新浪导航</a>
<a href="">新浪导航</a>
<a href="">新浪导航</a>
<a href="">新浪导航</a>
</div>
</body>
</html>
4.5内边距padding
padding 50px;
上面代码添加了4个方向的内边距。
padding 10px 80px;
两值的话：第一个表上下，第二个表左右。
4.6 盒子实际大小的终极计算公式
盒子尺寸：width/height + 边框线粗细2+内边距2
给盒子设置border或padding，盒子会被撑大，如果不想盒子被撑大，该怎么处理？
操作：给盒子设置属性box-sizing:border-box;
优点：浏览器会自动计算多余大小，自动在内容中减去
4.7 外边距
margin: 50px;
4.7.1 清除默认内外边距
比如p、h系列、ul标签都要默认内外边距
*{
margin:0;
padding: 0;
}
4.7.2 版心居中
想让盒子居于网页中间
margin: 0 auto;
4.7.3 外边距折叠现象
合并现象
场景：垂直布局的块级元素，上下的margin会合并
结果：最终两者距离为margin的最大值
解决方法：只给其中一个盒子设置margin即可
塌陷现象
场景：相互嵌套的块级元素，子元素的margin-top会作用在父元素上
结果：导致父元素一起向下移动
解决办法：
1不在子元素用margin，只给父元素设置border-top或者padding-top
2子元素设置margin，再给父元素设置overflow: hidden
3转成行内块元素：子元素里：display: inline-block;
4设置浮动
5 浮动
5.1 结构伪类选择器
目标：能够使用结构伪类选择器在HTML中定位元素
1作用与优势：
(1)作用：根据元素在html中的结构关系查找元素
(2)优势：减少对html中类的依赖，有利于保持代码整洁
(3)场景：常用于查找某父级选择器中的子集
2选择器
| 选择器 | 说明 |
|---|---|
| E:first-child{} | 匹配父元素中第一个子元素，并且是E元素 |
| E:last-child{} | 匹配父元素中最后一个子元素，并且是E元素 |
| E:nth-child(n){} | 匹配父元素中第n个子元素，并且是E元素 |
| E:nth-last-child(n){} | 匹配父元素中最后n个子元素，并且是E元素 |
案例1：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li:first-child{
background-color: aquamarine;
}
</style>
</head>
<body>
<ul>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</body>
结构伪类选择器中n的注意点：
1n为0,1,2,3,4,5,6,…
2通过n可以组成常见公式
| 功能 | 公式 |
|---|---|
| 偶数 | 2n, even |
| 奇数 | 2n+1,2n-1,odd |
| 找到前5个 | -n+5 |
| 找到从第5个往后 | n+5 |
5.2伪元素
伪元素：一般页面中的非主体内容可以使用伪元素
区别：
(1)元素：html设置的标签
(2)伪元素：由css模拟出的标签效果
种类
| 伪元素 | 作用 |
|---|---|
| ::before | 在父元素内容的最前添加一个伪元素 |
| ::after | 在父元素内容的最后添加一个伪元素 |
注意点：
(1)必须设置content属性才能生效
(2)伪元素默认是行内元素
<style>
.father{
width: 200px;
height: 200px;
background-color: aquamarine;
}
.father::before{
content: 'note';
}
.father::after{
content: 'world';
}
</style>
</head>
<body>
<div class="father">hello</div>
</body>
5.3标准流
标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以合资方式排列元素。
常见的标准流排版规则：
1块级元素：从上到下，垂直布局，独占一行
2行内元素或行内块元素：从左到右，水平布局，空间不够自动拆行
5.4 浮动
注意：浏览器解析行内块或者是行内标签的时候，如果标签换行书写会产生一个空格的距离
5.4.1浮动的作用
早期的作用：图文环绕
img{float:left;}
现在的作用：网页布局
让块在一行无间隙排列
.one{
background-color: pink;
float: left;
}
.two{
background-color: green;
float: left;
}
两个块靠左紧贴一起。
5.4.2特点
1浮点元素会脱离标准流，在标准流中不占位置
相当于从地面飘到了空中
2浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
4浮动元素有特殊的显示效果“
一行可以显示多个
可以设置宽高
类似下图的设计需要注意：橙色和蓝色居中且位于一行，我们知道浮动元素的不能利用margin居中的，因此橙色和蓝色盒子外必然还有第三个盒子，该盒子的标签相对于橙色和蓝色的标签是父关系，它被设置了居中。
5.4.3css书写顺序
1浮动/display
2盒子模型：margin border padding
3文字样式
案例2：
目标样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 1226px;
height: 614px;
margin: 0 auto;
}
.father .son1{
float: left;
width: 234px;
height: 614px;
background-color: #800080;
}
.father .son2{
float: left;
width: 978px;
height: 614px;
background-color: green;
margin-left: 14px;
}
.father .son2 .grandson{
float: left;
margin-bottom: 14px;
margin-right: 14px;
width: 234px;
height: 300px;
background-color: #87ceeb
}
.father .son2 .grandson.grandson:nth-child(4n){
margin-right: 0;
}
.father .son2 .grandson.grandson:nth-child(n+5){
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="father">
<div class="son1"></div>
<div class="son2">
<div class="grandson"></div>
<div class="grandson"></div>
<div class="grandson"></div>
<div class="grandson"></div>
<div class="grandson"></div>
<div class="grandson"></div>
<div class="grandson"></div>
<div class="grandson"></div>
</div>
</div>
</body>
</html>
案例3：
目标样式：
技巧:网页导航的设计时，请用li标签嵌套a标签。
然而用li标签的话容易出现下面的效果：
对此，我们可以通过list-style: none;消除。
全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.nav{
margin: 0 auto;
width: 640px;
height: 50px;
background-color: #ffc0cb;
}
.nav ul{
list-style: none;
}
.nav .navson{
float: left;
}
.nav .navson a{
display: inline-block;
width: 80px;
height: 50px;
color: white;
font-size: 16px;
line-height: 50px;
text-align: center;
text-decoration: none;
}
.nav .navson:hover{
background-color: #008000;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li class="navson"><a href="#">新闻</a></li>
<li class="navson"><a href="#">新闻</a></li>
<li class="navson"><a href="#">新闻</a></li>
<li class="navson"><a href="#">新闻</a></li>
<li class="navson"><a href="#">新闻</a></li>
<li class="navson"><a href="#">新闻</a></li>
<li class="navson"><a href="#">新闻</a></li>
<li class="navson"><a href="#">新闻</a></li>
</ul>
</div>
</body>
</html>
5.5清除浮动
含义：清除浮动带来的影响
影响：如果子元素浮动了，此时子元素不能撑开标准流的块级元素
原因：
子元素浮动后脱标——>不占位置
目的：
需要父元素有高度，从而不影响其他网页元素的布局
比如：
父子级标签，子级浮动，父级没有高度，后面的标准呢盒子会受影响
常见于父级是纯文字，高度不定，不好设置
扫一扫
2456
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
