CSS进阶知识点速览2

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>