E:标签本身
E>N:父子标签
E+N:兄弟标签
E*N:生成指定数量的标签
E(标签内容):设置标签的内容
$:相当于一个计数变量
E[属性=属性值]:标签属性
E#id:标签ID属性
E.class:标签class属性
inline 行级元素(内联元素)
内容决定元素所占位置,不可以通过css改变宽高
包括:span、strong、em、a、del等
block 块级元素
独占一行,可以通过css改变宽高
包括:div、p、ul、li、ol、form、address等
inline-block 行级块元素
内容决定大小,可以改宽高
包括:img等
现象:垂直方向的margin,父子元素结合到一起,二者取最大值
如以下代码则会导致margin塌陷现象
.wrapper{
margin-left:100px;
margin-top:100px;
width:100px;
height:100px;
background-color:black;
}
.contect{
margin-left:50px;
margin-top:50px;
width:50px;
height:50px;
background-color:green;
}
效果图:
解决方式:触发盒子的bfc(以下方式均有弊端应看情况使用)
如何触发一个盒子的bfc:
.wrapper{
margin-left:100px;
margin-top:100px;
width:100px;
height:100px;
background-color:black;
overflow: hidden;
}
.content{
margin-left:50px;
margin-top:50px;
width:50px;
height:50px;
background-color:green
解决后效果图:
现象:两个兄弟结构的元素在垂直方向上的margin直接接触时合并为一个
解决方式:给其中一个盒子或两个盒子加上一层父级元素,并将父级元素设置为bfc,设置bfc的方法见上边第二条,margin塌陷。
注:这种方式改变了HTML结构,在实际应用中一般不解决此问题,通过改变margin-bottom的值达到目标效果。
方式:利用伪元素,注意要将伪元素设置为块级元素
例:
.wrapper::afer{
content:"";
clear:both;
display:block;
}
本文地址:https://blog.csdn.net/Bao_haha/article/details/107500389
如对本文有疑问, 点击进行留言回复!!
南宁小程序开发,挑战百日学习计划第43天(拖拉登录框的写法)
让盒子水平居中解决方法!!!---(块元素,行内元素,行内块,文本)
CSS踩坑-------transform:scale(‘数字’)
网友评论