css知识总结

无恙Iron
125 阅读10分钟

文档流 （normal flaw）

正常文档流方向：从左至右，从上至下

inline元素（内联元素）

流动方向：从左到右，到达最右边才会换行(遇到行尾可一个元素占两行)

宽度：由内联元素的总和决定，设置宽高不生效

高度：由line-height间接决定，跟height无关（字体也会影响它的高度，涉及行盒）

例：文本格式化标签、a、span

block元素（块级元素）

流动方向：从上到下，每一个元素都另起一行

宽度：默认（auto）自动计算宽度，由其内的文档流决定

高度：由内部文档流元素决定，设置宽高生效

例：h1-6、p、div、ul、ol、dl、dd、dt、li

inline-block元素（行内块元素）

流动方向：从左到右 (遇到行尾不会一个元素占两行)

宽（高）度：结合inline和block特点，设置宽高生效

例：input、button、img

脱离文档流 （容器的高度不加脱离文档流元素的高度）

绝对定位：position:absolute/fixed

浮动：float

转换

以上三种元素可互相转换：display：inline/block/inline-block

注意：

一般不写width：100%，容易有bug

不能在inline元素内嵌套block元素

内容溢出解决方法：（当内容的宽度或高度大于容器）

overflow:hidden; 直接隐藏了超出范围的内容

     overflow:visible； 是直接显示溢出部分

     overflow:scroll; 永远显示（可滑动滚动条查看所有内容，即使内容没有溢出也有滚动条）

     overflow:auto; 可灵活设置（内容溢出时可滑动滚动条查看所有内容（内容无溢出时不显示滚动条），若文档流内的某个人元素过于宽了，会显示x轴的滚动条，但是文档流内的内容显示不会发生改变，它只会显示第一屏的内容。（overflow可以分为overflow-x和overflow-y））

盒模型

  • content-box（内容盒）：内容就是盒子的边界

    content-box width=内容宽度 只包含content，不包含border

  • border-box（边框盒）：

    border-box width=内容宽度+padding+border 包含border、padding和content

  • 外边距合并（上下合并）原则：

1.兄弟合并：两个元素之间的上下外边距会合并（两个同级元素，1设置了margin-bottum为10px，2设置了margin-top为10px；但是他们之间的距离还是10px）

取消兄弟合并：display:inline-block

2.父子合并：第一个元素和最后一个元素会跟他们的父元素外边距合并，以值大的为准

取消父子合并：

  •   在父元素上加overflow：hidden挡住

  •   在父元素上加padding/border挡住

  •   使用display:flex;

基本单位

  • 长度单位
  1. px：像素
  2. em：相对于自身font-size的倍数
  3. 百分数
  4. 整数
  5. rem：代表根元素（通常为元素）的font-size大小
  6. vw：视口的最初有块的宽度的 1%
  7. vh： 视口的初始拥有块的高度的1%
  • 颜色
  1. 十六进制#FF6600或者#F60
  2. RGBA 颜色 rgb(红,绿,蓝) ，rgba(红,绿,蓝,透明度)
  3. hsl颜色（色相，饱和度，亮度）， hsla颜色（色相，饱和度，亮度，透明度）

css布局知识

1.两种布局

  • 固定宽度，一般960/1000/1024（px）

  • 不固定宽度布局，主要靠文档流的原理布局

2.第三种布局

  • 响应式布局，它是一种混合布局，pc上固定宽度，手机上不固定宽度

3.布局思路

  • 从小到大（先定下整体布局，再完善局部）

  • 从小到大（先完成局部，然后组合成大布局）

如何选择用那种布局呢？

image.png

float布局

  • 在子元素加上float和width

  • 在父元素上加上clearfix .clearfix:after{content:' '；display : block; clear: both;}（一定要加）

  1. border有时候会干扰布局，直接将border：改成outline：

  2. 块级元素居中：

                    margin: 0 auto；(容易出现bug)

                margin-left: auto;margin-right: auto;（更好！）

3.平均布局：解决最后一个元素乱跑的问题，用负margin

flex布局

cotainer 容器 （以下是用在容器上的属性）

让一个元素变成container：display：flex / display：inline-flex；

