DIV+CSS布局（一）

一只小红鸭

已于 2023-09-23 15:53:59 修改

阅读量1.2k

点赞数 5

文章标签： css 前端 javascript

于 2023-09-23 15:51:54 首次发布

本文链接：https://blog.csdn.net/weixin_50632313/article/details/133201258

版权

1.页面布局常用标签

    <div></div>无意义块状元素标签
    <span></span>无意义行内元素标签
    <p></p>段落标签
    <ul></ul>无序列表
    <li></li>列表项
    <a></a>超链接标签
    <img />图片标签
    <i></i>斜体标签
    <b></b>粗体标签

2.页面布局常用选择器

id选择器          #id
类选择器          .class
关系选择器        div p、div>p、div,p
伪类选择器        hover
结构性伪类选择器  E:after、E:before、E:nth-child()、E:first-child、E:last-child

3.页面布局常用属性

3.1页面布局常用属性（一）

字体属性：font-size
文本属性：text-decoration、text-align
首行缩进：text-indent
行高：line-height
宽高属性：width、height、min-height、max-height
背景属性：background
列表属性：list-style
字体颜色：color

3.2页面布局常用属性（二）

定位属性：position
布局属性：display
浮动属性：float、clear
盒子模型：border、margin、padding
圆角边框：border-radius
阴影：text-shadow、box-shadow

3.2.1浮动属性：

浮动定位是指：

将元素排除在普通流之外

元素将不在页面中占据空间

将浮动元素放置在包含框的左边或者右边

浮动元素依旧位于包含框之内

浮动元素的框可以向左或者向右移动（注意：不能向上或者向下移动，也就是没有float:top;），直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素的外边缘不会超过其父元素的内边缘
浮动元素不会互相重叠
浮动元素不会上下浮动
任何元素一旦浮动，display属性将完全失效均可以设置宽高，并且不会独占一行
语法: float:none/left/right;

给父元素div和3个子元素div设置了宽高和背景色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动属性</title>
    <style>
        #box{
            width: 600px;
            height: 600px;
            background: deeppink;
        }
        #box>div:first-child{
            width: 200px;
            height: 200px;
            background: green;
        }
        #box>div:nth-child(2){
            width: 200px;
            height: 200px;
            background: aqua;
        }
        #box>div:nth-child(3){
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="box">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

1.将绿色div设置左浮动

将绿色div设置左浮动
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动属性</title>
    <style>
        #box {
            width: 600px;
            height: 600px;
            background: deeppink;
        }

        #box>div:first-child {
            width: 200px;
            height: 200px;
            background: green;
            /* 左浮动 */
            float: left;
        }

        #box>div:nth-child(2) {
            width: 200px;
            height: 200px;
            background: aqua;
        }

        #box>div:nth-child(3) {
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>

<body>
    <div id="box">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

</html>

2.将绿色div设置右浮动

将绿色div设置右浮动
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动属性</title>
    <style>
        #box {
            width: 600px;
            height: 600px;
            background: deeppink;
        }

        #box>div:first-child {
            width: 200px;
            height: 200px;
            background: green;
            /* 右浮动 */
            float: right;
        }

        #box>div:nth-child(2) {
            width: 200px;
            height: 200px;
            background: aqua;
        }

        #box>div:nth-child(3) {
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>

<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

3.将绿色和蓝色的div设置为右浮动

将绿色和蓝色的div设置为右浮动
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动属性</title>
    <style>
        #box {
            width: 600px;
            height: 600px;
            background: deeppink;
        }

        #box>div:first-child {
            width: 200px;
            height: 200px;
            background: green;
            /* 右浮动 */
            float: right;
        }

        #box>div:nth-child(2) {
            width: 200px;
            height: 200px;
            background: aqua;
            /* 右浮动 */
            float: right;
        }

        #box>div:nth-child(3) {
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>

<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

