欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS基础学习——浮动float、盒子模型

程序员文章站 2022-03-29 23:23:36
...

一、浮动

1、什么是浮动？

浮动（float）就是让块级标签不独占一行。目的（使用场景）：把块级标签元素可以排在一行上。

 

2、浮动的原理

就是让元素脱离文档流，不占用标准流。

 

3、浮动的属性

float:left：左浮动

float:right：右浮动

float:none：默认值，不浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrapper{
            width: 600px;
            margin: 0 auto;
            border: 1px solid #666;
        }
        .box1,.box2{
            width: 200px;
            height: 150px;
        }
        .box1{
            background-color: #ff0000;
        }
        .box2{
            background-color: #217aff;
        }

    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
    </div>
</body>
</html>

CSS基础学习——浮动float、盒子模型

先看一下原来的效果，现在可以添加浮动属性来查看

.box2{
   background-color: #217aff;
   float: right;
}

CSS基础学习——浮动float、盒子模型

再给box1添加浮动属性

.box1{
    background-color: #ff0000;
    float: left;
}

CSS基础学习——浮动float、盒子模型

可以看到，当添加玩浮动后，元素块也会进行移动，之前在原理处也讲过，浮动就是元素脱离文档流，不占用标准流。

如果此时再添加一个box效果又会如何：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrapper{
            width: 600px;
            margin: 0 auto;
            border: 1px solid #666;
        }
        .box1,.box2,.box3{
            width: 200px;
            height: 150px;
        }
        .box1{
            background-color: #ff0000;
            float: left;
        }
        .box2{
            background-color: #217aff;
            float: right;
        }

    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box1">box1</div><!--这里的div属于块级标签，会独占一行-->
        <div class="box2">box2</div>
        <div class="box3">box3</div>
    </div>
</body>
</html>

CSS基础学习——浮动float、盒子模型

可以看到，浮动后，后面的元素不管是块级还是行级元素，都不会显示在下一行，为了避免这一情况的发生，我们可以清除浮动

 

4、清除浮动

目的：让后面的元素自动掉到下一行。

（1）添加空标签，并设置样式
clear:left;  清除左浮动
clear:right; 清除右浮动
clear:both;  清除左右浮动
clear:none;  左右浮动都不清除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrapper{
            width: 600px;
            margin: 0 auto;
            border: 1px solid #666;
        }
        .box1,.box2,.box3{
            width: 200px;
            height: 150px;
        }
        .box1{
            background-color: #ff0000;
            float: left;
        }
        .box2{
            background-color: #217aff;
            float: right;
        }
        .clear{
            clear: both; 
        }
        .box3 {
            background-color: #58ff62;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="clear"></div>
        <div class="box3">box3</div>
    </div>


</body>
</html>

CSS基础学习——浮动float、盒子模型

（2）在要清除浮动的父级添加样式：overflow:hidden;

overflow:hidden;  超出部分隐藏，也可以用来实现清除浮动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <style>
            .wrapper{
                width: 600px;
                margin: 0 auto;
                border: 1px solid #666;
                overflow: hidden;
            }
            .box1,.box2,.box3{
                width: 200px;
                height: 150px;
            }
            .box1{
                background-color: #ff0000;
                float: left;
            }
            .box2{
                background-color: #217aff;
                float: right;
            }
            .box3 {
                background-color: #58ff62;
            }
        </style>
</head>
<body>
<div class="wrapper">
    <div class="box1">box1</div>
    <div class="box2">box2</div>

</div>
    <div class="box3">box3</div>
</body>
</html>

CSS基础学习——浮动float、盒子模型

此时需要的是将box3的div移出来，不要放在wrapper下，至于box3为什么不在box1下，也是因为box3不在wrapper下，所以个wrapper设置的样式，就不在box3身上显示

（3）在要清除浮动的父级添加伪元素，并设定样式：

父元素:after{
     content:"";
     display: block;
     clear:both;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .wrapper{
                width: 600px;
                margin: 0 auto;
                border: 1px solid #666;
            }

            .wrapper:after{
                content:"";
                display: block;
                clear:both;
            }

            .box1,.box2,.box3{
                width: 200px;
                height: 150px;
            }
            .box1{
                background-color: #ff0000;
                float: left;
            }
            .box2{
                background-color: #217aff;
                float: right;
            }
            .box3 {
                background-color: #58ff62;
            }
        </style>
    </head>



<body>
<div class="wrapper">
    <div class="box1">box1</div>
    <div class="box2">box2</div>

</div>
    <div class="box3">box3</div>
</body>
</html>

CSS基础学习——浮动float、盒子模型

效果和第二个一样，所以在开发过程中推荐使用第二个，比较方便

 

五、盒子模型

1、组成

左右规定了元素框处理元素内容（ content ）、内边距（ padding ）、边框（ border ） 和外边距（ margin ） 的方式

CSS基础学习——浮动float、盒子模型

2、介绍

（1）margin（外边距）

margin-left:左边距

margin-right:右边距

margin-top:上边距

margin-bottom:下边距

margin:可用来设置任意一个边的边距，可以带1至4个参数。

1个(apx)：表示上下左右都有这样的外边距apx

2个(apx bpx)：表示上下外边距为apx，左右外边距为bpx

3个(apx bpx cpx)：表示上外边距为apx，下外边距为cpx，左右外边距为bpx

4个(apx bpx cpx dpx)：表示上为apx,右为bpx,下为cpx,左为dpx

 

（2）padding（内边距）

与margin相同

 

（3）border

border-width : 设置边框的宽度。

border-style : 设置边框的样式。

（1）none: 默认值，无边框。

（2）solid： 定义实线边框。

（3）double 定义双实线边框。

（4）dotted`: 定义点状线边框。

（5）dashed：定义虚线边框。

border-color : 设置边框的颜色。

border 边框的简写： {width style color} ，顺序可以随便

盒子的真实尺寸如下：

盒子宽度 = width + padding左右 + border

盒子高度 = height + padding上下 + border上下

 

（4）display：用来设置元素的显示方式

display:none:不显示元素

display: block:块显示，在元素前后设置换行符。目的：将行级标签转换为块级标签（因为行级标签不识别宽高，而块级标签识别，转换后，行级标签也可以设置宽高了）

display:inline:行内显示，将块级标签转换为行级标签。

display:inline-block;将块级或行级标签转换为行内块级标签。

相关标签： CSS

上一篇： php date()函数各参数详解

下一篇： Struts2 配置单个文件或者配置多个文件

推荐阅读