前端04
css样式
float
在css样式中,任何元素都可以浮动
浮动元素会生成一个块级标签,而不论它本身是何种元素
浮动的特点:
1 浮动的框可以向左或向右移动,直到它的边缘碰到包含框或另一个浮动框的边框为止
2 由于浮动框不在文档的普通流中,所有文档的普通流中的块框表现得就像浮动框不存在一样
浮动的三种值
left 向左浮动
right 向右浮动
none 默认值,不浮动
clear
clear属性规定元素的哪一侧不允许其他浮动元素
left 在左侧不允许浮动
right 在右侧不允许浮动
both 在左右两侧不允许浮动
none 默认值,左右都可以浮动
inherit 规定应该从父元素继承clear属性
clear属性只对自身起作用,而不会影响其他元素
清楚浮动:清楚浮动的副作用(父标签塌陷问题)
主要有三种方式:
固定高度
伪元素清除法
overflow:hidden
伪元素清除法(使用较多) .clearfix:after{ content:""; dispaly:block; clear:both; }
overflow溢出属性
visible:默认值。内容不会被修剪,会呈现在元素框之外
hidden:内容会被修剪,并且其余内容不可见
scroll:内容汇报修剪,但是浏览器会显示滚动条以便查看其余内容
auto:与scroll类似
inherit:规定继承父元素的overflow属性值
overflow:水平和垂直均设置
overflow-x:设置水平方向
overflow-y:设置垂直方向
定位position
static:默认值,无定位
relative:相对定位
absolute:绝对定位
fixed:固定定位
脱离文档流:绝对定位,固定定位
不脱离文档流:相对定位
z-index:设置对象的层叠顺序
设置透明度的两种方式
rgba():只针对颜色
opacity:针对背景和文本