WEB前端课程C-CSS2相关知识点(二).doc

WEB前端课程- CSS2相关知识点（二） 盒子模型：CSS+DIV布局的基本原理组成部分=内容+padding+border+margin margin外边距：有四个方向margin-left margin-right margin-top margin-bottom 合并写法：margin：一个值（代表上下左右统一）， margin两个值：上下左右， margin三个值：上左右下margin四个值:上右下左 相邻的盒子垂直margin会自动合并，取相对比较大的值 子元素垂直margin失效的解决办法： 父元素有内容（有padding也算） 父元素有边框border 父元素position:absolute 或者 postion: fixed 边框设置： 边框大小border-width 边框颜色border-color 边框线型border-style none去掉边框 分成上下左右四个方向 合并写法border:宽度颜色线型; outline是border之外的边框，设置同border padding内边距：有四个方向padding-left padding-right padding-top padding-bottom 合并写法同margin 元素实际大小=内容+padding+border（标准模式standard） 元素实际大小=设置的大小（内容,padding,border均包含在这个固定大小范围内）（怪异模式quirks） overflow溢出：当内容大小超过盒子 auto：内容超出出现滚动条 scroll：固定出现滚动条不管内容多少 visible：溢出显示（默认）hidden：溢出的部分自动隐藏（重要） overflow-x针对于水平溢出做设置 overflow-y针对于垂直溢出做设置 display属性：block块级 inline内联 inline-block内联块 none不显示（不占位隐藏） visibility显示隐藏：visible显示 hidden占位隐藏 关于元素定位： float元素浮动:none不浮动 left左浮动 right右浮动，浮动会使元素脱离正常文档输出流，子元素的浮动会导致父元素高度塌陷（具有破坏性），浮动元素默认会和上面的不浮动的元素的底部对齐 清除浮动： 方式1：clear：left清除左浮动 right清除右浮动 both清除两侧浮动，在下面的标签中显示的应用clear样式 方式2：在浮动的父元素上加overflow:hidden，就会自动把浮动元素包裹起来 方式3：在浮动的父元素上用:after动态输出内容设置清除浮动样式 伪元素（伪对象）：:after 动态在元素后面追加内容 :before动态在元素前面增加元素 块级元素内容垂直居中：把line-height设置为和height高度一致，仅适合单行文本 排版原则：从上到下，从左到右，从外到内 会计\ I T 外语\学历