HTML--CSS--浮动布局及定位布局-Toy模板网

这篇具有很好参考价值的文章主要介绍了HTML--CSS--浮动布局及定位布局。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

正常文档布局

块元素独占一行
行内元素在有多个的时候，就是从左到右排在一行
块元素包括：div,p,hr
行内元素：span,i,img

浮动布局

float
属性：
left 向左
right 向右
作用我目前看起来就是浮动元素的宽度是由内容决定的，而不是占满

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        #a
        {
            width: 300px;
            background-color: aqua;
            border: 1px solid red;
        }
        #a div
        {
            padding: 10px;
            margin: 15px;
        }
        #a1
        {
            background-color: blueviolet;
            float: left;
        }
        #a2
        {
            background-color: blue;
        }

    </style>
</head>
<body>
    <div id="a">
        <div id="a1">a1-</div>
        <div id="a2">a2-------------</div>
    </div>
</body>
</html>

效果：
HTML--CSS--浮动布局及定位布局,HTML学习,html,css,前端
但是需要注意，如果给定的宽度不够，效果会偏差：

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        #b
        {
            width: 100px;
            font-size: 10px;
            background-color: red;
        }
        #a
        {
            width: 100px;
            background-color: aqua;
            border: 1px solid red;
        }
        #a div
        {
            padding: 10px;
            margin: 15px;
        }
        #a1
        {
            background-color: blueviolet;
            float: left;
        }
        #a2
        {
            background-color: blue;
        }

    </style>
</head>
<body>
    <div id="b">100px</div>
    <div id="a">
        <div id="a1">a1-</div>
        <div id="a2">a2-</div>
    </div>
</body>
</html>

效果：
所以要注意里面字体的大小占用像素点，不然表现形式可能与预期不一致
HTML--CSS--浮动布局及定位布局,HTML学习,html,css,前端

清除浮动

clear
属性：

left
right
both

用法：.clear{clear:both;}
范例：

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        #b
        {
            width: 100px;
            font-size: 10px;
            background-color: red;
        }
        #a
        {
            width: 300px;
            background-color: aqua;
            border: 1px solid red;
        }
        #a div
        {
            padding: 10px;
            margin: 15px;
        }
        #a1
        {
            background-color: blueviolet;
            float: left;
        }
        #a2
        {
            background-color: blue;
        }
        .clear{clear:both;}
    </style>
</head>
<body>
    <div id="b">100px</div>
    <div id="a">
        <div id="a1">a1-</div>
        <div id="a2">a2-</div>
        <div id="clear"></div>
    </div>
</body>
</html>

接下来是定位布局 position

属性：

fixed 固定定位
relative 相对定位
absolute 绝对定位
static 静态定位（默认值）

固定定位 fixed

属性也是上下左右

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        #b
        {
            width: 100px;
            height: 700px;
            font-size: 10px;
            background-color: red;
        }
        #a
        {
            width: 30px;
            height: 30px;
            background-color: aqua;
            border: 1px solid red;
        }

    </style>
</head>
<body>
    <div id="b">100px</div>
    <div id="a">
        <div id="a1">a1-</div>
        <div id="a2">a2-</div>
        <div id="clear"></div>
    </div>
</body>
</html>

效果：
然后你能看到父块a无论网页如何改变，它依然处在固定位置不会改变
PS: 以后可以在网页放置回到首页等等按钮了…

相对定位 relative

属性依旧是上下左右
作用就参照点变化吧…多个块的时候，参照点从同一参照点变成依次往后推

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        #b
        {
            width: 100px;
            height: 700px;
            font-size: 10px;
            background-color: red;
        }
        #a div
        {
            width: 30px;
            height: 30px;
            background-color: aqua;
            border: 1px solid red;
        }
        #a2
        {
            position: relative;
            top: 30px;
            left: 100px;
        }

    </style>
</head>
<body>
    <div id="b">100px</div>
    <div id="a">
        <div id="a1">a1-</div>
        <div id="a2">a2-</div>
        <div id="a3">a3-</div>
    </div>
</body>
</html>

效果：
HTML--CSS--浮动布局及定位布局,HTML学习,html,css,前端

绝对定位 absolute

效果感觉跟固定定位差不多呀…

	position:absolute;
	top:xpx;
	bottom:xpx;
	left:xpx;
	right:xpx;

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        #b
        {
            width: 100px;
            height: 100px;
            font-size: 10px;
            background-color: red;
        }
        #a div
        {
            width: 30px;
            height: 30px;
            background-color: aqua;
            border: 1px solid red;
        }
        #a2
        {
            position: absolute;
            top: 30px;
            left: 100px;
        }

    </style>
</head>
<body>
    <div id="b">100px</div>
    <div id="a">
        <div id="a1">a1-</div>
        <div id="a2">a2-</div>
        <div id="a3">a3-</div>
    </div>
</body>
</html>

效果：a2独立于外面，不受排序啥的影响，按照自己的设定放置
HTML--CSS--浮动布局及定位布局,HTML学习,html,css,前端
至此，CSS基本应该算是都走完一遍了，接下来可以组合各种不一样的设定，设定个性化网页布局…文章来源地址https://www.toymoban.com/news/detail-806369.html