css_8_display_伪类对象_浮动

display

display属性值

属性	作用
display:none；	元素被隐藏，元素在页面不占位置

===透明隐藏会占位置===
display:none;   
opacity:0;


===设置边距也会占位置===
display:none;    
margin:100px;

属性值	作用
display：block	将元素转为块级元素
display：inline	将元素转为行间元素
display：inline-block	将元素转为行内块元素

行内元素

1. 行间元素不会独占一行
2. 行间元素不能设置宽高，它的宽高由内容撑开
3. 行间元素不支持设置上下外边距
4. 行级元素设置的上下内边距会与其他的元素重叠

块级元素

1. 块级元素会独占一行
2. 块级元素可以设置宽高
3. 块级元素默认宽度占一行，默认高度为0但可以由内容撑开
4. 块级元素如果设置高度，则高度被固定死，内容有可能会超出显示范围

行内块元素

1. 不会独占一行
2. 可以设置宽高，如果不设置宽高则有内容撑开
3. 可以设置上下外边距

伪类对象

伪类对象会在页面作为一个伪元素，显示出来

<h1>
    xxxx
</h1>

/*
	::before  在内容的最前端显示
*/

h1::before{
    content:"haha";/* 内容 */
    color:red; /* 给haha设置为红色 */
}

/*
	::after  在内容的最末端显示
*/

h1::after{
    content:"对对对";/* 内容 */
    color:red; /* 给对对对设置为红色 */
}

注意

1. 伪类对象里面必须有content属性，但可以为空字符串
2. 伪类对象默认可认为为一个行内元素，但可以通过display转换

浮动

float

1. 如果想让块元素在一行显示可以添加浮动
2. 只有左右浮动
3. 浮动元素从右往左运动，碰到父级元素边界或者其他浮动元素时就停下来
4. 浮动可以把元素变成行内块元素
5. 浮动会浮起来，脱离文档流（文字会挡在外面）

清除浮动

第一种方式(重新添加一个不显示的元素清除上一个元素的浮动影响)

div{
    clear：left；/* 清除上一个元素的左浮动的影响 */
    clear：right；/* 清除上一个元素的右浮动的影响 */
    clear：both；/* 清除上一个元素的左右浮动的影响 */
}

清浮动主要是因为要解决子元素浮动引起的父元素高度撑不开

Ps:用了浮动的地方，就要清除，不然可能导致页面结构出现混乱

第二种方式(利用伪类==::after==)

#box::after{
	content:"";/* 伪类必须有content */
    clear:both;/* 清除上一个元素的左右浮动影响 */
    display:block;/* 由于伪类元素是行内元素 */
}

Ps：css3伪类对象前用两个冒号(::after,::before)用于区分伪类选择器:hover,但也可以只有一个冒号