1.将绿色和蓝色的div右浮动，并将红色div的宽和高设置为300px,证明浮动元素不占据位置，将元素排除在普通流之外

将绿色和蓝色的div右浮动，并将红色div的宽和高设置为300px,证明浮动元素不占据位置
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动属性</title>
    <style>
        #box {
            width: 600px;
            height: 600px;
            background: deeppink;
        }

        #box>div:first-child {
            width: 200px;
            height: 200px;
            background: green;
            /* 右浮动 */
            float: right;
        }

        #box>div:nth-child(2) {
            width: 200px;
            height: 200px;
            background: aqua;
            /* 右浮动 */
            float: right;
        }

        #box>div:nth-child(3) {
            width: 300px;
            height: 300px;
            background: red;
        }
    </style>
</head>

<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

2.将绿色和蓝色的div右浮动，并将红色div的宽和高设置为300px；再将红色设置为右浮动，证明浮动元素不会互相重叠

将绿色和蓝色的div右浮动，并将红色div的宽和高设置为300px；再将红色设置为右浮动，证明浮动元素不会互相重叠
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动属性</title>
    <style>
        #box {
            width: 600px;
            height: 600px;
            background: deeppink;
        }

        #box>div:first-child {
            width: 200px;
            height: 200px;
            background: green;
            /* 右浮动 */
            float: right;
        }

        #box>div:nth-child(2) {
            width: 200px;
            height: 200px;
            background: aqua;
            /* 右浮动 */
            float: right;
        }

        #box>div:nth-child(3) {
            width: 300px;
            height: 300px;
            background: red;
            /* 右浮动 */
            float: right;
        }
    </style>
</head>

<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

3.将绿色、蓝色和红色div设置右浮动

将绿色、蓝色和红色div设置右浮动
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动属性</title>
    <style>
        #box {
            width: 600px;
            height: 600px;
            background: deeppink;
        }

        #box>div:first-child {
            width: 200px;
            height: 200px;
            background: green;
            /* 右浮动 */
            float: right;
        }

        #box>div:nth-child(2) {
            width: 200px;
            height: 200px;
            background: aqua;
            /* 右浮动 */
            float: right;
        }

        #box>div:nth-child(3) {
            width: 200px;
            height: 200px;
            background: red;
            /* 右浮动 */
            float: right;
        }
    </style>
</head>

<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

1.span行内元素：没有宽高属性，并且不会独占一行。也就是说设置了宽高也没有效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动属性</title>
    <style>
        #box {
            width: 600px;
            height: 600px;
            background: deeppink;
        }

        #box>div:first-child {
            width: 200px;
            height: 200px;
            background: green;
            /* 右浮动 */
            float: right;
        }

        #box>div:nth-child(2) {
            width: 200px;
            height: 200px;
            background: aqua;
            /* 右浮动 */
            float: right;
        }

        #box>div:nth-child(3) {
            width: 200px;
            height: 200px;
            background: red;
            /* 右浮动 */
            float: right;
        }
        .span1{
            background: yellow;
            width: 200px;
            height: 200px;
        }
        .span2{
            background: palegreen;
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <span class="span1">我是span</span>
    <span class="span2">我是span</span>
</body>

</html>

2.span行内元素：没有宽高属性，并且不会独占一行。也就是说设置了宽高也没有效果。但是任何元素一旦浮动，display属性将完全失效均可以设置宽高，并且不会独占一行

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动属性</title>
    <style>
        #box {
            width: 600px;
            height: 600px;
            background: deeppink;
        }

        #box>div:first-child {
            width: 200px;
            height: 200px;
            background: green;
            /* 右浮动 */
            float: right;
        }

        #box>div:nth-child(2) {
            width: 200px;
            height: 200px;
            background: aqua;
            /* 右浮动 */
            float: right;
        }

        #box>div:nth-child(3) {
            width: 200px;
            height: 200px;
            background: red;
            /* 右浮动 */
            float: right;
        }
        .span1{
            background: yellow;
            width: 200px;
            height: 200px;
            float: left;
        }
        .span2{
            background: palegreen;
            width: 200px;
            height: 200px;
            float: left;
        }
    </style>
