CSS学习笔记 Day-3
注:
- 真正的两栏布局必须不能有重叠
- 正常模式下区域不能共用
- 凡是设置了
position:abolute;
float:left/right;
的,系统会自动从内部把元素转换成inline-block元素
CSS属性
-
opacity 透明度
.div{ width:100px; height:100px; opacity:0.5; background-color:#fcc; }
div中的粉色方块儿变为了半透明
-
overflow:hidden;
溢出部分隐藏
-
float 浮动
left(从左往右)/right(从右往左排列) 可以使元素站队
规则能放下一个放一个,放不下到容器下一行,不会溢出。
浮动流:
- 浮动元素产生了浮动流
所有产生了浮动流的元素,块级元素看不到他们,产生了bfc的元素和文本类属性(inline)的元素以及文本都能看到浮动元素
clear 清除浮动流
clear:both/left/right
(能使用clear清除浮动的必须为块儿级元素)
1.解决父级所包裹的浮动流
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<p class="clear"></p>
</div>
.wrapper{
border: 1px solid black;
}
.content{
float:left;
color:#fff;
background-color: pink;
width: 100px;
height: 100px;
}
.clear{
clear: both;
} */
2.利用伪元素清除浮动流
利用伪元素清除浮动流
.wrapper::after{
content: "";
clear:both;
display: block;
}
margin塌陷
-
成父子结构嵌套的元素,垂直方向的margin移动,俩元素会黏合到一起,取其最大值一块儿移动。
-
eg:
<div class="wrapper"> <div class="content"></div> </div>
*{ margin: 0; padding: 0; } .wrapper{ margin-top: 100px; margin-left: 100px; width: 100px; height: 100px; background-color: black; } .content{ margin-top: 150px; margin-left: 50px; width: 50px; height: 50px; background-color: green; }
-
解决方法:
bfc(block format context 块儿级格式化上下文)
改变一个盒子中的语法规则,触发bfc的语法规则:
-
position:absolue;
-
display:inline-block
-
float:left/right
-
oxerflow:hidden
注:兄弟结构的div在垂直结构上的margin没有排斥,会相互融合的问题,也可用bfc解决,但是不用解决,不可以随便增加html的结构。
-
伪元素
-
每一个元素中天生都带有俩个伪元素,只是自己看不到而已,可被css操作,但是没有html结构
-
选择伪元素的方法
span::before{ content:"书写的内容将展现于网页中"; }
span::after{ content:"是的,的确是这样" }
<span> 很帅 </span>
-
伪元素为行级元素line