层叠指的是什么？

样式层叠：可以多次对同一选择器进行样式声明
选择器层叠：可以用不同选择器对同一个元素进行样式声明
文件层叠：可以同多个文件进行层叠
这些特性使得CSS极度灵活

caniuse.com使用方法

输入你关心的样式，比如border-radius或filter
查看大部分浏览器的支持情况
如果想要看更多，点击Show All
下方会详细说明兼容bug有哪些

CSS是艺术

像画画、折纸，用感性思维来理解CSS，所见及所学

如何调试CSS

使用W3C验证器（在线/命令行工具）
使用VSCode看颜色
使用WebStorm看颜色
使用开发者工具看警告

Border调试法

border: 1px solid red;

怀疑某个元素有问题
给这个元素加border
border没出现？说明选择器错了或者语法错了
border出现了？看啊可能边界是由符合预期
bug解决了才可以把boeder删掉

在哪查资料

Google搜索关键词加 MDN
CSS tricks
张鑫旭博客
搜索CSS spec 可以找到CSS最新标准

文档流

流动方向

inline(内联元素)元素从左到右，到达最右边才会换行
block(块级)元素从上到下，每一个都另起一行
inline-block(内联块级)也是从左到右宽度
inline宽度为内部inline元素的和，不能用width指定
block默认为自动计算宽度，可用width指定
inline-block结合前两者特点，可用width 高度
inline高度由line-height间接决定，跟height无关
block高度由内部文档流元素决定，可以设置height
inline-block跟block类似，可以设置height overflow溢出：当内容打羽容器
等内容的宽度或高度大于容器的，会溢出
可用overflow来设置是否西安市滚动条
auto石灵活设置
scroll是永远显示
hidden是直接隐藏一处部分
visible是直接西安市溢出部分
overflow可以分为overflow-x和overflow-y 脱离文档流
position：absolute/fixed
float： left；

盒模型

margin外边距/border边框/padding内边距/content 1655435218(1).jpg

content-box内容盒-内容就是盒子的边界

content-box width=内容宽度

border-box边框盒-边框才是盒子的边界

border-box width=内容宽度+padding+border

margin合并

父子合并
兄弟合并

如何阻止合并

父子合并用padding/padding挡住
父子合并用overflow:hidden挡住
父子合并用display:flex。不知道为什么
兄弟合并是符合预期的，可以用inline-block消除 CSS彩虹：js.jirengu.com/sutibavawu/…

CSS布局

float布局

子元素上加 float: left 和 width
在父元素上加 .clearfix

flex 布局

container(容器)

让一个元素变成flex容器

.container{
  display: flex;/*or inline-flex*/
}

改变items流动方向(主轴)

.container{
 flex-direction: row|row-reverse|column|coumn-reverse/*右左下上*/
}

改变折行(控制换行)

.container{
  flex-wrap: nowrap|wrap|wrap-reverse
}

主轴对齐方式，默认主轴是横轴

.container{
  justify-content: flex-start|flex-end|center|space-between|space-around
}

次轴对齐方式

.container{
 align-items:stretch|flex-start/*一样高*/
}

item

重点

display: flex;
flex-direction: row|column
flex-wrap:wrap
justify-conten: center/spcae-betweem
align-items: center

CSS定位

布局是屏幕平面上的，定位是垂直于屏幕的

1655437470(1).jpg

position 定位元素

static 默认值，待在文档流中
relative 相对定位，升起来，但不脱离文档流
absolute 绝对定位，定位基准是最先里的非static，元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
fixed 相对于视口绝对定位固定定位
sticky粘滞定位如果你写了一个absolute，一般都得补一个relative 如果你写了一个absolute和fixed，一定要补top和left sticky兼容性很差

1655437796(1).jpg

层叠上下文

每个层叠上下文就是一个新的小世界（作用域）
这个小世界里面的z-index和外界无关
处在同一个小世界的z-index才能比较
z-index/flex/opacity/transform 忘了就搜层叠上下文 MDN

CSS动画

浏览器渲染

布局、绘制、合并

transform

四个常用功能

位移translate
缩放 scale
旋转 rotate
倾斜 skew 一般都要配合transition过渡，inline元素不支持transform，需要先变成block

translate

translate(-50%,-50%)可以做到绝对定位元素居中

scale

scaleX(number)
scaleY(number)
scale()

rotate

skew

可以组合使用

 transform:scale(0.5) translate(-100%,-100%);
 transform:none:/**取消所有/

CSS跳动的心：js.jirengu.com/sijes/1/wat…

transition 过渡

transition：属性名时长孤独方式延迟
transition： left 200ms linear
可以用逗号分隔两个不同属性
transition： left 200ms, top 400ms;
可以用all代表所有属性
transition: all 200ms;
过渡方式有：linear|ease|ease-in|ease-out 并不是所有属性都可以过渡
display: none => block没法过渡
一般改成 visibility: hidden => visible

CSS伪类选择器

请将html模块中ul列表的第2个li标签和第4个li标签的背景颜色设置成"rgb(255, 0, 0)"。

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
        li:nth-child(2){
        background:rgb(255,0,0)
        }
        li:nth-child(4){
        background:rgb(255,0,0)
        }
            
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </body>
</html>

CSS伪元素

请给html模块的div元素加一个后伪元素，且后伪元素的宽度和高度都是20px，背景颜色为"rgb(255, 0, 0)"。伪元素默认是行内元素,设置宽高无效,所以要用display:block;

前伪元素和后伪元素都必须要加content：“”；如果要写文本的话就是吧文本写在引号内

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
           /*补全代码*/
            div::after{
                display:block;
                content:'';
                width: 20px;
                height: 20px;
                background: rgb(255,0,0)
            }   
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

浮动和清除浮动

请将类为"left"的div元素和类为"right"的div元素在同一行上向左浮动，且清除类为"wrap"的父级div元素内部的浮动。

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .wrap {
            /*补全代码*/
            height: 100px;
            }
             .left {
                width: 100px;
                height: 100px;
                /*补全代码*/
                float:left;
                 border: 1px solid red;
            }
             .right {
                width: 100px;
                height: 100px;
                /*补全代码*/ 
                float:left;
                border: 1px solid red;
                
            }
        </style>
    </head>
    <body>
        <div class='wrap'>
            <div class='left'></div>
            <div class='right'></div>
        </div>
    </body>
</html>

注意 : 使用了float之后，父级盒子的高度变为0了

清除的浮动方式:

可以给父盒子添加一个高度

可以添加属性 overflow:hidden ,但是不能和定位同时使用,因为超出的尺寸的会被隐藏,可能会影响页面的布局

可以通过伪元素after的方式\

可以在子元素的最后添加一个空的div,设置clear:both属性

CSS单位

在css中单位长度用的最多的是px、em、rem，这三个的区别是：

px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。
对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。

请将html模块中类为"box"的div元素的宽度和高度设置为自身字体大小的4倍。

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .box {
                /*补全代码*/
                        width:4em;
         height:4em; 
            }
        </style>
    </head>
    <body>
        <div class='box'></div>
    </body>
</html>

CSS知识总结