浮动、定位、伪类、伪元素

最新推荐文章于 2023-06-28 09:58:14 发布

kkugaii

最新推荐文章于 2023-06-28 09:58:14 发布

阅读量479

点赞数

文章标签：前端 css3

本文链接：https://blog.csdn.net/kkugaii/article/details/124286209

版权

浮动、定位、伪类、伪元素

浮动
定位
伪类
伪元素
- - ：：before和：：after
  - ：：first-letter和：：first-line
总结

浮动

浮动的作用

早期作用：实现图文环绕

（图片截自网课视频）
现在作用：进行网页布局
我们现在每天浏览的网站几乎都会用到浮动。（以华为官网为例）

浮动的特点

浮动元素会脱离标准流，不再占用标准流位置
浮动元素比标准流高半个等级，可以覆盖标准流中的元素
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
浮动元素有特殊的显示效果，一行可以显示多个，可以设置宽高

标准文档流

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=

最低0.47元/天解锁文章

kkugaii

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动、定位、伪类、伪元素

浮动、定位、伪类、伪元素浮动浮动的作用浮动的特点属性及属性值清除浮动定位文档流定位浮动定位（同上浮动内容）层定位静态定位相对定位绝对定位固定定位伪类伪元素浮动浮动的作用早期作用：实现图文环绕（图片截自网课视频）现在作用：进行网页布局我们现在每天浏览的网站几乎都会用到浮动。浮动的特点1.浮动元素会脱离标准流，不再占用标准流位置2.浮动元素比标准流高半个等级，可以覆盖标准流中的元素3.浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动4.浮动元素有特殊的显示效果，一
复制链接

扫一扫