CSS知识总结

2019-10-08 本文已影响0人浪味仙儿啊

一、CSS简介

CSS，全拼Cascading Style Sheets，层叠样式表，是由Tim Berners Lee的同事赖先生（Håkon Wium Lie）首先提出的，目前使用最广泛的版本为CSS2.1。

二、CSS语法

① 选择器 {
属性名：属性值；}

② @语法
@charset "UTF-8";
@import url(2.css);
@media (min-width：100px) and (max-width: 200px){
语法①
}

注意事项：@charset "UTF-8" 必须放在第一行，charset是字符集，UTF-8是字符编码encoding。

三、如何调试CSS

主要是Border调试法

四、文档流

文档流动方向

inline元素，从左到右，直到一行排满再重起一行。
block元素，从上到下，依次排列，每个元素占一行。
inline-block，也是从左到右的。

宽度

display为inline元素的宽度由里面inline元素的宽度决定，不能用width，不要再inline元素中加block元素。
block默认自动计算宽度，可用width制定（但尽量不要写width：100%）。
inline-block默认于inline一样，但可用width制定。

高度

inline高度由行高（line-height）间接确定，跟height、padding无关。
bolck高度由里面的文档流中的元素决定，可以设height。
inline-block 类似于block。

五、overflow 溢出

当内容大于高度或宽度（容器）时，内容会溢出
可用overflow来设置是否显示滚动条
auto是灵活设置，超出时有，不超出时没有
scroll是一直有
hidden直接隐藏溢出部分
visible直接显示溢出部分

六、脱离文档流

position： absolute；
float：left；
脱离文档流的元素高度不包含在div中

七、两种盒模型

①content-box内容盒，宽度只包含content

content-box
②border-box边框盒，宽度包含border、padding、content

border-box
一般用boeder-box

八、margin合并

只有上下合并，左右不合并

①父子margin合并，爸爸的上边距与第一个儿子上边距合并，爸爸的下边距与最后一个儿子下边距合并。
②兄弟margin合并

阻止父子合并可使用 padding/border/overflow：hidden
阻止兄弟合并使用display：inline-block，兄弟合并是符合预期的。

九、CSS布局

Float布局（可用于IE浏览器）

步骤
子元素加float：left和width
父元素加class =.clearfix

.clearfix: after{
            content: '';
            display: block;
            clear: both;

一般写CSS时，去掉原来的样式

*{margin: 0;padding: 0;box-sizing: border-box;}

经验
最后一个div先不设width
IE6/7存在双倍margin问题，有两种解决办法：
①将错就错，把margin减半

margin-left: 10px;
-margin-left: 5px;

②加display: inline-block;

flex布局

image.png

父元素container是一个弹性容器，items为子元素

让一个元素变成flex容器

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

改变items流动方向

.container{
            flex-direction: column / row / row-reverse / column-reverse;}

默认的是row横着布局，column是竖着布局，row-reverse是从右往左排，column-reverse是从下往上排

改变折行

.container{
             flex-wrap: nowrap / wrap / wrap-reverse;}

默认为nowrap不折行，wrap是折行，wrap-reverse是倒着折行

横轴对齐方式

.container{
            justify-content: flex-start / flex-end / center / space-between / space-around / space-evenly;}

flex-start左对齐，flex-end右对齐，center居中，space-between把空间放在子元素之间，space-around把空间放子元素周围，每个子元素两边相等，space-evenly平均围绕，横轴对齐方式需在flex-direction不变的情况下

纵轴对齐方式

.container{
            align-items: center / flex-start / flex-end / stretch;}

Grid布局
grid也分container和items，成为container

.container{
            display: grid / inline-grid;}

行和列

.container{
            grid-template-columns: 40px 50px auto 50px;
            grid-template-rows: 25% 100px auto;
}

控制所占行数，以线为准

.container{
            grid-row-start: 1;
            grid-row-end: 4;
}

控制所占列数

.container{
            grid-column-start: 1;
            grid-column-end: 4;
}

十、CSS动画浏览器渲染原理

根据HTML构建HTML的树（DOM）
根据CSS构建CSS的树（CSSOM）
将两颗树合并为一颗渲染树（Reder Tree）
layout布局（文档流、盒模型、计算大小和位置）
paint绘制（把边框颜色、文字颜色、阴影等画出来）
composite合成（根据层叠关系展示画面）

不同的属性，渲染流程不同

全走一遍
div.remove() 会触发当前小时，其他元素重新布局，再绘制合成
跳过layout
改变背景颜色，不需要再布局，直接绘制合成
跳过layout、paint
改变transform，只需重新合成

十一、CSS 动画的两种做法（transition 和 animation）

transition 过渡

作用
补充中间帧
语法
transition：属性名时长过渡方式延迟（transitio：left 1s linear）
可以用逗号分隔两个不同属性（transition：left 1s，top 2s）
可以用all代表所有属性（transition：all 1s）
过渡方式有： linear/eas（默认的）/ease-in/ease-out/ease-in-out......

注意：并不是所有属性都能过渡
display：none =>block无法过渡，一般改成visibility：hidden =>visible
background无法过渡
opacity透明度无法过渡

animation 动画
当有中间点时可使用animation，因为transition需要使用两次transform

需声明关键帧@keyframes，两种写法
from to

@keyframes slidein{
          from{
            transform: translateX(0%);
           }
          to{
            transform: translateX(100%);
          }
}

百分数

@keyframes identifier{
        0%{top: 0; left: 0;}
        30%{top: 50px;}
        68%, 72%{left: 50px;}
        100%{top: 100px; left: 100%;}
}

添加动画
语法
animation：时长过渡方式延迟次数方向填充模式是否暂停动画名
时长：1s或1000ms
过渡方式：跟transition取值一样
次数：3或2.4或infinite（无穷尽）
方向：reverse（相反）/alternate（轮流）/alternate-reverse（交替反转）
填充模式：none/forwards/backwards/both
是否暂停：paused/running