浮动、定位、伪类、伪元素
浮动
浮动的作用
-
早期作用:实现图文环绕
(图片截自网课视频) -
现在作用:进行网页布局
我们现在每天浏览的网站几乎都会用到浮动。(以华为官网为例)
浮动的特点
-
浮动元素会脱离标准流,不再占用标准流位置
-
浮动元素比标准流高半个等级,可以覆盖标准流中的元素
-
浮动找浮动,下一个浮动元素会在上一个浮动元素后面左右浮动
-
浮动元素有特殊的显示效果,一行可以显示多个,可以设置宽高
标准文档流
1.定义
内联元素默认从左到右流,遇到阻碍或者宽度不够自动换行,继续按照从左到右的方式布局。块级元素单独占据一行,并按照从上到下的方式布局。
- 三种脱离标准流的方法
- 浮动
- 绝对定位
- 固定定位
3.块级元素
块级元素是垂直排列的,每个块级元素另起一行。块元素的width height margin padding都可设置。
常见的块级元素:div,p,h1~h6,ol,ul,table,form等
4.行内元素
行内元素是水平排列的,多个行内元素会排列在同一行中,直到宽度不够才会另起一行。行内元素的width height为此与内容宽高一致,从而无法设置。
常见的行内元素:span,a,img等
注:img元素可以设置宽高。
例:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
img{
width: 200px;
height: 300px;
}
</style>
</head>
<body>
<img src="./微信图片_20220417172817.png" alt="">
<img src="./微信图片_20220418231010.jpg" alt="">
</body>
</html>
代码结果:
5.行内块元素
行内块元素整体呈现为inline特征,但是其内容呈现block特征,多个行内块元素可以在一行排列,并且可以设置其宽高,边框,边距等。
常见的行内块元素:input,select等
6.相互转化
属性:display
属性值none:元素不显示
属性值block:元素转换为块级元素
属性值inline:元素转换为行内元素
属性值inline-block:元素不转换为行内块元素
例:将块级元素转换为行内元素
<!DOCTYPE html>
<html lang="en">
<head>
<style>
img{
width: 200px;
height: 300px;
}
p{
display: inline;
}
</style>
</head>
<body>
<img src="./微信图片_20220417172817.png" alt="">