CSS系列1|青训营笔记这是我参与「第四届青训营」笔记创作活动的的第2天这节课讲了很多内容，关于css有些知识点我也

这是我参与「第四届青训营」笔记创作活动的的第2天

这节课讲了很多内容，关于css有些知识点我也快忘了，或者掌握的不是很好，这里都记录下来。

选择器

选择器类型

id 选择器:#id名 {}
类选择器:.类名 {}
标签选择器:标签名 {}
通配符: * {},选取 html 所有的标签，作用是初始化html标签的属性
并列选择器:标签选择器class选择器 {},准确选择标签名一样，但class,id不一样的标签
相邻选择器:某元素+相邻元素 {}
子选择器:某元素>某子元素 {}
后代选择器:某元素某元素后代 {}
属性选择器:属性名 [ 属性名=属性值 ]
伪类选择器:某元素:属性 {}

伪类和伪元素区别

伪类：为处于某个状态的已有元素添加对应的样式，这个状态是根据用户行为而动态改变的
- :hover 用来设置鼠标悬停时元素的样式
- :visited 用来设置已访问过的链接的样式
- :first-child 用来匹配父元素的第一个子元素
伪元素：需要创建通常不存在于DOM文档中的元素，并为其添加样式
- ::before 用来设置在对象前(依据对象数逻辑结构)发生的内容,和content属性一起使用
- ::first-line 用来设置对象内第一行的样式
- ::placeholder 用来设置对象占位符的样式

简而言之，它们的区别在于

是否创造了新的元素
伪类用":"来表示，而伪元素可以用"::"来表示，也可以用":"表示

选择器优先级(都为256进制)

!important:Infineity
行间样式:1000
ID选择器:0100
类选择器|属性选择器|伪类选择器:0010
标签选择器:0001
通配符:0000

!important > 内联选择器 >ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

实现一个半圆

如上半圆，设定左上角右上角为宽和高一样的值，左下角右下角为0，高度设置为原来高度的一半

 .test1{
            width: 100px;
            border-radius: 50px 50px 0 0;
            background-color: yellow;
            height: 50px;
        }

实现一个对话框

用伪元素将三角形加入边框

     .test2 {
            width: 150px;
            height: 50px;
            background-color: rgba(169, 165, 165, 0.466);
            margin-left: 100px;
            position: relative;
        }
        .test2::after{
            content: '';
            right: 100%;
            top: 15%;
            position: absolute;
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-right: 8px solid rgba(169, 165, 165, 0.466);

        }

盒模型

W3C标准盒模型

width / height 只是内容高度，不包含 padding 和 border 的值

IE怪异盒模型

width / height 包含 padding 和 border 的值

box-sizing

content-box :默认值，与标准盒子模型表现一致
border-box :与怪异盒子模型表现一致
inherit :指定box-sizing属性的值从父元素继承

px/rem/em/vh/vw

px

相对长度单位,像素px是相对于显示器屏幕分辨率而言的

rem

页面所有使用rem单位的长度都是相对于根元素的font-size大小。即1rem等于根元素的font-size大小。

em

子元素字体大小的em是相对于父元素的font-size大小,元素的width/height/padding/margin用em是相对于该元素的font-size

vh(Viewport Height)/vw(Viewport Width)

相对于视口的宽度和高度，1vh相当于视口高度的1%

元素line-height设置为1，具体是多少像素，怎么计算

之前有总结过:html+css常用知识点总结

概念

行高是指文本行基线间的垂直距离(基线是英文字母“x”的下端沿)

计算方式

百分比 子元素继承父元素的line-height计算后的最终值而非百分比。
normal 子元素根据子元素自身的 font-size进行计算。
纯数字 纯数字方式与 normal 唯一的不同，就是数值的大小可以自己随意设定，而 normal 的值是浏览器决定的。

所以line-height设置为1，其实是元素line-height大小等于1* font-size大小

