display
块级元素:独占一行
如:h1~h6,p,div,列表。。
行内元素:不独占一行
如:span,a,img,strong。。。
行内元素可以被包含在块级元素中,反之,则不可以
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
}
span {
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
<body>
<div>div块元素</div>
<span>span 1 行内元素</span>
<span>span 2 行内元素</span>
</body>
在该代码中因为div是块元素,所以它独占一整行,且设置的宽高能表现出来,而span因为是行内元素,它无法设置宽和高,文字有多少,它就多大,且不独占一行,两个span会并列在一行
display:
block 是块元素
inline 是行内元素
inline-block 是块元素,但是也可以在一行(内联)
none 将这部分消失
div{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
span {
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
运用display之后就可以进行行内元素和块元素的转换
例子:用列表,将li标签转换为inline-block,即可完成导航栏。li标签默认是垂直向下,改后变为内联,可在同一行。
float浮动
例子:
1.几张图片如下布局:
2.在其基础上添加代码display:inline-block,改成既是块元素又是行内元素。
3.然后将图片添加浮动。float:left;就能发现这三张图片脱离于原来的黑色边框独立出来了,都靠左对齐。
4.这是将文字也添加浮动,全部都改为靠右浮动的结果float:right;
以上大部分截图来源于狂神说java
父级边框塌陷的问题
clear:
clear:right; 右侧不允许有浮动元素,有就排到下面一行去
clear:left; 左侧不允许有浮动元素
clear:both;两侧不允许有浮动
clear:none; 可以有浮动
(父级边框塌陷的问题就像上面一样,虽然图片和文字写在父级标签里,但是用float之后都脱离了父级边框)
解决方案:
- 增加父级元素的高度
- 增加一个空的div标签,清除浮动(因为这个div会在其他浮动的块下面,而父级框架会将这个空的标签包含在内,以至于将浮动的标签也就包含在内了)
基本的html和css代码如下:
<div class="clear"><div>
.clear{
clear:both;
margin:0;
padding:0;
}
- overflow
在父级元素中增加一个 overflow:hidden;
- 父类添加一个伪类:after
这是事先给浮动元素的父级边框起名id=“father”
# father:after{
content:'';
display:block;
clear:both;
}
小结:
- 浮动后面加空div,但代码中应该尽量避免空div
- 设置父元素的高度,元素假设有了固定的高度就会被限制
- overflow 下拉的一些场景避免使用
- 父类添加一个伪类:after(推荐)。该方法无副作用。
对比
他们都可以调整元素是否在一行。但不同:
- display
方向不可控 - float
方向可控,但是浮动起来的话会脱离标准文档流,所以要解决父级边框塌陷的问题~