css元素定位和浮动、元素的隐藏与显示

一、Css元素定位
position用于设置元素定位
该属性有以下值
static 默认值,采用元素默认的定位方式。
relative使元素对其原始位置进行“相对定位”。
absolute使元素根据父(祖先)父元素的定位情况进行“绝对定位”。
fixed使元素相对于浏览器窗口进行“固定定位”。
二、Css元素的浮动
1.浮动float控制
(1)该属性可以使元素脱离文档流,在父容器中进行浮动,停靠到父元素的“内容边界”或其它浮动元素的“边框”,
(2)浮动的元素会忽略元素间的“空格”,让同样具有该属性的元素“紧密”地排列在一起。
(3)该属性通常用于处理一些需要紧密排列在一起的“块级元素”,如“导航条”、“相册”,或用于处理“图文混排”等。
该属性有三个允许的值:
none 默认,元素不进行浮动。
left元素从左到右进行浮动。
right元素从右到左进行浮动。
2.注意事项
一个浮动元素会浮出文档流,若一个普通的“块级元素”内的子元素全部都浮动了,那么它的所有子元素就会全部浮出“文档流”,就等于当前块级元素无任何子元素,这时如果你没有给他显式的设置高度那么他的高度就会变为0.
3.浮动的清除
clear属性设置到父元素上,用于清除子元素浮动给他带来的影响。
它有以下值:
none:默认值,不清楚浮动影响
left:清除左浮动元素带来的影响
right:清除右浮动元素带来的影响
both:清除左右两侧浮动元素带来的影响
三、Css元素的显示与隐藏
1.元素的不透明度“opacity”
设置元素的不透明度,
(1)取值范围是“0”到“1”之间的浮点数,
(2)可以保留两位小数,如“0.3”、“0.55”,
(3)可以支持省略掉前面的“0”也就是“.3”、“.55”的写法。“0”(相当于“visibility:hidden”)表示完全透明,
(4)“1”(默认)表示完全不透明。
2.元素可见性“visibility”
设置元素“是否可见”,
注意:即使不可见,它所占据的空间也不会消失。

“visibility”属性常用值:
visible(默认)设置元素为可见的
hidden设置元素为不可见的

3.元素的显示方式“display”
none(主要)将元素设定为不显示,使元素完全地脱离“文档流”。
inline(主要)将元素设定为“行内元素”。
inline-block(主要)将元素设定为“行内块元素”。
block(主要)将元素设定为“块元素”。

猜你喜欢

转载自blog.csdn.net/weixin_43748930/article/details/84793170