如何让谷歌浏览器网页显示小于12px以下字体

谷歌浏览器显示的最小字号是12px,那么如何实现显示小于12px以下字体呢

-webkit-transform:scale()
- scale()只对可以定义宽高的元素生效，所以遇到行内元素要转化成行内块元素
-webkit-text-size-adjust:none;(自chrome 27之后，取消了对此属性的支持)

如何实现一个 0.5 像素的边框

四边都需要
- 用transform: scale()的方式
  - 设置目标元素为定位参照
  - 给目标元素添加伪元素并设置绝对定位
  - 给伪元素加上1px边框
  - 设置宽高为目标元素两倍
  - 用transform:scale(0.5);transform-origin:left top将伪元素缩小为0.5倍(transform-origin定义缩放基点为左上角)
  - 用box-sizing：border-box属性把边框都包进宽和高里面

        .box2 {
              position: relative;
              margin: 10px 0 0 200px;
              border: none;
              background: none;
              height: 100px;
              width: 100px;
               }

       .box2::after {
           content: '';
           position: absolute;
           border: 1px solid #000;
           top: 0;
           left: 0;
           box-sizing: border-box;
           width: 200%;
           height:200%;
           transform: scale(0.5);
           transform-origin: left top;
       }

单边框

border+border-image+线性渐变

.border {
        width: 200px;
        height: 200px;
        margin: 0 auto;
        border-bottom: 1px solid transparent;
        border-image: linear-gradient(to bottom,transparent 50%, red 50%) 0 0 100%/1px 
    }

伪元素+background-image+线性渐变

.border {
    width: 200px;
    height: 200px;
    background-color: red;
    margin: 0 auto;
    position: relative;
 }

.border:before {
        content: " ";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100px;
        height: 1px;
        background-color: blue;
        background-image: linear-gradient(to bottom transparent 50%, blue 50%);
  }

伪元素+scale()

   .box:after{
        content: '';
        background-color: red;
        top: 0;//下边框设置bottom:0
        left: 0;//右边框设置right：0
        display: block;
        height: 1px;//左右边框设置height:200%
        width: 200%;//上下边框设置width:1px
        position: absolute;
        transform: scale(0.5);
        transform-origin: top left;
        }

移动端
- 采用meta viewport

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

position 定位

固定定位 fixed

元素相对浏览器窗口是固定位置，即使窗口滚动它也不会移动
脱离标准流，因此不占据空间
fixed的元素和其它元素重叠

相对定位 relative

相对于自己原来位置进行偏移
仍在标准文档流中，原来的位置会被保留
移动元素会覆盖其它框

绝对定位 absolute

脱离原来位置进行定位
没有已定位父级元素的前提下，相对浏览器定位
有已定位父级元素，通常相对父级元素进行偏移
脱离标准流，原来的位置不会被保留
会和其它元素重叠

粘性定位 sticky

元素先按照普通文档流定位
再相对于该元素的BFC和最近块级祖先元素定位
而后元素定位表现为在跨越特定阈值前为相对定位
之后为固定定位

默认定位 Static

默认值，没有定位
元素按照标准文档流进行排布
忽略 top, bottom, left, right 或者 z-index ，即这些都不起作用

块元素，行内元素和行内块元素

块元素

常见块元素

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

特点

自身独占一行，多个元素会另起一行
高度、宽度、内外边距都可以自定义
宽度默认是父元素的100%
块元素里可以包含行内、行内块、块元素
段落元素（文字元素）内不能放块元素

行内元素

常见行内元素

<a>、<strong>、<b>、<em>、<i>、<del>、<u>、<span>

特点
- 相邻行内元素在一行，一行可以显示多个
- 高度、宽度的设置无效，只会被文字撑开
- 默认宽度就是文本撑开的长度
- 行内元素只能容纳行内元素和文本
- 超链接里不能容纳超链接

行内元素设置padding和margin

