weixin_47227886的博客

设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。来调整元素的中心点到页面的中心。来调整元素的中心点到页面的中心。定位到页面的中心，然后再通过。定位到页面的中心，然后再通过。margin设置为auto。，先将元素的左上角通过。来实现元素的水平居中。，先将元素的左上角通过。...

假设你现在正用一台显示设备，同时你也想把它投影到屏幕上，或者打印出来，而显示设备、屏幕投影和打印等这些媒介都有自己的特点，CSS就是为文档提供在不同媒介上展示的适配方法。 当媒体查询为真时，相关的样式表或样式规则会按照正常的级联规则被应用。 当媒体查询返回假，标签上带有媒体查询的样式表仍将被下载（只不过不会被应用）。包含了一个媒体类型和至少一个使用宽度、高度和颜色等媒体属性来限制样式表范围的表达式。CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。...

1. CSS预处理器CSS预处理器定义了一种新的语言。其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件。预处理器例如：LESS、Sass，用来预编译Sass或less，增强了css代码的复用性，还有层级、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。2.CSS后处理器C

优点：在屏幕分辨率千差万别的时代，只要将rem与屏幕分辨率关联起来就可以实现页面的整体缩放，使得在设备上的展现都统一起来了。而且现在浏览器基本都已经支持rem了，兼容性也非常的好。缺点：（1）在奇葩的设备上表现效果不太好，比如一些华为的高端机型用rem布局会出现错乱。（2）使用iframe引用也会出现问题。（3）rem在多屏幕尺寸适配上与当前两大平台的设计哲学不一致。即大屏的出现到底是为了看得又大又清楚，还是为了看的更多的问题。...

1. width:100%会使元素box的宽度等于父元素的content box的宽度。2. width:auto会使元素撑满整个父元素，margin、border、padding、content区域会自动分配水平空间。

字体系列：font-family，font-size，font-style，font-weight，font-stretch，font-size-adjust； 列表相关：list-style，list-style-image，list-style-position，list-style-type，list-style-color； 文本系列：text-indent，text-align，line-height，word-spaceing，letter-spacing，text-...

IFC:内联格式化上下文；作用：框会从包含块的顶部开始，一个接一个地水平摆放；摆放这些框的时候，它们在水平方向上的外边距、边框、内边距所占用的空间都会被考虑在内。 在垂直方向上，这些框可能会以不同形式来对齐： 水平的margin、padding、border有效，垂直无效。不能指定宽高; 行框的宽度是 由包含块和存在的浮动来决定; 行框的高度 由行高来决定 ...

概念：块级格式化上下文； BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品； 如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。原理： BFC内部元素的元素在垂直方向上的边距会发生重叠； BFC不会与浮动元素重叠； BFC是独立的容器，不会影响里面的元素，里面的元素也不会影响外面元素； 计算BFC元素高度时，浮动元素也会参与计算。 触发条件： 给元素添加浮动，浮

三者区别：属性 区别 用途 display 隐藏对象，不保留位置 下拉框菜单。鼠标经过，显示下拉菜单 visibility 隐藏对象，保留位置 使用较少 overflow 知识隐藏超出大小部分 清楚浮动。 保证盒子李米娜的内容不会超出改盒子范围。 ...

absolute：绝对定位 相对于值不为 static 的第一个父元素进行定位，也可以理解为离自己这一级元素最近的一级 position 设置为 absolute 或者 relative 的父元素的左上角为原点。首先需要找到绝对定位元素的一个 position 的值不为 static 的祖先元素，然后相对于这个祖先元素来定位。 fixed：（老 IE 不支持）固定定位。相对于浏览器窗口进行定位。 relative：相对定位。相对于其元素本身所在正常位置进行定位。...

none ：元素不显示，并从文档流中移除。block ：块元素类型。默认宽度为父元素宽度，可设置宽高，并独占一行。inline ：行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。inline-block ：行内块元素。默认宽度为内容宽度，可以设置宽高，同行显示。list-item ：像块元素类型一样显示，并添加样式列表标记。table ：他会让该元素作为块级表格来显示。inherit ：规定该元素从父元素继承 display 属性的值。...

单冒号（:）用于 CSS3 伪类；双冒号（::）用于 CSS3 伪元素。作用：格式化文档树以外的信息。是用来修饰不在文档树中的部分。比如，一句话中的第一个字母，或者是列表中的第一个元素。​伪类：用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover 来描述这个元 素的状态。伪元素：用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某 些部分设置样式。比如说，我们可

1.1 浮动规律如果浮动元素的上一个元素也是浮动，那么该元素会与上一个元素排列在同一行，如果行宽不够，后面的元素会被挤到下一行； 如果浮动元素的上一个元素不是浮动，那么该元素仍然处于上一个元素的下方，根据浮动设置在左或者在右，而其本身也脱离文档流，后边的元素也会自动往上移动到上一个文档流块元素下方为止。1.2 高度塌陷当没有制定高度的父元素中的子元素全部都浮动时，父元素中内部高度因为是普通流中的块元素撑起来的，所以这个时候父元素的高度会变为0，或者会有部分浮动元素的位置会超出父元素的高度之外。这

原因：浏览器会把inline元素间的空白字符（空格、换行、Tab等）渲染成一个空格；为了美观，我们通常是一个<li>放在一行，这导致<li>换行后产生换行字符，她变成一个空格，占用了一个字符的宽度。1. li和li之间有看不见的空白间隔怎么办？解决方法：（1）为<li>设置float:left。不足：有些容器不能设置浮动，如左右切换的焦点图等；（2）将所有<li>写在一行。不足：代码不美观；（3）将<ul>内的字符大

1.概念Css盒模型本质上是一个盒子，封装周围的Html元素；盒模型包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）2.分类Css盒模型分为：标准盒模型、怪异盒模型2.1 标准盒模型（W3C盒子模型）标准盒模型：盒子总宽/高 = width/height +padding + border + margin（即width/height只是内容高度，不包含padding和border）2.2 怪异盒模型（IE盒子模型.

1. 选择器1.1 基本选择器id选择器（#id）； 类选择器（.class）； 标签选择器（div，p）； 后代选择器（h1 p）； 相邻后代选择器（子选择器）（ul>li）； 兄弟选择器（li~a） 相邻兄弟选择器（li+a）1.2 属性选择器a[rel="external"]1.3 伪类选择器a:link 未访问的链接，把没有点击过的链接选出来； a:visited 选择点击过的链接； a:hover 选择鼠标经过的链接； a:active 选择鼠标