话不多说，直接开搞！

什么是CSS（叠层样式）？

简而言之就是html页面的样式，用来装饰HTML页面工具

一、CSS盒模型

我们都知道，HTML页面用的是盒模型，那么，到底什么是盒模型？

盒模型：HTML页面结构是由一个一个div容器互相嵌套排列组成，div容器就像盒子一样，有自身的宽高，边框，内容物等，故而称之为盒模型

盒子（div）有什么属性？

content（内容）
border（边框）
padding（内边距）
margin（外边距）

举个栗子，我们画一个盒模型，给上样式

      display: inline-block;
      width: 200px;
      height: 100px;
      padding: 20px;
      border: 10px solid #000;
      margin: 20px;
    }

microsoft浏览器打开，就得到了这个

$MIV{IGD8_}T@@3~U(%$@YPA.png$

但是，我们会发现，我们给的width是200px，但是微软浏览器计算的盒模型宽度却是：width+padding * 2+border * 2 = 260px

同理高度也是，但是如果我们用IE浏览器打开，就会有如下效果

QQ图片20230206144453.png

IE浏览器计算的宽度，却是我们给的width：200px

由此，便要提出盒模型的一个重要知识点，标准盒模型和IE盒模型（怪异盒模型）即除IE浏览器外，主流浏览器盒模型的宽度，指的是给定的样式width（content的宽度）+padding+border

而IE浏览器计算宽度，是只计算给定的样式width的

css中有一个 box-sizing 属性，它就决定了浏览器要以哪种盒模型来计算宽度

值为 border-box 从border开始计算宽度，即IE盒模型

值为 content-box 从content开始计算宽度，即标准盒模型

二、CSS选择器

首先 css选择器有哪些？

id (#box)
class (.wrap)
同级 (.one + .two)
子级选择 (.one > .one_1)
伪类选择器 (:first-child, :link, :hover...)
标签 (div)
群组 (.wrap, .box)
后代 (#box div)
伪元素选择器 (:before, :after, :first-line, :first-letter)
属性选择器 (input[value='name'])
层次选择器 (:nth-child(n), :disabled)

其次 CSS选择器的优先级是？

!important > 内联 > ID > 属性选择器 > 类名选择器 > 标签

最后哪些CSS样式是可以继承的？例如font-size: font-family: font-weight:等字体样式，还有text文本的样式，大多都是可以继承的

三、单位

CSS样式有多种计量单位：em px rem vh vw 要牢记各个的含义

em：以当前容器定义的字体大小为基准，若没有定义，则继承父容器，例如父容器设置font-size：16px 则子容器2em为32px

px：基本单位，一个视觉像素点

rem：以页面根(html)字体大小为基准计算，常用做移动端响应式适配

vh/vw:以设备可视区域为基准，百分比计算大小，比如10vw，就是占屏幕宽百分之10

四、css实现隐藏页面元素

display:none 重排+重绘，不响应点击事件
visibility:hidden 重绘，不响应点击事件
opacity:0 重绘，响应点击事件
width:0;height:0 重排，不响应点击事件
clip-path:polygon() 裁剪重绘，但无法响应点击事件
positon:absolute 不重排，只重绘，不响应点击事件（脱离了文档流）

五、BFC(block formating context)块级格式化上下文

首先，什么是块级格式化上下文？

BFC是一个渲染区域，它有一套自己的渲染规则，且：

同一个BFC容器内相邻的元素会产生margin重叠
BFC区域不会和float的元素重叠
BFC计算高度，浮动子元素也参与
BFC就是页面上一个隔离的子容器，容器里面的元素不会影响到容器外的元素

其次，它的触发条件是什么？

float：left/right
overflow:不为visible
display：inline-block、table-cell、table-caption、table、inline-table、inline-flex、grid、inline-grid
position：absolute、fixed

最后，它的应用场景：

防止margin重叠
清除浮动带来的负面影响
自适应的多栏布局

六、如何实现水平垂直居中？

（1）给定宽高的情况下

直接使用margin-left/top来调整位置居中

（2）不定宽高

使用flex布局：将父容器给定

father{
        display: flex;
        justify-content: center;
        align-items: center;
      }

使用positon + tarnsform：

.father{
        width: 400px;
        height: 400px;
        position: relative;
      }
.son  {
        position: absolute;
        background-color: #00ff;
        left: 50%;
        top: 50%;
        transform: translate(-50%);
      }

设置父容器为table-cell：

father  {
        display: table-cell;
        vertical-align:middle;
        text-align:center;
        }

使用grid网格布局：

.father{
        width: 400px;
        height: 400px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
    }
    .son{
        background-color: #00ff;
        grid-column-start: 2;
        grid-row-start: 2;
    }

将父容器分成九宫格子，占据中间那格

今天就先到这儿，明天补第二弹

CSS基础？轻松搞定! 第一弹~