margin在水平方向有效，垂直方向无效
padding在水平方向有效，垂直方向可以有视觉效果，但是不影响布局,没有撑大盒子，并不会对周围的元素产生影响
高度height和宽度width的设置是无效的，高度可用line-height设置

行内块元素

常见行内块元素

<img />、<input />、<td>

特点
- 和相邻的行内元素（包含行内块）在一行上，之间会有空白缝隙
- 一行可以显示多个（行内元素特点）
- 默认宽度就是内容的宽度（行内元素特点）
- 高度、宽度、内外边距都可以自定义（块元素特点）

行内块元素/行内元素之间出现间隙的原因以及如何解决

行内块inline-block元素之间出现空白间隙原因及解决办法

有时会遇到图片连接处出现白线的情况，这其实与img自身属性是inline-block有关

原因
- 元素被当成行内块/行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px
解决方法
1. 去除元素间的空白
  - 将上一个元素的闭合标签与下一个元素的开始标签写在同一行
```
<div class = "box">
        <span>你好</span
          ><span>你好</span
            ><span>你好</span>
  </div>
```
  - 两个inline-block元素间加上空白注释
```
<div class = "box">
    <span>你好</span><span>你好</span><span>你好</span>
  </div>
```
  - 行内块元素设置浮动 float: left;，再清除浮动(最后一行加上<div style="clear: both;"></div>)，防止父元素高度塌陷
2. 父元素设置font-size为0，子元素单独设置字体大小
3. 设置margin-right为负值
  - 用margin负值来抵掉元素间的空白，不过margin负值的大小与上下文的字体和文字大小相关，并且同一大小的字体，元素之间的间距在不同浏览器下是不一样的，如：font-size:16px时，Chrome下元素之间的间距为8px,而Firefox下元素之间的间距为4px。所以这个方法并不通用，也相对比较麻烦，因此不太推荐使用
4. 给inline-block元素加float或者flex
5. 设置字符间距或单词间距
  - 给父元素一个letter-spacing或者word-spacing的负值，子元素再调整为0即可，具体使用字符间距还是单词间距其实大同小异

2022.09.06更新:解决微信小程序图片间隙问题

.prizeCodeImg {
  position: fixed;
  left: 10%;
  top: 20%;
  width: 80%;
  z-index: 2;
}

.prizeCodeImg image {
  width: 100%;
  background-size: cover;
  vertical-align: middle;//vertical-align是重点，值都可以
}

前:

后:

垂直居中

以前总结过，详见CSS各种居中，十分钟掌握

top=50% 的含义:令子元素左边框距离浏览器左边50%(生效前提是需要设置本身的position:absolute或relative)
margin-top为负值时，不管是否设置高度，都不会增加高度，而会产生向上的位移

水平居中
- 行内元素: text-align:center,父级元素不为块级元素则设置父元素 display:block 变成块级元素
- 块级元素
  - flex
    - 父元素上设置 display: flex; justify-content: center;
  - 宽度确定
    1. margin:0 auto
    2. 父元素设置postition: relative;属性，需要居中的块元素设置postition: absolute;
      - 需要居中的块元素设置 left:50%; , margin-left: -块元素宽度的一半; / transform: translateX(-50%); 属性
  - 宽度不确定
    1. 设置 display:inlne-block 转化成行内块级元素，再设置 text-align:center 水平居中
    2. 父元素设置 postition: relative;，需要居中的块元素设置 postition: absolute;
      - 需要居中的块元素设置left:50%; transform: translateX(-50%);
垂直居中
- 行内元素
  - flex
    - 父元素上设置 display: flex; align-items: center;
  - 单行行内元素
    - 行内元素设置 line-height: 父元素高度
  - 多行行内元素
    - 父元素设置 display: table-cell 和 vertical-align: middle;
