lihaoen666的博客

CSS margin与容器尺寸元素尺寸可视尺寸- clentWidth（标准）——实线内占据尺寸- outerWidth（YY） ——虚线内margin与可视尺寸适用于没有宽度、高度的普通block水平元素只适用于水平方向尺寸margin与占据尺寸block/inline-block水平元素均适用有没有宽度/高度都适用适用于水平、垂直方向 CSS margin与百分比水平方向百

盒模型从内到外分别是 padding（内边距）、border（边框）、margin（外边距）。盒子尺寸计算公式：CSS布局基本布局：流动布局（Flow） 默认浮动布局 (Float)层模型（Layer）流动（Flow）布局块状元素都会在所处的包含元素内，自上而下按顺序垂直延伸分布。在流动模型下，内联元素都会在所处的包含元素内...

常见属性1. 颜色属性2. font-size 字体属性 font-style font-weight font-family fontt-variant3. text-decoration4. 背景属性 background-repeat background-position5. 文本属性6. 边框属性7. 列表属性

选择器样式优先权重

水平布局float等宽固定布局（float+width） float流式布局（float+width+margin-left）float自适应布局（float+width+margin-right+display）左浮动+右侧定宽（float+width+margin-left）右浮动+左侧定宽（float+width+margin-right）注意，html结构是右边的box1在前！！

border-width不支持百分比为什么？这是由语义和使用场景绝定的。边框，不会因为设备大，就按比例变大。border-width支持关键字：thin 1pxmedium（默认） 3pxthick 5px为什么默认是3px？明明1px最常用因为border-width：double至少3px才有效果。 border-style类型solid 实线dashed 虚线 dot

CSS padding与容器尺寸对于block元素总结：对于inline元素水平padding影响尺寸，垂直padding不影响。但是，会影响背景色。并且，当padding超过容器尺寸，scrollHeight会变大。使用场景： 高度可控的分割线 CSS padding 负值和百分比值负值padding不支持负值百分比值padding的百分比均是相对于宽度计算的如果利用这一特性呢？inline

概念z-index属性指定了元素及其子元素的层级顺序，通常较大z-index值得元素会覆盖较低的那一个。属性值z-index: auto； （默认值）z-index: <integer> ; （整数值）z-index: inherit ; （继承）特性支持负值；支持CSS3 animation动画；在CSS 2.1时代，需要配合定

relative && absolute对absolute的限制作用1. 限制left/top/right/bottom定位当父元素设置为relative时，absolute的left/top/right/bottom是相对于父元素的。2. z-index层级当父元素设置为relative，并且同时设置了z-index属性，里面的absolute子元素会跟着父元素显示在同一层。3. 在overf

属性值1. 线类baseline、top、middle、bottom（默认）2. 文本类text-top ， text-bottom3. 上标下标类sub、super4. 数值百分比类20px，2em，20% ...注意： 百分比值，是相对于line-height计算的。 作用前提vertical-align应用于inline水平 以及 ‘table-cell’ 元素inline水平

定义line-height，行高，两行文字基线之间的距离。什么是基线？如上图所示的红线，就是基线。 根据语言、字体不同，基线也会有所差异，汉字的基线就是底线。line-height可以让单行文本垂直居中？只是看着像是居中了。其实并没有居中！！！ line-height属性值1. line-height : normal默认由浏览器决定，且与元素font-family有关2. line-

基本属性（默认）visible ———— 照常显示 hidden ————— 隐藏 scroll —————— 出现滚动条（无论是否超出容器大小） auto —————— 超出时自动添加滚动条 inherit —————— 继承CSS3新增 overflow-x: hidden ove

浮动布局 1）固定布局 2）浮动流式布局 3）浮动自适应布局清除浮动准确来讲，应该是清除浮动带来的影响。两种方式：HTML方式： 在父容器底部加上一个块状元素，并且clear: both ; CSS方式：  1）给父元素添加clear：fix  2）给父元素添加after伪元素.clearfix:after{content: '';display: block;height: 0;ove

absolute &amp;&amp; float  前面的浮动讲到过，浮动具有包裹性和破坏性；而absolute也有这两大特性。 包裹性：    我们给容器设置了absolute属性以后，它会把内容紧紧地包裹起来。破坏性：    内容设置了absolute属性以后，父元素会发生高度塌陷。 absolute使用误区   absolute可以独立使用，...