BFC
9.1 BFC的定义W3C 上对 BFC 的定义： 译文：浮动、绝对定位元素、不是块盒子的块容器（如 inline-blocks 、 table-cells 和table-captions ），以及 overflow 属性的值除 visible 以外的块盒，将为其内容建立新的块格式化上下文。 MDN 上对 BFC 的描述： 块格式化上下文（Block Formatting Context，B...
响应式布局
8.1 媒体查询1.媒体类型 1234567891011121314151617181920212223242526272829303132333435363738394041424344<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu...
伸缩盒模型
传统布局是指：基于传统盒状模型，主要靠： display 属性 + position 属性 + float属性。 flex 布局目前在移动端应用比较广泛，因为传统布局不能很好的呈现在移动设备上 1.伸缩容器、伸缩项目 伸缩容器： 开启了 flex 的元素，就是：伸缩容器。 给元素设置： display:flex 或 display:inline-flex ，该元素就变为了伸缩容器。 di...
多列布局
作用：专门用于实现类似于报纸的布局。 常用属性如下： column-count ：指定列数，值是数字。 column-width ：指定列宽，值是长度。 columns ：同时指定列宽和列数，复合属性；值没有数量和顺序要求。 column-gap ：设置列边距，值是长度。 column-rule-style ：设置列与列之间边框的风格，值与 border-style 一致。 column-r...
动画
5.1 基本使用第一步：定义关键帧（定义动画） 简单方式定义： 12345678910/*写法一*/@keyframes 动画名 {from {/*property1:value1*//*property2:value2*/}to {/*property1:value1*/}} 完整方式定义： 12345678910111...
过渡
4.1. transition-property作用：定义哪个属性需要过渡，只有在该属性中定义的属性（比如宽、高、颜色等）才会以有过渡 效果。 常用值： none ：不过渡任何属性。 all ：过渡所有能过渡的属性。 具体某个属性名 ，例如： width 、 heigth ，若有多个以逗号分隔。 不是所有的属性都能过渡，值为数字，或者值能转为数字的属性，都支持过渡，否则不支持过渡。 ...
变换
3.1 2D变换3.1.1 2D位移2D 位移可以改变元素的位置，具体使用方式如下： 先给元素添加 转换属性 transform 编写transform的具体值 注意点： 位移与相对定位很相似，都不脱离文档流，不会影响到其它元素。 与相对定位的区别：相对定位的百分比值，参考的是其父元素；定位的百分比值，参考的是其自身。 浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高。 t...
CSS3新增内容
2.1 新增长度单位 rem 根元素字体大小的倍数，只与根元素字体大小有关。 vw 视口宽度的百分之多少 10vw 就是视口宽度的 10% 。 vh 视口高度的百分之多少 10vh 就是视口高度的 10% 。 vmax 视口宽高中大的那个的百分之多少。（了解即可） vmin 视口宽高中小的那个的百分之多少。（了解即可） 2.2 新增选择器CSS3 新增的选择器有：动态伪类、目标伪类、语言伪...
CSS3概述
1.1 CSS3 的新特性新增了更加实用的选择器，例如：动态伪类选择器、目标伪类选择器、伪元素选择器等等。 新增了更好的视觉效果，例如：圆角、阴影、渐变等。 新增了丰富的背景效果，例如：支持多个背景图片，同时新增了若干个背景相关的属性。 新增了全新的布局方案 —— 弹性盒子。 新增了 Web 字体，可以显示用户电脑上没有安装的字体。 增强了颜色，例如： HSL 、 HSLA 、 RGBA 几...
浮动
1.浮动在最初，浮动是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一。 浮动后的特点： 🤢脱离文档流。 😊不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高。 😊不会独占一行，可以与其他元素共用一行。 😊不会 margin 合并，也不会 margin 塌陷，能够完美的设置四个方向的 margin和padding。 😊不会像行内块一...