css部分
/
css 部分
# 1. 清除浮动
为什么要清除浮动
例子：
清除浮动方法
- 额外标签法（在最后一个浮动标签后，新加一个 div，给其设置 clear：both；）（推荐使用）
- 父级添加 overflow 属性（父元素添加 overflow:hidden）（不推荐）
- 使用 after 伪元素清除浮动（推荐使用）（ie6-7 不支持伪元素）
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
<!--<div class="clear">额外标签法</div>-->
</div>
<div class="footer"></div>
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
//参考：https://blog.csdn.net/h_qingyi/article/details/81269667
# 2. 水平垂直居中
1.首先对于已知宽高的的情况就不说了，可以通过直接计算或者calc计算去做，就说未知宽高的情况
2. 单纯的水平居中
```js
margin: 0 auto;
text-align:center;
```
3. 水平垂直居中
```css
/* // 1：对于文本 */
line-height: 父元素高度
// 2：子div
position: relative; //在这里，relative和absolute都可以，但是因为relative是相对自身原本应该的定位，所以盒子内如果有其他的元素，会影响到
top: 50%; /*偏移*/
left:50%;
transform: translate(-50%);//向上平移自身高度的一半
/* // 3：父div */
display: table-cell;
vertical-align: middle;
text-align: center;
margin: 0 auto;
/* // 4：父盒子 */
display: flex;
justify-content: center;
align-items: center;
/* // 5：grid布局 */
display:grid;
align-self: center;
justify-self: center;
```
# 3. 盒模型
- 其他浏览器默认：content-box
- ie 默认是：border-box 指的是页面在渲染时，DOM 元素所采用的布局模型，一个元素占用的空间大小由几个部分组成，内容(content)、内边距(padding)，边框(border)和外边距(margin)。可以通过 box-sizing 来进行设置，其中 IE 盒模型的 content 包含了 padding 和 border，这是区别于 W3C 标准盒模型的地方。
<div class="box1 boxSizing"></div>
.box1 {
width: 500px;
height: 500px;
background: black;
padding: 3px;
border: 5px solid yellow;
}
.boxSizing {
box-sizing: content-box;
/* //此时div的实际整体占的高度和宽度回是516px */
}
.boxSizing2 {
box-sizing: border-box;
/* //此时div整体高度永远是500px。content高度是484px */
}
# 4. 选择器优先级
!important > 行内样式 > id选择器 > class选择器 > 标签选择器 > * > 继承 > 默认
# 5. 选择器
- 类名选择器 .clsss{}
- ID 选择器 .id{}
- 标签选择器 p{}
- 子代选择器 div>p{}
- 后代选择器 div p{}
- 邻接选择器 div+p{}
- 属性选择器 [target=-blank]{}
- 伪类选择器 :hover :focus
- 第几个选择器 :first :last :nth-child(1)
# 6.scss 和 sass
# 7.inline-block 元素中间的间隙
原因：因为写 html 的时候中间实际上是有换行符的，inlne-block 会把换行符也当成行内元素渲染出来，但是换行符不可见，所以就成了空白
<div class="parent"> <div class="child">child1</div> (这里有不可见换行符) <div class="child">child2</div> (这里有不可见换行符) </div>解决方法：
1.写成一行，没有换行符就 OK
```html <div class="parent"> <div class="child">child1</div> <div class="child">child2</div> </div> ```- 父元素设置 font-size：0,让换行符不占位置
# 8.布局，两边固定中间自适应
- flex 布局：
- 父盒子 display:flex 左右 width:200px;中间 flex:1
- 或者 flex 布局 父盒子 display:flex 左边 flex: 0 0 200px;，右边 flex: 0 0 200px;中间 flex:1
# 9.flex 布局
- flex 属性：flex-grow, flex-shrink , flex-basis 即放大，缩小,空间，默认值为 0 1 auto。 0 为不变，1 为可变 flex:0。实际上是
- flex-grow: 0;
- flex-shrink: 1;
- flex-basis: 0%;
# 10.BEM 命名法
Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。
<div class="article">
<div class="article__body">
<div class="tag"></div>
<button class="article__button--primary"></button>
<button class="article__button--success"></button>
</div>
</div>
<!-- 以上代码，article是B，body是E，primary是M。代表着 块_元素--状态的意思 -->
# 10.三角形画法
<div class="sanjiao"></div>
.sanjiao{ height: 0; width: 0; border: 50px solid transparent; border-top: 50px
solid black; }
# 11.bfc 机制和盒子塌陷
https://blog.csdn.net/qq_40261601/article/details/129213461 https://blog.csdn.net/weixin_58545784/article/details/131443280
# 什么是 BFC
简单来说，BFC 提供了一个独立的布局环境，BFC 中的元素布局不受外部元素的影响，也不会影响到外部元素。
# 触发 BFC 的几种方式
1、给元素设置浮动 float: left | right
2、给元素设置脱离文档流的定位 position: absolute | fixed
3、给元素设置内容溢出 overflow: hidden | scroll |auto
4、给元素设置 display: flex | inline-block | table-cell
# 几种常见的 BFC 问题，即盒子塌陷的情况
# 一、 当子元素设置外边距，导致父元素连带向下，这就导致盒子模型塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>盒子塌陷1</title>
<style>
* {
margin: 0; // 设置元素的外边距为0。
padding: 0; //设置元素的内边距为0。
box-sizing: border-box; //并排放置两个带边框的框
}
.one {
width: 400px;
height: 400px;
background-color: green;
}
.two {
width: 200px;
height: 200px;
background-color: yellow;
margin-top: 100px; /*设置元素的上外边距。*/
margin-left: 100px; /*设置元素的左外边距。*/
}
</style>
</head>
<body>
<div class="one">
<div class="two"></div>
</div>
</body>
</html>
这种情况会出现父子盒子一起往下挤，就像是 margin-top 在父盒子上面一样。
- 解决办法：触发 bfc 规则
- border: 1px solid transparent /1.给父元素加上透明边框/
- /2.给父元素设置上内边距/ padding-top: 1px; /注意：此时父盒子高度为 400px+1px/
- position: absolute; /5.1 给父元素添加绝对定位/
- /5.2 给子元素加上绝对定位/ position: absolute;
# 二、 当父元素未设置高度，此时父元素的高度取决于子元素的高度，当子元素设置浮动后，会脱离文档流，造成子元素的内容在父元素外出现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>盒子塌陷2</title>
<style>
.one {
background-color: green;
}
.two {
width: 200px;
height: 200px;
background-color: yellow;
float: left;
}
.three {
height: 200px;
background-color: #50afeb;
}
</style>
</head>
<body>
<div class="one">
<div class="two"></div>
</div>
<div class="three"></div>
</body>
</html>
解决办法：
- 不用 float。现在有很多方法替代。尽量少使用 float，这个东西问题很多
- 父盒子加上伪元素，参考## 1. 清除浮动
.one:after {
content: ''; /*伪元素，内容为空*/
display: table; /*规定元素应该生成的框的类型,此处只要不为默认就行*/
clear: both; /*清除浮动*/
}
# 三、相邻盒子的 margin 会合并，以大的为准。——设置一个就行。或者使用 padding
# 1. 选择器
- 类名选择器 .clsss{}
- ID 选择器 #id{}
- 标签选择器 p{}
- 子代选择器 div>p{}
- 后代选择器 div p{}
- 邻接选择器 div+p{}
- 属性选择器 [target=-blank]{} //不太用的到
- 伪类选择器 :hover :focus //这个常用
- 第几个选择器 :first :last :nth-child(1) //这个常用，其实也属于伪类选择器
# 2. 块元素和行内元素
块元素：
- 会占据一整行。正常情况下，无法跟其他同级元素处于同一行。
- 可以设置宽度、高度、内外边距以及其他 CSS 盒模型属性。
- 块级元素可以包含其他块级元素和行内元素。
- 、
、
到
、
- 、
- 常见的就是div和p
行内元素：
- 行内元素不会强制换行，它们会按照顺序在同一行上放置。
- 没有宽高，及 width 和 height 无效。
- 通常不能设置上下边距和宽高，但可以设置左右边距。
- 行内元素只能包含其他行内元素或文本内容，不能包含块级元素。
- 常见的行内元素包括 、、、、
、 等。主要用到的就是 span 和 img
改变元素类型：
- 行内和块元素是可以变化的，即可以将 div 作为行内元素。
- display:block 表示将元素渲染为块级元素。
- display:inline 表示将元素渲染为行内元素
- display:inline-block 表示将元素渲染为行内块级元素。可以在同一行上显示多个元素，但又拥有块级元素的特性，可以设置宽度、高度、内外边距等盒模型属性，同时也可以设置上下边距和垂直对齐方式。(这个最常用。往往通过这个将 div 一行展示多个)
# 3.html的层级堆叠
CSS 层级堆叠指的是在页面中，多个元素重叠时，如何确定哪个元素应该显示在前面或后面的过程。层级堆叠的顺序由以下因素决定：
- 正常的同级元素其实不会堆叠在一起的，只有增加了 position 属性为 relative、absolute 或 fixed 的元素才会产生层级效果。
- 自然的一个元素，他的层级相当于 0
- 后出现的元素会覆盖先出现的元素。
- 如果有 z-index，以 z-index 为准
- 子元素会覆盖父元素。父元素中的多个子元素按上面的规则重新计算
- 不同父元素中的子元素如果覆盖，以父元素的层级为准
# 4.css特性
- 层叠性：后出现的样式如果与前面出现的冲突，会覆盖前面的