CSS
溢出隐藏overflow:
可分为overflow-x以及overflow-y
属性
visible 不剪切内容也不添加滚动条
hidden 不显示超过对象尺寸的内容,超出的部分隐藏掉
scroll 总是显示滚动条
auto 超出自动显示滚动条 不超出不显示
注:有定位的盒子慎用overflow:hidden;会隐藏多余部分
white space 属性设置如何处理文本中的空白符
属性
normal 默认值
pre 空白和换行会被浏览器识别
nowrap 文本不会换行 直到<br>
标签
BFC块级格式化上下文
1.内部的box会在垂直方向,一个接一个放置
2.Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻的box的margin会发生重叠
3.每一个元素的margin box的左边,与包含块border box的左边相接触
4.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素
5.BFC计算的区域不会与float box重叠
6.计算BFC的高度时,浮动元素也参与计算
触发BFC的元素
1.根元素HTML
2.float属性不为none;(left right)
3.position为absolute或fixed;
4.display为inline-block,flex;
5.overflow不为visible;(auto hidden scroll)
浮动
float:none/left/right;(脱离文档流)
会将元素转换成行内块元素
清除浮动
选择器{clear:属性值;}
left 清除左侧浮动
right 清除右侧浮动
both 清除两侧浮动(一般只用这个)
注:
banner左右溢出时给父元素relative相对定位并添加overflow:hidden;
当子元素浮动时父元素高度塌陷:
1.给父元素添加overflow:hidden;
注: 使用文本溢出属性触发了BFC
2.在浮动的子元素后面加空标签并添加clear:both;(清除浮动,打破横向排列)
3.div(塌陷的盒子):{content:"*",display:block;clear:both;}(万能清除法)
或
.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
*zoom:1;
}(兼容性问题 需要添加 i6、i7专有)
4.双伪元素清除浮动
.clearfix:before,.clearfix:after{
content:"";
display:table;(转换成块元素并一行显示 用block会分行)
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}(兼容性问题 需要添加)
外间距margin(内间距padding同理 但不能取负值且会把盒子撑大):
margin-top 外上间距
margin-right 外右间距
margin-bottom 外下间距
margin-left 外左间距
简写:
{margin:1 2 3 4}上 右 下 左
{margin:1 2 3 }上 左右 下
{margin:1 2 }上下 左右
{margin:1 }上下左右 (属性可给负值)
margin:0 auto 横向居中
注:
margin-top会传递给父元素
给最近父元素添加border-top(border-top:1px solid(实线) transparent(透明色))
给最近的父元素添加overflow:hidden;
margin外间距重叠
给下面盒子添加父元素且添加overflow:hidden;