主轴（默认横轴）

- flex-direction （定义主轴流动方向）取值：

  1. row 横向，从左至右，顺序
  2. row-reverse 横向，从右至左，倒序
  3. column 纵向，从上至下，顺序
  4. column-reverse 纵向，从下至上，倒序
    image.png
  • flex-wrap（定义是否换行）:wrap/nowrap image.png

- flex-flow(缩写)：flex-direction|flex-wrap

主轴元素

  • justify-content（主轴对齐方式）取值：
  1. stretch 均匀排列每个元素
  2. flex-start 从行首起始位置开始排列
  3. flex-end 从行尾开始排列
  4. center 居中
  5. space-around 均匀排列每个元素（首个元素放置于起点，末尾元素放置于终点）
  6. space-between 余下空间在元素之间平均分布，靠边
  7. space-evenly 余下空间平均分布

image.png

次轴（默认纵轴）

  • align-items（次轴对齐方式）取值：
  1. stretch 均匀排列每个元素的高度
  2. flex-start 从起始位置开始排列
  3. flex-end 从行尾开始排列
  4. center 居中

image.png

多行内容

  • align-content（多行内容对齐方式）取值：
  1. flex-start 从起始位置开始排列
  2. flex-end 从行尾开始排列
  3. center 排列元素都在中间
  4. stretch 把空间撑满
  5. space-between 均匀排列每行（首行元素放置于起点，末尾元素放置于终点）
  6. space-around 余下空间在每行之间平均分布

image.png

  • flex之其内的items（以下是用在容器内元素上的属性）

    order（items的排列顺序）：container里默认items的oder：0，元素oder值越大越靠后，可有负值

image.png

flex-grow（控制如何变胖）：把剩余空间分成n份，可指定每个item占几份，数值越大占比越多

image.png

flex-shrink（控制如何变瘦）：缩窄时，数值越大贡献越多。一般写flex-shrink：0防止变瘦，默认是1，无负值

image.png

flex-basis（控制基准宽度）：指定了 flex 元素在主轴方向上的初始大小，默认auto

flex（缩写）：flex-grow | flex-shrink | flex-basis 默认为flex：0，1，auto

align-self（调整元素自己的位置）： align-self: auto | flex-start | flex-end | center | baseline | stretch;

image.png

grid布局（简单语法）

cotainer 容器

  • 让一个元素变成container：display：grid/inline-grid；

grid-template-columns 定义每一列的列宽 grid-template-columns:1 px 2px 3px 4px 5px; (5列，还可以给线取名字例如：[firstline] 1px;也能以fr为单位，这样写它会以平均分布，相当于格子一样) 可用多种单位：（grid-template-columns:100px 3em 40%）

grid-template-rows 定义每一行的行高 grid-template-row:1px 2px 3px ; （3行）

**grid-row-start/grid-row-end:定义元素在行上开始和结尾的位置 **

grid-column-start/grid-column-end:定义元素在行上开始和结尾的位置

  1. grid-column-start:2; 从第二列开始

  2. grid-column-end:3;到第三列结束

  3. grid-row-start:2;从第二行开始

  4. grid-row-start:3;到第三行结束

**grid-gap:12px; 可控制两个元素之间的间隙(grid-column-gap/grid-row-gap) **

grid-template-sreas 可给元素分区

例如：grid-template-sreas:

     "header heaer header"

      "asaid main ad"

      "footer footer footer"

简写：grid-area: grid-row-start | grid-cloumn-start | grid-row-end | grid-column-end，通过基线（line），跨度（span）或没有（自动）的网格放置在 grid row 中指定一个网格项的大小和位置，继而确定grid-area的边界

**order：规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局（适用元素：Flex items, grid items, and absolutely-positioned flex and grid container children）**用法：order:5; order:-5;

一个例子：grid-template-columns:1fr 5fr；grid-template-rows: 20% 20% 20% 20% 20%;

image.png

css定位

一个div的分层

  • 一个div完整的分为5层，从下到上依次为：background>border>块级子元素>浮动元素>内联子元素（文字是后来者居上）
  • 同一个结构中，内联子元素越靠后出现，层级越往上（后来者居上 ）
  • 浮动元素脱离文档流就是往上浮了一层，浮动元素和文档流互不影响

