web学习记录4
外边距
margin 可以设负值 auto 最大值
垂直方向 相邻 子元素的设定会影响父元素
浏览器默认值 *{}去除默认样式
内联元素 垂直内边不距影响布局 水平内边距影响布局
边框 边框
不支持垂直外边距 外边距 不会重叠,求和
display inline 内联 block 块 inline-block none
visibility visible hidden
overflow visible hidden scroll aoto
文档流
元素在文档流中的特点 块元素 独占一行 自上向下 宽默认为父元素的100% 高度被内容撑开
内联元素 从左向右 排满换行 宽都是被内容撑开
浮动 float left right 不会盖住文字 块元素浮动后宽高是被内容撑开 内联浮动后会变成块元素
简单布局
高度塌陷的问题 子元素浮动导致父元素的宽塌陷
BFC属性 父元素外边距不跟子元素重叠 不会被浮动元素覆盖 可以包含浮动的子元素
开启BFC 设置元素浮动 设置元素绝对定位 设置元素为inline-block 设置overflow为一个非visible的值(auto,hidden)
IE6以及以下的浏览器不支持(haslayout) 设置zoom的值为1 设置宽度
清除浮动 clear none left right both
解决高度塌陷2 添加一个空白的div 通过CSS增加.clearfix:after{content" " display:block clear:both} 添加一个空白的块元素(推荐) IE6不支持 需增加clearfix{zoom:1;}