- 块级元素
  - 父元素设置 postition: relative; ，需要居中的块元素设置 postition: absolute;
  - 高度确定
    - 居中的块元素设置 top:50%; ,margin-top: -块元素高度的一半;/transform: translateY(-50%);
  - 高度不确定
    - 需要居中的块元素设置 top:50%; transform: translateY(-50%);

flex布局

以前总结过，详见flex布局，看这一篇就够了

flex

是flex-grow || flex-shrink || flex-basis的简写,flex 可以指定1-3个值
单值语法
- 值必须为以下其中之一
- 一个无单位数:会被当做 flex-grow 的值(决定flex items如何扩展)
- 一个有效的宽度值:会被当做 flex-basis 的值(用来设置flex items在main axis方向上的base size)
- 关键字 none，auto或initial
双值语法
- 第一个值必须为一个无单位数，并且它会被当做 flex-grow 的值，第二个值必须为以下之一
- 一个无单位数：它会被当做 flex-shrink 的值(决定flex items如何收缩)
- 一个有效的宽度值：它会被当做 flex-basis 的值
三值语法
- 第一个值必须为一个无单位数，被当做flex-grow的值
- 第二个值必须为一个无单位数，被当做flex-shrink的值
- 第三个值必须为一个有效的宽度值：它会被当做flex-basis的值

Q:在flex布局中，

父项目div：display：flex; width：1000px
子项目div1：flex：1 0 100px
子项目div2：flex：2 0 300px

子项目宽度是多少？

A: div1宽度为100px,div2宽度为300px，div宽度为1000px，容器剩余空间为600px,flex-grow之和大于1，则用来分配的剩余空间也为600px,div1分配到的剩余空间为600* 1/(1+2)=200px,即div1宽度为200+100=300px,同理可得div2的总宽度为600* 2/(1+2)+300=700px

BFC

BFC是什么

Block Formatting Content:块级格式化上下文，是CSS布局的一个概念，BFC是一个独立的渲染区域，规定了内部box如何布局，并且这个区域的子元素不会影响到外面的元素。

BFC规则

容器内部会在垂直方向上自上而下排列
BFC是页面中的一个隔离的独立容器，容器里的元素不会影响到外部元素
垂直方向的距离由margin决定，属于同一个BFC的两个相邻容器外边距会发生重叠
计算BFC的高度时，浮动元素也参与计算
每个元素的左margin值和容器的左border相接触
BFC区域不会与浮动的容器发生重叠

怎么触发BFC

元素设置绝对定位：position: absolute/fixed
元素设置浮动：float: left/right
display 值为：inline-block、table-cell、table-caption、flex等
overflow 值为：hidden、auto、scroll；

Q:两个 div，都给margin：20px，这两个 div 的间距是多少？为什么会产生这种问题？怎么解决？

A:这两个 div 的间距是20px,原因是出现了margin塌陷现象：在垂直方向如果有两个元素的外边距有相遇，在浏览器中加载的真正的外边距不是两个间距的和，而是两个边距中值比较大的，边距小的塌陷到了边距值大的值内部。解决方法是设置两个不同的BFC,在两容器外都套上相同容器(id/class相同)，并在容器中设置overflow:hidden

父元素高度塌陷，清除浮动

增加父级元素高度
增加一个空的div标签清除浮动
- 代码中应该尽量避免空div

.clear {
    clear: both;
    margin: 0;
    padding: 0;
     }

设定overflow:hidden/scroll;

overflow在一些下拉场景避免使用

给父类添加一个伪类:after
- 无副作用

    #father:after {
        content: '';
        display: block;
        clear: both;
      }

display

display 属性规定是否/如何显示元素。 display属性最详解

overflow-y:auto

内容溢出元素框时自动出现滚动条，滑动滚动条显示溢出的内容

top 和 margin-top 区别

top是绝对定位，定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移，必须设置position为absolute。是相对body或设置了position：relative的最近父级元素的绝对定位
margin是相对相邻元素定位，设置元素的上外边距