</head>

<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <span class="span1">我是span</span>
    <span class="span2">我是span</span>
</body>

</html>

1.当父元素div不设置宽高且所有元素都不设置浮动时，父元素div会感知子元素的宽高，所以下面例子中，div的高为子元素的总高，又因为div是独占一行的，所以下面例子中div的宽度是满宽。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动属性</title>
    <style>
        #box {
            /* width: 600px;
            height: 600px; */
            background: deeppink;
        }

        #box>div:first-child {
            width: 200px;
            height: 200px;
            background: green;
            /* 右浮动 */
            /* float: right; */
        }

        #box>div:nth-child(2) {
            width: 200px;
            height: 200px;
            background: aqua;
            /* 右浮动 */
            /* float: right; */
        }

        #box>div:nth-child(3) {
            width: 200px;
            height: 200px;
            background: red;
            /* 右浮动 */
            /* float: right; */
        }
    </style>
</head>

<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

2.当父元素div不设置宽高，绿色盒子右浮动时

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动属性</title>
    <style>
        #box {
            /* width: 600px;
            height: 600px; */
            background: deeppink;
        }

        #box>div:first-child {
            width: 200px;
            height: 200px;
            background: green;
            /* 右浮动 */
            float: right;
        }

        #box>div:nth-child(2) {
            width: 200px;
            height: 200px;
            background: aqua;
            /* 右浮动 */
            /* float: right; */
        }

        #box>div:nth-child(3) {
            width: 200px;
            height: 200px;
            background: red;
            /* 右浮动 */
            /* float: right; */
        }
    </style>
</head>

<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

3.当父元素div不设置宽高，绿色盒子和蓝色右浮动时

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动属性</title>
    <style>
        #box {
            /* width: 600px;
            height: 600px; */
            background: deeppink;
        }

        #box>div:first-child {
            width: 200px;
            height: 200px;
            background: green;
            /* 右浮动 */
            float: right;
        }

        #box>div:nth-child(2) {
            width: 200px;
            height: 200px;
            background: aqua;
            /* 右浮动 */
            float: right;
        }

        #box>div:nth-child(3) {
            width: 200px;
            height: 200px;
            background: red;
            /* 右浮动 */
            /* float: right; */
        }
    </style>
</head>

<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

4.当父元素div不设置宽高，绿色、蓝色和红色盒子都右浮动时

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动属性</title>
    <style>
        #box {
            /* width: 600px;
            height: 600px; */
            background: deeppink;
        }

        #box>div:first-child {
            width: 200px;
            height: 200px;
            background: green;
            /* 右浮动 */
            float: right;
        }

        #box>div:nth-child(2) {
            width: 200px;
            height: 200px;
            background: aqua;
            /* 右浮动 */
            float: right;
        }

        #box>div:nth-child(3) {
            width: 200px;
            height: 200px;
            background: red;
            /* 右浮动 */
            float: right;
        }
    </style>
</head>

<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

5.在父元素div不设置宽高的情况下，让父元素可以感知子类的高度。可以设置overflow:hidden

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动属性</title>
    <style>
        #box {
            /* width: 600px;
            height: 600px; */
            background: deeppink;
            /* .在父元素div不设置宽高的情况下，
            让父元素可以感知子类的高度。可以设置overflow:hidden */
            overflow: hidden;
        }

        #box>div:first-child {
            width: 200px;
            height: 200px;
            background: green;
            /* 右浮动 */
            float: right;
        }

        #box>div:nth-child(2) {
            width: 200px;
            height: 200px;
            background: aqua;
            /* 右浮动 */
            float: right;
        }

        #box>div:nth-child(3) {
            width: 200px;
            height: 200px;
            background: red;
            /* 右浮动 */
            float: right;
        }
    </style>