** 注意：**

  1. z-index可以调整层级，默认auto（不创建层叠上下文）
  2. 创建层叠上下文（常用）：z-index、flex、opacity、transform
  3. z-index:0/1/2/-1/-2 值越大越靠上（会创建层叠上下文，意思就是另起一个作用域）
  4. 每个层叠上下文都是一个新的作用域，只有处在同一个作用域中的z-index才能进行比较
  5. opacity与background区别：opacity影响作用域内所有（元素）内容，background只影响背景

position

position的五个取值：

  1. static 默认值 待在文档流中

  2. relative 相对定位，层级升起来，但不脱离文档流

  3. absolute 绝对定位，以祖先元素中最近的非static元素为基准定位

  4. fixed 固定定位 以viewport（视口）为基准进行定位

  5. sticky 粘滞定位

    注意：

  6. 子绝父相，如果写了absolute一般都要补relative

  7. 如果写了absolute或者fixed,一般都要补top和left（某些浏览器不写的话会出错）

  8. white space：nowrap 文字内容不换行

  9. relative 在文档流中占的位置不变，但显示看起来变了

  10. 善于用 left:100%; left:50%+负margin

  11. fixed元素的父元素使用了transform，fixed定位会失效

css动画

渲染原理

浏览器渲染过程

  1. 根据HTML构建HTML树（DOM）
  2. 根据CSS构建CSS树（CSSDOM）
  3. 将两棵树合并成一颗渲染树（render tree）
  4. layout布局（文档流，盒模型，计算大小和位置）
  5. paint绘制（把边框颜色，文字颜色，阴影等画出来）
  6. component合成（根据层叠关系展示画面）

三种样式更新方式

  • 第一种，全走

div.remove()会触发当前消失，其他元素relayout

  • 第二种，跳过layout 改变背景颜色，直接repaint + composite

  • 第三种，跳过layout和paint 改变transform,只需composite

注意必须全屏查看效果,在iframe里看有问题

transform

  • translate（位移） ：
  1. translatX X轴方向移动
  2. translateY Y轴方向移动
  3. transateZ Z轴方向移动（垂直于平面的轴，使用时要配合在父元素上加perspective才行）
  4. translate3d（x,y,z）

注意：

  1. translate（-50%，50%）可做绝对定位元素的居中
  2. scall（缩放）：scallX（） sallY（） scall（）
  3. rotate（旋转）：以垂直于平面的轴线旋转 rotateX() roateY() rotate()
  4. tansition（过渡）：指定状态变化所需要的时间
  5. transition：属性名 过渡时间 过渡方式 延迟

过渡方式（transition-timing-function，以下只是部分）

（1）linear：匀速

（2）ease-in：加速

（3）ease-out：减速

（4）cubic-bezier函数：自定义速度模式

（5）ease：逐渐放慢

简写：

transition：transition-duration | transition-delay | transition-property | transition-timing-function

display和visibility的区别：

display: none;是彻底消失，不在文档流中占位，浏览器也不会解析该元素；不会被子元素继承。visibility:hidden;是视觉上消失了，在文档流中占位，浏览器会解析该元素；会被子元素继承。

animation

animation语法

animation:时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名; 时长:1s或者1000ms

过渡方式:跟transition取值一样，如linear

次数:3或者2.4或者infinite

方向:reverse | alternate| alternate-reverse

填充模式:none | forwards | backwards | both

是否暂停:paused | running

注：以上所有属性都有对应的单独属性

@keyframes语法

  1. @keyframes 动画名 { from { transform: translatex(0%);}

to { transform: translatex ( 100%);} }

  1. @keyframes 动画名 { 0% { top: 0; 1eft: 0;}

30% { top: 50px; }

50%，72% { left: 520px;}

100% { top: 100px; left: 100%;}}

案例： 地址 js.jirengu.com/jogoduhapo/…

 ~~本文为 无恙Iron 的原创文章，著作权归本人和饥人谷所有，转载务必注明来源~~
avatar
文章
阅读
粉丝