html常用的标记：html、body、ol、ul、li、h1、h2、h3、h4、h5、h6、p、th、td、dl、dt、form、span、i、em、input等等。
Css语法： 选择符{ 属性 ： 属性值； 属性 ：属性值； 属性 ： 属性值； 属性： 属性值 属性值 属性值；} 。css样式表的创建有三种分别是内联、外部和外部。选择符的类型有类型选择符、ID选择符、class选择符、群组选择符、包含选择符、通配符、伪类符、子选择符。Css属性有：文本属性（font-family、color、font-weight、font-style、text-align、text-decoration、text-indent、letter-spacing、line-height等）。列表属性（list-style）。背景属性（background-color、background-image、background-repeat、background-position、background-attachment等）。浮动float：left/right/none。
盒模型的组成：content（内容区）+padding（填充区）+border（边框区）+margin（外边界区）标准盒模型 的所占位置的组成：宽高（content）+padding+border+margin。怪异盒模型：元素的宽度：width（content+border+padding）+margin。溢出属性：overflow :visible/hidden/scroll/auto/inherit。
元素类型分类:块状元素、内联元素、内联块元素。Display属性：block、inline、list-item、none、inline-block等。
定位属性：position：static、relative、absolute、fixed、sticky。
高度自适应：
1、相对窗口自适应 html,body{height:100%;}
2、相对元素或者内容自适应
1）非浮动元素的父元素高度自适应实现方法：不设置高度，或者高度设置成 ： height:auto；通过最小高度实现高度自适应 ： min-height:300px;_height:300px;给需要高度自适应的元素添加这些属性：min-height:value; height:auto!important;height:value; 2）浮动元素的高度自适应。万能:after{content:“";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}表格： table > tr >th / td 。行分组标签<thead></thead><tbody></tbody> <tfoot></tfoot>。表格列分组：<colgroup span="value"></colgroup>caption：表格标题标签 <caption></caption>
触发BFC：1、根元素(html)。2、float属性不为none。3、position为absolute或fixed。4、display为inline-block, table-cell, table-caption, flex, inline-flex。5、overflow不为visible
过渡属性：transition。1. transition-property：检索或设置对象中的参与过渡的属性。2. transition-duration：检索或设置对象过渡的持续时间。3. transition-delay：检索或设置对象延迟过渡的时间。4. transition-timing-function：检索或设置对象中过渡的动画类型
2D transform
1、2D位移 translate() 2、2D缩放scale() 3、2D旋转让rotate() 4、2D倾斜 skew() 5、原点设置属性：transform-origin 6、backface-visibility ：隐藏被旋转的 div 元素的背面
css3 渐变：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
动画属性：animation
1、animation-name必须有 @keyframes mymove连接。2、animation-duration。3、animation-delay。4、animation-timing-function。5、animation-iteration-count 6、animation-direction 。7、animation-fill-mode 。8、animation-play-state
Css 3D
1、transform: translate3d(x , y , z);2、transform: rotate();3、transform: scale3d(); 4、transform-style：preserve-3d；5、perspective:200px; 6、perspective-origin : 7、 transform-origin : x y z ；
Css3属性
1、文本阴影属性text-shadow:10px 10px 10px red;2、盒子阴影属性box-shadow 盒子阴影：3、文本换行1）Word-wrap 2）Word-break
弹性盒
加给给父元素1、display：flex/inline-flex;2、flex-direction属性 决定主轴的方向。3、flex-wrap属性，定义子元素是否换行显示。4、 justify-content属性 定义了项目在主轴（）上的对齐方式。5、align-items属性定义侧轴方向是如何对齐。6、align-content属性定义了多根轴线的对齐方式。
添加给子元素：1、align-self属性。2、order。3、flex-grow。4、flex-shrink。5、flex-basis
多列属性
1、column-count: 分隔列数。2、column-gap：设置列与列之间的间隔大小；3、column-rule ： 添加列与列之间的边框。4、column-fill : 设置列与列之间的高度是否统一。5、column-span ： 跨列或者不夸列。6、column-width : 设置或检索对象每列的宽度
响应式@media all and (min-width:320px) and (max-width:1080px){ body { background-color:blue;}}
媒体类型：常用的有all screen;检测媒体特性的表达式：(min-width:320px) and (max-width:1080px)
移动端适配1rem = 16pxvw: 视口宽度 不管屏幕的分辨率是多大 ，都是固定的 100vw = 当前设备的宽。vh: 视口高度 不管屏幕的分辨率是多大 ，都是固定的 100vh = 当前设备的高。
实现等比例布局的两种方法
一、rem + vw
1、需要设置meta标签 2、750px 的设计稿 要在 html{font-size:26.67vw}； 3、640px 的设计稿 要在 html{font-size:31.25vw}；4、计算方式：当前元素的尺寸 / 2(dpr) / 100px = ?rem
二、flexible.js
<script src="js/flexible.js"></script>
