CSS的基本知识
1.CSS的作用:
作用：将标签的样式进行修改
2. CSS的引入方式
2.1内联样式
<div style="width:100px;height:100px;"> </div>
优点：优先级最高；
缺点： 代码冗余、代码混乱、维护困难；
使用场景：已经确定了的不会再有更改特定情况下才会使用。
2.2.内部样式
<head>
<style>
div{
width:100px;
height:100px;
}
</style>
</head>
优点：初步实现了结构与样式之间的分离、逻辑关系相对清楚、不会造成额外的服务器请求压力。
缺点：造成单个文件体积过大、造成前后端交互困难。
使用场景：大型网站的首页。
3.外部样式
link: 用于引入其他文件；
<link rel="stylesheet" type="text/css" href="css/html.css" >
属性：
- rel 引入文件和当前文件的关系stylesheet
- href 引入文件的路径（地址）
- type 引入文件的类型
优点：结构与样式之间的分离、易于维护、一个样式库可以应用于多个页面 缺点：会造成额外的服务器请求压力、可能会造成代码冲突、造成垃圾代码 使用场景：大型网站的二三级页面。
3. CSS的引入方式的优先级问题
优先级问题 ：
内联样式 > 外部样式
内联样式 > 内部样式
如果选择器优先级相同，则后加载的生效
如果选择器优先级不同，则按选择器优先级
4. CSS的选择器
4.1 常用选择器
1.继承 权重：0.00001 (最低)
//如
</style>
.father {
font-size: 14px;
}
</style>
<body>
<div class="fahter">
<p>我是p标签</p>
</div>
</body>
上面的案例我给class为father的元素设置了字体大小为14px,则其子元素的字体大小也为14px,这就是继承。（并不是所有的css属性都可以继承给子元素,具体的能继承的属性请移步)
2.通配符选择器 权重：0.1
*{ } 直接匹配所有的标签
//页面上所有的元素都有这个属性
*{
font-size: 14px;
}
注意：通配符在执行的时候，会直接匹配所有的标签，这样也就导致了 通配符选择器的性能极其低下 平时开发时禁止使用该内容 如果需要清除对应的标签的样式，需要引用 reset.css
3.标签名选择器 权数重： 1
div {
width: 100px;
}
4.类选择器 也称class选择器
权重：10
用法 ：
1.在标签内部设置一个 class 名称
2.在css样式中使用. + class名称 + { }设置样式
. +class 名称 + { }
//如
</style>
.father {
width: 100px;
height: 100px;
background: red;
}
</style>
<body>
<div class="fahter"></div>
</body>
生效范围： 针对所有class 名称相同的标签生效。
5.ID选择器 权重:100
用法：
1.设置 ID名称
2.在css样式中使用# + id名称 +{ }设置样式
# + id名称 +{ }
//如
</style>
#father {
width: 100px;
height: 100px;
background: red;
}
</style>
<body>
<div id="fahter"></div>
</body>
生效范围：同一个ID名称在一个页面中只能使用一次
6.内联选择器 权重：1000；
用法：
<div style="width: 100px"></div>
::: tip
上面介绍的选择器都有它们各自的权重,选择器直接也是可以叠加的
:::
7.后代选择器（也称包含选择器）
注意事项:
- 后代选择器可以嵌套多次
- 放在后面的内容一定要属于前面内容的'子级'(选择内部的孩子)
- 后代选择器时直接选择所有辈分 条件符合的孩子 不区分是 儿子 还是孙子
用法：
<style>
.father p {
color: red;
}
</style>
<body>
<div class="father">
<div>
<p>我是p标签</p>
</div>
<p>我是p标签</p>
</div>
</body>
上述案例中的class为father下的所有p标签的字都会变为红色
8.子代选择器 ： 只选择直系的后代 .class_1 > p { }
用法：
<style>
.father>p {
color: red;
}
</style>
<body>
<div class="father">
<div>
<p>我是p1</p>
</div>
<p>我是p2</p>
</div>
</body>
上述案例中,只有class为father的直系后代的p标签的字才会变为红色,也就是p2
9.相邻兄弟选择器 用法： 选择器1+选择器2{ }
注意：
- 俩个选择器必须是兄弟关系(也就是要有同一个父级)
- 俩个选择器必须是紧挨着的
- 选择的是相连接的后面的兄弟
<style>
.item2 + li {
font-weight:bold;
color: red;
}
</style>
<body>
<div>
<ul>
<li>List item 1</li>
<li class="item2">List item 2</li>
<li>List item 3</li><!--红色-->
<li>List item 4</li>
</ul>
<ol>
<li>List item 1</li>
<li class="item2">List item 2</li>
<li>List item 3</li><!--红色-->
<li>List item 4</li>
</ol>
</div>
</body>
上面这个选择器只会把列表中的class为item2的后面的item3变为红色。第一个列表项和item2本身不受影响。
10.同级元素通用选择器 用法：选择器1~选择器2{ }
注意：
- 俩个选择器之间需要有相同的父级
- 选择器2必须处于选择器1的后面
- 选择具有相同的父级，并且加载顺序处于后面的内容
<style>
.item2 ~ li {
font-weight:bold;
color: red;
}
</style>
<body>
<div>
<ul>
<li>List item 1</li>
<li class="item2">List item 2</li>
<li>List item 3</li><!--红色-->
<li>List item 4</li><!--红色-->
</ul>
<ol>
<li>List item 1</li>
<li class="item2">List item 2</li>
<li>List item 3</li><!--红色-->
<li>List item 4</li><!--红色-->
</ol>
</div>
</body>
上面这个选择器会把列表中的class为item2的后面的列表项变为红色。第一个列表项和item2本身不受影响。
可以看到选择器 +和~的区别就是+只针对一项元素,而~可能是多项的。
11.属性选择器
用法：
- [属性名称] + { }
- [属性名称 = 属性值] + { }
<style>
[blue] {
color: blue;
}
input[type="text"] {
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
</style>
<body>
<input type="text" />
<ul>
<li blue>List item 1</li><!--蓝色-->
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ul>
</body>
只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择
12.群组选择器 权重：不涉及
目的： 省略代码(通过将不同选择器中相同部分抽离，统一设置)
使用方式:
选择器1,选择器2, 选择器3... 选择器n{
某些相同的样式
}
.div1, .div2, .div3{
width:300px;
height:300px;
}
4.2 权重的计算
权重的计算规则：相加
目的: 为了选择属于某一个"内容之中"的某些元素
使用方式:
选择器1 + 空格 + 选择器2 + 选择器n {
需要设置的内容
}
5. CSS选择器的优先级
ID > class >标签名
描述越精确，优先级越⾼高
权位相加 权位越大 优先级越高
6. overflow属性
作用：规定超出范围的内容如何进行显示,不可继承
代码⌨️
div{
width:150px;
height:150px;
overflow:scroll;
}
属性值✍️
6.1 visible
超出部分不做处理,内容不会被修剪,会呈现在元素框之外（默认样式）
6.2 scroll
让超出部分以滚动条的方式来显示；
6.3 hidden
让超出部分隐藏
6.4 auto
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
6.5 inherit
规定应该从父元素继承 overflow 属性的值
overflow-x和overflow-y
overflow实际上包含的是x 轴和y轴俩个方向,也可以将俩个方向分别设置
div {
width: 200px;
height: 200px;
overflow-x: scroll;
}
overflow 在不同浏览器中呈现方式不一样，有兼容性问题
7. float属性
作用：设置元素浮动
7.1 属性值
- left 左浮动
- right 右浮动
- none 不浮动
7.2 浮动的特性
- 浮动会使元素脱离“文档流”；（和绝对定位一样）
文档流：我们页面布局排列的时候所在一个层级，所有基础内容的布局全部都是处于这一层级当中
- 浮动会使元素脱离文档流“半级”（压住属性压不住内容 和绝对定位的区别）
- 浮动会使没有设置宽度的元素，由内容来撑开宽度，宽度为父级元素的宽度；（和绝对定位一样）
- 浮动会使内联元素重新支持宽高；（和绝对定位一样）
- 浮动会使内联元素正常显示padding和margin；（和绝对定位一样）
- 浮动是针对它的下一个元素生效，对前一个对象无影响；
- 浮动的停止：1.浮动元素遇到父级的边界会停止；2.浮动元素碰到相同浮动方向的元素
- 可以设置clear属性来清除浮动
7.3 清除浮动
1.在浮动元素的下一个元素设置clear属性
clear: 属性
left 清除左浮动
right 清除右浮动
both 清除左右俩边的浮动
none 不清除浮动
2.清除浮动第二个方法：
在要清除浮动的标签加上:after{ } 原因是clear针对浮动元素的下一个元素 在父级后面加一个空的元素并清除他的浮动就可以解决父级塌陷的问题；
.father:after{
content:"";
display:block;
clear:both;
}
例：
<style>
.father{
width:1000px;
border:5px solid black;
}
.son_1{
width:200px;
height:200px;
float:left;
}
.son_2{
width:200px;
height:200px;
float:left;
}
.father:after{
content"";
display:block;
clear:both;
}
</style>
<body>
<div class="father">
<div class="son_1"></div>
<div class="son_1"></div>
</div>
</body>
3.其他清除浮动方法：
- 给父级float:left; 弊端： 会影响后面的元素 如：给父级height:500px; 子级高度改变父级也要改变
- 给父级overflow:hidden; 弊端：不同浏览器会有兼容性问题
- 给父级display:inline-block; 弊端：改变了父级原本的盒子类型
8. Zoom
修改页面加载时的倍率；
为了触发 IE 浏览器的 haslayout 特性；
9. ! important
!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权。
语法格式 { cssRule !important }，
即写在定义的最后面，例如：
.box{
color:red;!important;
}
<body>
<div class="box" style="color: blue;">I'm a box</div><!--最终显示的还是红色-->
</body>
在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级，也就是相当于写在最下面。
10. z-index
作用：设置内容在z轴上的数值,也就是设置元素的层级,这个数值不限制正负，但是负数会导致用户事件无法被传递（所有不要设定为负数）； z-index未设置时 默认为auto
.box{
z-index: 100;
}
position: fixed什么时候会失效？
我们知道，设置了position: fixed固定定位属性的元素会脱离文档流，达到“超然脱俗”的境界。 也就是说此时给这种元素设置top, left, right, bottom等属性是根据浏览器窗口定位的，与其上级元素的位置无关。
但是有一种情况例外：
若是设置了position: fixed属性的元素，它的上级元素设置了transform属性则会导致固定定位属性失效。 无论你的transform设置的是什么属性都会影响到position: fixed。
注意，这个特性表现，目前只在Chrome浏览器/FireFox浏览器下有，IE浏览器，包括IE11, fixed还是fixed的表现 😊。
看下面的案例1：
<style>
.father {
width: 300px;
height: 300px;
background: yellow;
transform: translate(100px);
/* transform: scale(0.5); */
/* transform: rotate(-45deg); */
}
.son {
width: 100px;
height: 100px;
background: red;
position: fixed;
top: 400px;
}
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
给父级加上了transform属性之后就会影响子级的固定定位了。如下图：
其实不仅仅是给父级加transform属性会失效，只要上级存在transform属性都会导致position: fixed失效。
案例2：
<style>
.content{
transform: translate(100px);
}
.father {
width: 300px;
height: 300px;
background: yellow;
}
.son {
width: 100px;
height: 100px;
background: red;
position: fixed;
top: 400px;
}
</style>
<body>
<div class="content">
<div class="father">
<div class="son"></div>
</div>
</div>
</body>
上面的案例也会影响position: fixed属性。
具体原理可以看一下张大大的这篇文章：www.zhangxinxu.com/wordpress/2…
nth伪类选择器
1 :nth-child(){ }
作用： 选择父元素的第几个子元素
<body>
<div>
<p></p>
<p></p>
<p></p>
</div>
</body>
用法1:所有子元素:
div:nth-child(n){
color: red;
}
用法2:所有奇数子元素:
div:nth-child(2n+1){
color: red;
}
用法3:所有偶数子元素 :
div:nth-child(2n){
color: red;
}
用法4:选择父元素的第几个子元素
div:nth-child(2){
color: red;
}
用法5:选择父元素标签内部第n个元素
第n个元素必须的是:前面的这个标签才能生效 如果匹配失败，则不生效
例：
<style>
ul p:nth-child(2) {
background: red;/*无效：想选择的是ul下的第二个p标签，但ul标签中没有p标签 所以不能生效;*/
}
ul li:nth-child(2) {/*有效：想选择的是ul下的第二个li标签，nth-child(2)前面也是li 所以能生效;*/
background: red;
}
</style>
<body>
<ul>
<li>我是li1</li>
<li>我是li2</li>
</ul>
</body>
用法6 :nth-child(n+m){}
表示从第m个值开始,取包裹m的之后的所有项
例：
:nth-child(n+2){} 表示选取除了第一项的所有项
:nth-child(-n+m){} 表示选取前m项(包裹m)
如：:nth-child(-n+2) 表示选取第一第二项;
2 :nth-last-child(){}
用法：与
:nth-child()用法相似，不过是从后往前
如：
选择父元素的倒数第二个子元素的 div 标签
div:nth-last-child(2){ }
3 :nth-of-type(){ }
作用：选择属于其父元素的 第几个标签元素
例：选择父元素的第二个p标签和第二个li标签
<style>
ul p:nth-of-type(2) {
background: red;
}
ul li:nth-of-type(2) {
background: red;
}
</style>
<body>
<ul>
<p>我是p1</p>
<p>我是p2</p><!--红色-->
<li>我是li1</li>
<li>我是li2</li><!--红色-->
</ul>
</body>
4 :nth-last-of-type(){ }
选择属于其父元素的倒数 第几个标签元素
BFC
什么是BFC
BFC全称 Block Formatting Context 即块级格式上下文，简单的说，BFC是页面上的一个隔离的独立容器，不受外界干扰或干扰外界
如何触发BFC
float不为 noneoverflow的值不为 visibleposition为 absolute 或 fixeddisplay的值为 inline-block 或 table-cell 或 table-caption 或 grid
BFC的渲染规则是什么
- BFC是页面上的一个隔离的独立容器，不受外界干扰或干扰外界
- 计算BFC的高度时，浮动子元素也参与计算（即内部有浮动元素时也不会发生高度塌陷）
- BFC的区域不会与float的元素区域重叠
- BFC内部的元素会在垂直方向上放置
- BFC内部两个相邻元素的margin会发生重叠
BFC的应用场景
- 清除浮动：BFC内部的浮动元素会参与高度计算，因此可用于清除浮动，防止高度塌陷
- 避免某元素被浮动元素覆盖：BFC的区域不会与浮动元素的区域重叠
- 阻止外边距重叠：属于同一个BFC的两个相邻Box的margin会发生折叠，不同BFC不会发生折叠
用CSS实现各种形状
如何画扇形？
.sector {
width: 0;
height: 0;
border: 100px solid red;
border-color: red transparent transparent transparent;
border-radius: 50%;
}
/*或者*/
.sector {
width: 100px;
height: 100px;
border: 100px solid transparent;
border-top-color: red;
box-sizing: border-box; /* 这步很重要 */
border-radius: 50%;
}
HTML代码：
<div class="sector"></div>
如何画三角形？
.triangle {
width: 0;
height: 0;
border: 100px solid red;
border-color: red transparent transparent transparent;
}
/*或者*/
.triangle {
width: 100px;
height: 100px;
border: 100px solid transparent;
border-top-color: red;
box-sizing: border-box;
}
HTML代码：
<div class="triangle"></div>
圆？半圆？椭圆？
div {
width: 100px;
height: 100px;
background-color: red;
margin-top: 20px;
}
.box1 { /* 圆 */
/* border-radius: 50%; */
border-radius: 50px;
}
.box2 { /* 半圆 */
height: 50px;
border-radius: 50px 50px 0 0;
}
.box3 { /* 椭圆 */
height: 50px;
border-radius: 50px/25px; /* x轴/y轴 */
}
HTML代码：
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
