定位浮动选择器

1、选择器的优先级如何计算 基础选择器： id选择器（100）> class选择器（10）>标签选择器（1）>通配符选择器（0） 复合选择器：权重之和 2、哪些属性可以继承？ text-decoration、text-indent、text-align font-size、font-family、font-style、font-weight、line-height list-style color 3、列举常见的块级元素与行级元素，并简述它们的特性 块级元素：div、p、h1-h6等 行级元素：a、span、b、strong、i、em等 4、外边距塌陷问题及解决方案 兄弟元素的外边距塌陷 父子元素的外边距塌陷 5、如何清除浮动？ 给父元素overflow 额外标签法 类名清浮动 父元素给固定高度   定位 一、css的布局机制 正常文档流 块级元素 .clearfix::after {   content:"";   display:block;   clear:both; } .clearfix {   *zoom:1; }行级元素/行块级元素 浮动 定位：自由的摆放盒子的位置 二、定位的组成 定位是由定位模式和边偏移构成的 定位模式使用的是position属性 三、边偏移（定位的偏移属性） left/right/top/bottom属性 常用值： px | auto（初始值） | % | inherit 四、定位模式 1、静态定位 没有定位，用于取消定位时使用 不能设置偏移属性， 2、相对定位 相对于自己原来的位置进行移动的，原来位置下面的元素会按照标准流来处理原来的位置 相对定位的特点： 不脱标（不脱离正常文档流），老家留坑 相对定位的应用： 微调元素位置 与绝对定位配合使用，子绝父相 3、绝对定位 子绝父相： 给子元素设置绝对定位，给父元素设置相对定位，这时子元素的位置会相对于定位父元素的位置进行移 动 子元素定位时必须得有定位父元素，否则会一直往上找，直到html为止 绝对定位的特性： 脱离正常文档流 提升层级 设置定位后，块级元素的宽度（没有设置固定宽度的盒子，宽度自适应；如果设置了宽高，按照宽 高来显示）；行级元素支持宽高的设置 position:static; position:relative; position:absolute;4 、 固 定 定 位 固 定 定 位 是 一 种 特 殊 的 绝 对 定 位 固 定 定 位 是 相 对 于 浏 览 器 的 窗 口 进 行 定 位 的 五 、 定 位 技 巧 1 、 m a r g i n 负 值 实 现 水 平 和 垂 直 方 向 的 居 中 关 键 点： div必须得 有 宽 度 和 高 度 left和top设置50% margin-left和margin-to p：- 盒 子 的 宽 度|高 度 的 一 半 2 、 m a r g i n : a u t o 实 现 水 平 和 垂 直 居 中 关 键 点： 设置四个 方 向 的 偏 移 量 都 为 0 m a r gin：a u t o ; p o s i t i o n : f i x e d ; < s t y l e >   . w r a p {       p o s i t i o n : r e l a t i v e ;       w i d t h : 5 0 0 p x ;       h e i g h t : 5 0 0 p x ;       b a c k g r o u n d - c o l o r : p i n k ;   }   . b o x {       p o s i t i o n : a b s o l u t e ;       l e f t : 5 0 % ;       t o p : 5 0 % ;       m a r g i n - t o p : - 5 0 p x ;       w i d t h : 1 0 0 p x ;       h e i g h t : 1 0 0 p x ;       b a c k g r o u n d - c o l o r : y e l l o w ;       m a r g i n - l e f t : - 5 0 p x ;   } < / s t y l e > . w r a p {   p o s i t i o n : r e l a t i v e ;   w i d t h : 5 0 0 p x ;   h e i g h t : 5 0 0 p x ;   b a c k g r o u n d - c o l o r : p i n k ; }. b o x {   p o s i t i o n : a b s o l u t e ;   l e f t : 0 ;   r i g h t : 0 ;   t o p : 0 ;    bottom: 0;   margin: auto;   width: 100px;   height: 100px;   background-color: yellow;