HTML+CSS

垂直水平居中 绝对定位(atuo自适应) 不需要父元素确定高度和宽度 , 需要子元素存在高度和宽度 弊端 1、必须使用定位、元素脱标 2、必须给元素设置高度 flex布局 需要父元素存在高度 alig

CSS的注释 CSS代码也可以添加注释来方便阅读： CSS的注释和HTML的注释是不一样的； /* 注释内容 */ link元素 link元素是外部资源链接元素，规范了文档与外部资源的关系 link元

认识grid布局 目前对于界面布局我们已经学习了很多种方式：定位、浮动、flex布局 flex布局相对于前面的布局来说更加强大，并且目前对于我们的需求都是可以很好的完成 但是flex布局是有个以为的布

常见得移动设备 以iPhone为例 手机机型 (iPhone) 屏幕尺寸 (inch) 逻辑分辨率 (pt) 设备分辨率 (px) 缩放因子 (Scale Factor) 3G(s) 3.5 320x

CSS预处理器 CSS编写的痛点 CSS作为一种样式语言, 本身用来给HTML元素添加样式是没有问题的. 但是目前前端项目已经越来越复杂, 不再是简简单单的几行CSS就可以搞定的, 我们需要几千行甚至

[TOC] CSS属性 - vertical-align 深入理解vertical-align – line boxes 官方文档的翻译：vertical-align会影响 行内块级元素 在一个 行盒

CSS属性 - transform CSS transform属性允许你旋转，缩放，倾斜或平移给定元素。 Transform是形变的意思，transformer就是变形金刚 所以，transform对

认识flexbox Flexbox翻译为弹性盒子: 弹性盒子是一种用于按行或按列布局元素的一维布局方法 ; 元素可以膨胀以填充额外的空间, 收缩以适应更小的空间; 通常我们使用Flexbox来进行布局

认识浮动 float 属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。 float 属性最初只用于在一段文本内浮动图像, 实现文字环绕的效果; 但是早期的CSS标准中并没有提

标准流 标准流（Normal Flow） 默认情况下，元素都是按照normal flow（标准流、常规流、正常流、文档流【document flow】）进行排布 从左到右、从上到下按顺序摆放好 默认情

background-image background-image用于设置元素的背景图片 会盖在(不是覆盖)background-color的上面 如果设置了多张图片 设置的第一张图片将显示在最上面，

[TOC] 元素的隐藏 方法一: display设置为none 元素不显示出来, 并且也不占据位置, 不占据任何空间(和不存在一样); 方法二: visibility设置为hidden 设置为hidd

CSS属性的继承 CSS的某些属性具有继承性(Inherited): 继承过来的是计算值, 而不是设置值 如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性; 当然, 如

认识盒子模型 生活中得盒子模型 HTML中每个元素都是盒子模型 盒子模型（Box Model） HTML中的每一个元素都可以看做是一个盒子，如右下图所示，可以具备这4个属性 内容（content） 元

css选择器（selector） 开发中经常需要找到特定的网页元素进行设置样式 思考：如何找到特定的那个元素？ 什么是CSS选择器 按照一定的规则选出符合条件的元素，为之添加CSS样式 选择器的种类繁

text-decoration(常用) text-decoration用于设置文字的装饰线 decoration是装饰/装饰品的意思； text-decoration有如下常见取值： none:无任何

font-size font-size****决定文字的大小 常用的设置 具体数值+单位 比如100px 也可以使用em单位(不推荐)：1em代表100%，2em代表200%，0.5em代表50% 百

css属性 常见的CSS属性 必须掌握的CSS属性 在开发中90+%的时间写的都是这些属性； 不要小看这几个CSS属性，里面涉及到的概念是非常多的； 你必须了解CSS的很多特性，才能真正理解里面的每个

编写css样式 CSS这么重要，那么它的语法规则是怎么样的呢？ 声明（Declaration）一个单独的CSS规则，如 color: red; 用来指定添加的CSS样式。 属性名（Property n

[TOC] 认识css CSS表示层叠样式表 (Cascading Style Sheet,简称：CSS,又称为又称串样式列表、级联样式表、串接样式表、阶层式样式表) 是为网页添加样式的代码。 CSS