</head>

<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

6.在父元素div不设置宽高的情况下，让父元素可以感知子类的高度。也可以给父元素div设置浮动。此时父元素可以感知子类高度，看不到父元素只是因为被子元素盖住了。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动属性</title>
    <style>
        #box {
            /* width: 600px;
            height: 600px; */
            background: deeppink;
            /*下面第一个截图，是设置左浮动*/
            float: left;
            /*下面第一个截图，是设置右浮动*/
            /*float: right;*/
        }

        #box>div:first-child {
            width: 200px;
            height: 200px;
            background: green;
            /* 右浮动 */
            float: right;
        }

        #box>div:nth-child(2) {
            width: 200px;
            height: 200px;
            background: aqua;
            /* 右浮动 */
            float: right;
        }

        #box>div:nth-child(3) {
            width: 200px;
            height: 200px;
            background: red;
            /* 右浮动 */
            float: right;
        }
    </style>
</head>

<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

7.在父元素div不设置宽高的情况下，让父元素可以感知子类的高度。也可以给父元素div设置浮动。这个例子为了对比6，再添加了第4个子元素，以证明父元素的存在。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动属性</title>
    <style>
        #box {
            /* width: 600px;
            height: 600px; */
            background: deeppink;
            float: right;
        }

        #box>div:first-child {
            width: 200px;
            height: 200px;
            background: green;
            /* 右浮动 */
            float: right;
        }

        #box>div:nth-child(2) {
            width: 200px;
            height: 200px;
            background: aqua;
            /* 右浮动 */
            float: right;
        }

        #box>div:nth-child(3) {
            width: 200px;
            height: 200px;
            background: red;
            /* 右浮动 */
            float: right;
        }

        #box>div:last-child{
            width: 300px;
            height: 300px;
            background-color: blue;
            float: left;
        }
    </style>
</head>

<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>

</html>

3.2.2CSS清除浮动（！）

清除浮动是为了抵消其他元素浮动对当前元素产生的影响
属性：clear
值：left、right、both
清除浮动常用的方式：

1.结尾处加空div标签clear:both(或在下一个元素上加clear:both)

2.浮动元素的父级div定义overflow:hidden

3.浮动元素的父元素定宽高

clear:both实现清除浮动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动属性</title>
    <style>
        #box {
            /* width: 600px;
            height: 600px; */
            background: deeppink;
            float: right;
        }

        #box>div:first-child {
            width: 200px;
            height: 200px;
            background: green;
            /* 右浮动 */
            float: right;
        }

        #box>div:nth-child(2) {
            width: 200px;
            height: 200px;
            background: aqua;
            /* 右浮动 */
            float: right;
        }

        #box>div:nth-child(3) {
            width: 200px;
            height: 200px;
            background: red;
            /* 右浮动 */
            float: right;
        }

        #box>div:last-child{
            width: 300px;
            height: 300px;
            background-color: blue;
            /* 清除浮动-
            假装其他元素没有浮动的前提下，当前元素该在哪个位置就在哪个位置 */
            clear: both;
        }
    </style>
</head>

<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>

</html>

一只小红鸭

关注

5
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
DIV+CSS布局（一）

1.当父元素div不设置宽高且所有元素都不设置浮动时，父元素div会感知子元素的宽高，所以下面例子中，div的高为子元素的总高，又因为div是独占一行的，所以下面例子中div的宽度是满宽。6.在父元素div不设置宽高的情况下，让父元素可以感知子类的高度。1.将绿色和蓝色的div右浮动，并将红色div的宽和高设置为300px,证明浮动元素不占据位置，将元素排除在普通流之外。5.在父元素div不设置宽高的情况下，让父元素可以感知子类的高度。7.在父元素div不设置宽高的情况下，让父元素可以感知子类的高度。
复制链接

扫一扫