web前端css之盒子模型，浮动，定位

程序员文章站 2022-03-29 20:00:17

...

1、ul去除自带的样式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        ul {
            list-style-type: none;   /*去除前面的点之类的*/
            padding-left: 0;   /*到边框左侧的边距*/
        }

    </style>
</head>
<body>

<ul>
    <li>书籍1</li>
    <li>书籍2</li>
    <li>书籍3</li>
    <li>书籍4</li>
    <li>书籍5</li>
</ul>
</body>

原来的有前面的样式及缩进：

web前端css之盒子模型，浮动，定位

去除后的效果：

web前端css之盒子模型，浮动，定位

2、盒子模型

margin：用于控制元素与元素之间的距离。

padding：内填充，用于控制内容与边框之间的距离

border：边框，是内容外的边框

content：内容，显示文本和图像

web前端css之盒子模型，浮动，定位

关于padding、margin、border的具体用法见如下代码：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*去除body体内容到页面的边距*/
        body {
            margin-top: 0;
            margin-left: 0;
            margin-right: 0;
            margin-bottom: 0;
        }
        .c1 {
            width: 100px;
            height: 100px;
            border: 3px solid red;
            /*下面内容距离20像素*/
            /*margin-bottom: 20px;*/
            margin: 10px 20px;  /*第一个参数是上下边距，第二个参数是左右*/
        }
        .c2 {
            width: 100px;
            height: 100px;
            /*加实线边框*/
            border: 3px solid green;
            margin-top: 30px;
            margin-left: 20px;
        }
        .c3 {
            width: 20px;
            height: 20px;
            border: 3px solid black;
            /*margin: 10px 20px 30px 40px;  !*上右下左*!*/
            margin: 0 auto;  /*第一个参数是上下，第二个是左右，auto是自动调节*/
        }
        .c4 {
            width: 200px;
            height: 200px;
            border: 3px solid green;
            /*padding-left: 20px;  内容距离左边*/
            /*padding-top: 50px;   内容距离顶部*/
            /*padding: 10px 20px 30px 40px;  !*上右下左*!*/
            /*padding: 10px 20px;  第一个参数是上下，第二个是左右*/
            /*padding: 10px 20px 30px; 第一个用于上，第二个是左右，第三个是下*/
            padding: 60px;  /*只提供一个用于四边*/
        }
    </style>
</head>
<body>

<div class="c1">
    <div class="c3"></div>
</div>
<div class="c2">div</div>

<div class="c4">div</div>

</body>

效果：

web前端css之盒子模型，浮动，定位

3、浮动：浮动元素会生成一个块级框

具体的浮动过程及其注意点

body内代码：

<body>

<div id="d1">
    <div class="c1"></div>
    <div class="c2"></div>
</div>

</body>

正常布局：

body {
            margin: 0;
        }
        #d1 {
            border: 5px solid black;
        }
        .c1 {
            width: 50px;
            height: 50px;
            background-color: red;
     
        }
        .c2 {
            width: 50px;
            height: 50px;
            background-color: green;
         
        }

效果：

web前端css之盒子模型，浮动，定位

想要这两个div在同一行，我们会想到之前的display，可以把块级标签变成具有行内标签的特点：

    body {
            margin: 0;
        }
        #d1 {
            border: 5px solid black;
        }
        .c1 {
            width: 50px;
            height: 50px;
            background-color: red;
            display: inline-block;
        }
        .c2 {
            width: 50px;
            height: 50px;
            background-color: green;
            display: inline-block;
        }

效果：

web前端css之盒子模型，浮动，定位

可以看到中间还是有一段空白，其实最方便的还是浮动布局，如下：

    body {
            margin: 0;
        }
        
        .c1 {
            width: 50px;
            height: 50px;
            background-color: red;
            float: left;
        }
        .c2 {
            width: 50px;
            height: 50px;
            background-color: green;
            float: left;
        }

效果：

web前端css之盒子模型，浮动，定位

浮动页面布局：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        .c1 {
            height: 1000px;
            width: 20%;
            float: left;
            background-color: red;
        }
        .c2 {
            height: 1000px;
            width: 80%;
            float: right;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>

效果：页面铺满，二八分

web前端css之盒子模型，浮动，定位

float的三个浮动取值：

left：向左浮动

right：向右浮动

none：默认值，不浮动

浮动带来的影响：

父标签的塌陷问题（脱离文档流），没有给父标签继承clearfix的时候，外边框会塌陷，也就是无法包满所有的元素。解决的方法就是清除浮动的伪元素清除法：

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        .c1 {
            border: 3px solid black;
        }
        .c2 {
            width: 80px;
            height: 80px;
            background-color: red;
            float: left;
        }
        .c3 {
            width: 80px;
            height: 80px;
            background-color: green;
            float: left;
        }
        /*.c4 {*/
            /*clear: left; !*规定标签的左边不能有浮动的元素*!*/
        /*}*/
        .clearfix:after {
            content: '';
            clear: both;
            display: block;
        }
        .c4 {
            width: 40px;
            height: 40px;
            background-color: tomato;
        }
    </style>
</head>
<body>
<div class="c1 clearfix">
    <span class="c4">span</span>
    <div class="c2"></div>
    <div class="c3"></div>
</div>
</body>

效果：

web前端css之盒子模型，浮动，定位

4、overflow：溢出

文本内容超出框体大小会溢出。

web前端css之盒子模型，浮动，定位

这时就需要用到overflow属性来处理，overflow属性如下;

overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向）

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

div {
            height: 50px;
            width: 50px;
            border: 3px solid rebeccapurple;
            overflow: scroll;
        }

将overflow设为scroll后，效果如下：

web前端css之盒子模型，浮动，定位

5、圆形头像示例

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background-color: darkgray;
        }
        .c1 {
            width: 100px;
            height: 100px;
            border: 5px solid white;
            border-radius: 50%;
            overflow: hidden;
        }
        img {
            width: 100%;
        }
    </style>
</head>
<body>
<div class="c1">
    <img src="1.png" alt="">
</div>
</body>

效果：

web前端css之盒子模型，浮动，定位

6、定位

相对定位:相对于标签本身原来的位置
绝对定位:相对于已经定位过的父标签(小米购物车弹框)
固定定位:相对于浏览器窗口固定在某一个位置(例如回到顶部按钮)

注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        .c1 {
            width: 100px;
            height: 100px;
            background-color: red;
            top: 100px;
            left: 100px;

        }
        .c2 {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>

<div class="c1"></div>
<div class="c2"></div>

</body>

原始效果：

web前端css之盒子模型，浮动，定位

给c1类中加一条相对定位，相对定位，不脱离文档流，即它原来的位置还保留，不会被其他标签填补

position: relative;

效果：

web前端css之盒子模型，浮动，定位

绝对定位：脱离文档流

position: absolute;

效果：

web前端css之盒子模型，浮动，定位

固定定位：脱离文档流

position: fixed;

效果：

web前端css之盒子模型，浮动，定位

绝对定位示例2：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            width: 200px;
            height: 100px;
            background-color: #FF6800;
            position: relative;
        }
        .c2 {
            height: 200px;
            width: 400px;
            background-color: pink;
            position: absolute;
            top: 50px;
            left: 100px;
        }
        .c3 {
            height: 50px;
            width: 50px;
            background-color: black;
        }
    </style>
</head>
<body>

<div class="c1">购物车
    <div class="c2">购物车里什么宝贝都没有！</div>
    <div class="c3"></div>
</div>

</body>

效果：

web前端css之盒子模型，浮动，定位

固定定位示例2：

右下角固定按钮返回顶部

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            border: 3px solid black;
            width: 80px;
            height: 80px;
            position: fixed;
            right: 20px;
            bottom: 20px;
            padding: 10px;
        }
        .c2 {
            height: 4000px;
        }
        .c3 {
            width: 80px;
            height: 80px;
            background-color: red;
        }
        .c4 {
            width: 80px;
            height: 80px;
            background-color: yellow;
        }
    </style>
</head>
<body>

<div class="c3"></div>
<div class="c1"><a href="#">点我返回</a></div>

<div class="c4"></div>
<div class="c2"></div>

</body>

7、模态框

z-index：设置对象的层叠顺序

z-index 值表示谁压着谁，数值大的压盖住数值小的，
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。

自定义一个模态框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义模态框</title>
    <style>
        .c2{
            background-color: rgba(128,128,128,0.3);
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 999;
        }
        .c3 {
            width: 200px;
            height: 50px;
            background-color: white;
            position: fixed;
            top: 50%;
            left: 50%;
            z-index: 1000;
            margin-top: -25px;
            margin-left: -100px;
        }
    </style>
</head>
<body>

<div class="c1">你看那人，好像一条狗啊</div>
<div class="c2"></div>
<div class="c3"></div>

</body>
</html>

c3的z-index值大于c2，所以，c3压在c2上面

效果：

web前端css之盒子模型，浮动，定位

8、透明度参数的区别

opacity：用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。针对的是颜色和文字

rgba()：也可定义透明效果，但是针对的是颜色

web前端css之盒子模型，浮动，定位

9、顶部导航菜单示例

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>li标签的float示例</title>
  <style>
    /*清除浏览器默认外边距和内填充*/
    * {
      margin: 0;
      padding: 0;
    }
    a {
      text-decoration: none; /*去除a标签默认的下划线*/
    }

    .nav {
      background-color: black;
      height: 40px;
      width: 100%;
      position: fixed;
      top: 0;
    }

    ul {
      list-style-type: none; /*删除列表默认的圆点样式*/
      margin: 0; /*删除列表默认的外边距*/
      padding: 0; /*删除列表默认的内填充*/
    }
    /*li元素向左浮动*/
    li {
      float: left;
    }

    li > a {
      display: block; /*让链接显示为块级标签*/
      padding: 0 15px; /*设置左右各15像素的填充*/
      color: #b0b0b0; /*设置字体颜色*/
      line-height: 40px; /*设置行高*/
    }
    /*鼠标移上去颜色变白*/
    li > a:hover {
      color: #fff;
    }

    /*清除浮动 解决父级塌陷问题*/
    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }
  </style>
</head>
<body>
<!-- 顶部导航栏 开始 -->
<div class="nav">
  <ul class="clearfix">
    <li><a href="">玉米商城</a></li>
    <li><a href="">MIUI</a></li>
    <li><a href="">ioT</a></li>
    <li><a href="">云服务</a></li>
    <li><a href="">水滴</a></li>
    <li><a href="">金融</a></li>
    <li><a href="">优品</a></li>
  </ul>
</div>
<!-- 顶部导航栏 结束 -->
</body>
</html>

效果：

web前端css之盒子模型，浮动，定位

10、搭建博客页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>shj的个人博客</title>
    <link rel="stylesheet" href="my.css">
</head>
<body>
<!--页面左边-->
<div class="blog-left">
    <div class="blog-avatar">
        <img src="1.png" alt="">
    </div>
    <div class="blog-title">
        shj的个人博客
    </div>
    <div class="blog-info">
        <p>这个人很帅，帅的什么都没有留下</p>
    </div>
    <div class="blog-link">
        <ul>
            <li><a href="http://www.baidu.com" target="_blank">关于我</a></li>
            <li><a href="https://blog.csdn.net/weixin_40406241" target="_blank">csdn博客</a></li>
            <li><a href="https://github.com/BigMasterSun" target="_blank">github</a></li>
        </ul>
    </div>
    <div class="blog-tag">
        <ul>
            <li><a href="">Python</a></li>
            <li><a href="">Java</a></li>
            <li><a href="">JavaScript</a></li>
        </ul>
    </div>
</div>
<!--页面右边-->
<div class="blog-right">
    <div class="article-list">
        <div class="article-title">
            <span class="title">震惊！！！某刘姓青年越狱...</span>
            <span class="date">2019-05-30</span>
        </div>
        <div class="article-body">
            <p>某刘姓青年越狱后竟然干起了游戏主播，不像以前一样混日子了，这个社会不会原谅犯过罪的人，但是烂人也要改过自新，加油！来日可期！</p>
        </div>
        <div class="article-bottom">
            <span>#Python</span>
            <span>#Javascript</span>
        </div>
    </div>
    <div class="article-list">
        <div class="article-title">
            <span class="title">中美贸易战插曲</span>
            <span class="date">2019-05-30</span>
        </div>
        <div class="article-body">
            <p>美国女主播日前恶意造谣抹黑中国，CGTN主持人刘欣女士对其言论加以反驳，双方约定于5月30日辩论孰是孰非！让我们拭目以待！</p>
        </div>
        <div class="article-bottom">
            <span>#Python</span>
            <span>#Javascript</span>
        </div>
    </div>
    <div class="article-list">
        <div class="article-title">
            <span class="title">震惊！！！某刘姓青年竟然...</span>
            <span class="date">2019-05-30</span>
        </div>
        <div class="article-body">
            <p>近日有网友爆料，每天都有人在厕所吃东西，舀马桶里的水喝，到底是谁呢？经过了解，原来是一个天生残疾的刘姓青年，我们一定要关爱残障人士！</p>
        </div>
        <div class="article-bottom">
            <span>#Python</span>
            <span>#Javascript</span>
        </div>
    </div>
    <div class="article-list">
        <div class="article-title">
            <span class="title">刘姓青年厕所吃东西后续</span>
            <span class="date">2019-05-30</span>
        </div>
        <div class="article-body">
            <p>在上次报到了刘姓青年的生活后，社会各界人士伸出援助之手，脑残无情人有情，大家都尽力帮他，有网友表示想领养他去自家厕所，因为自家厕所的好！</p>
        </div>
        <div class="article-bottom">
            <span>#Python</span>
            <span>#Javascript</span>
        </div>
    </div>
    <div class="article-list">
        <div class="article-title">
            <span class="title">中国70周年庆典</span>
            <span class="date">2019-05-30</span>
        </div>
        <div class="article-body">
            <p>*七十周年庆典即将到来，今年也是中国最重要的一年，完成了很多重要的大事，中华复兴，只在眼前！</p>
        </div>
        <div class="article-bottom">
            <span>#Python</span>
            <span>#Javascript</span>
        </div>
    </div>
    <div class="article-list">
        <div class="article-title">
            <span class="title">震惊！！！某刘姓青年越狱...</span>
            <span class="date">2019-05-30</span>
        </div>
        <div class="article-body">
            <p>某刘姓青年越狱后竟然干起了游戏主播，不像以前一样混日子了，这个社会不会原谅犯过罪的人，但是烂人也要改过自新，加油！来日可期！</p>
        </div>
        <div class="article-bottom">
            <span>#Python</span>
            <span>#Javascript</span>
        </div>
    </div>
    <div class="article-list">
        <div class="article-title">
            <span class="title">震惊！！！某刘姓青年越狱...</span>
            <span class="date">2019-05-30</span>
        </div>
        <div class="article-body">
            <p>某刘姓青年越狱后竟然干起了游戏主播，不像以前一样混日子了，这个社会不会原谅犯过罪的人，但是烂人也要改过自新，加油！来日可期！</p>
        </div>
        <div class="article-bottom">
            <span>#Python</span>
            <span>#Javascript</span>
        </div>
    </div>
    <div class="article-list">
        <div class="article-title">
            <span class="title">震惊！！！某刘姓青年越狱...</span>
            <span class="date">2019-05-30</span>
        </div>
        <div class="article-body">
            <p>某刘姓青年越狱后竟然干起了游戏主播，不像以前一样混日子了，这个社会不会原谅犯过罪的人，但是烂人也要改过自新，加油！来日可期！</p>
        </div>
        <div class="article-bottom">
            <span>#Python</span>
            <span>#Javascript</span>
        </div>
    </div>
    <div class="article-list">
        <div class="article-title">
            <span class="title">震惊！！！某刘姓青年越狱...</span>
            <span class="date">2019-05-30</span>
        </div>
        <div class="article-body">
            <p>某刘姓青年越狱后竟然干起了游戏主播，不像以前一样混日子了，这个社会不会原谅犯过罪的人，但是烂人也要改过自新，加油！来日可期！</p>
        </div>
        <div class="article-bottom">
            <span>#Python</span>
            <span>#Javascript</span>
        </div>
    </div>
    <div class="article-list">
        <div class="article-title">
            <span class="title">震惊！！！某刘姓青年越狱...</span>
            <span class="date">2019-05-30</span>
        </div>
        <div class="article-body">
            <p>某刘姓青年越狱后竟然干起了游戏主播，不像以前一样混日子了，这个社会不会原谅犯过罪的人，但是烂人也要改过自新，加油！来日可期！</p>
        </div>
        <div class="article-bottom">
            <span>#Python</span>
            <span>#Javascript</span>
        </div>
    </div>
    <div class="c1"><a href="#">返回顶部</a></div>
</div>
</body>
</html>

外部css代码：

/*通用样式*/
body {
    margin: 0;
    background-color: #f0f0f0;
    background: url("3.gif");
}
a {
    text-decoration: none;
}
ul {
    list-style-type: none;
    padding-left: 0;
}
.clearfix{
    content: "";
    display: block;
    clear: both;
}
/*博客左侧样式*/
.blog-left{
    float: left;
    position: fixed;
    left: 0;
    width: 20%;
    height: 100%;
    /*background-color: #4d4c4c;*/
}
.blog-avatar {
    width: 150px;
    height: 150px;
    border: 5px solid white;
    border-radius: 50%;
    margin: 20px auto;
    overflow: hidden;
}
img {
    width: 100%;
}
.blog-title{
    color: black;
    font-size: 30px;
    font-family: 华文隶书;
    font-weight: bolder;
    text-align: center;
}
.blog-info {
    color: black;
    font-family: 华文行楷;
    font-size: 16px;
    background-color: rgba(240,240,240,0.3);
    text-align: center;
}
.blog-link a,.blog-tag a {
    color: black;
}
.blog-link a:hover, .blog-tag a:hover{
    background-color: rgba(240,240,240,0.3);
    color: red;
}
.blog-link ul,.blog-tag ul{
    background-color: rgba(240,240,240,0.3);
    text-align: center;
    margin-top: 60px;
}
/*博客右侧样式*/
.blog-right{
    float: right;
    width: 80%;

}
.article-list{
    background-color: rgba(240,240,240,0.5);
    margin: 20px 40px 20px 10px;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.4);  /*框体阴影*/
}
.article-title{
    border-left: 5px solid red;
}
.title{
    font-size: 36px;
    margin-left: 10px;
}
.date{
    float: right;
    font-size: 18px;
    margin-top: 20px;
    margin-right: 10px;
}
.article-body{
    border-bottom: 2px solid black;  /*下划线*/
}
.article-body p{
    font-size: 18px;
    text-indent: 18px;  /*缩进18px*/
}
.article-bottom span{
    margin-left: 20px;
}
.c1{
    border: 3px solid darkgray;
    width: 40px;
    height: 40px;
    position: fixed;
    right: 10px;
    bottom: 10px;
    padding: 10px;
    opacity: 0.3;
}
.c1 a:hover{
    color: black;
}
.c1 a:active{
    color: blue;
}

效果：

web前端css之盒子模型，浮动，定位

上一篇： CSS浮动与清除浮动

下一篇： CSS基础-清除浮动 16

web前端css之盒子模型，浮动，定位

1、ul去除自带的样式

2、盒子模型

3、浮动：浮动元素会生成一个块级框

浮动页面布局：

float的三个浮动取值：

浮动带来的影响：

4、overflow：溢出

5、圆形头像示例

6、定位

7、模态框

8、透明度参数的区别

9、顶部导航菜单示例

10、搭建博客页面

python 之前端开发（盒子模型、页面布局、浮动、定位、z-index、overflow溢出）

【web前端开发 | CSS】页面布局之浮动

CSS盒子模型、RestCSS、浮动、定位

Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

后端码农谈前端（CSS篇）第六课：盒子模型_html/css_WEB-ITnose

web前端练习32----Css，盒子模型,display,visibility,overflow,单位em

后端程序员前端之路05盒子模型详解_html/css_WEB-ITnose

css盒子模型、文档流、相对与绝对定位、浮动与清除模型_html/css_WEB-ITnose

后端程序员前端之路05盒子模型详解_html/css_WEB-ITnose

后端码农谈前端（CSS篇）第六课：盒子模型_html/css_WEB-ITnose

web前端css之盒子模型，浮动，定位

1、ul去除自带的样式

2、盒子模型

3、浮动：浮动元素会生成一个块级框

浮动页面布局：

float的三个浮动取值：

浮动带来的影响：

4、overflow：溢出

5、圆形头像示例

6、定位

7、模态框

8、透明度参数的区别

9、顶部导航菜单示例

10、搭建博客页面

python 之 前端开发（盒子模型、页面布局、浮动、定位、z-index、overflow溢出）

【web前端开发 | CSS】页面布局之浮动

CSS盒子模型、RestCSS、浮动、定位

Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

后端码农谈前端（CSS篇）第六课：盒子模型_html/css_WEB-ITnose

web前端练习32----Css，盒子模型,display,visibility,overflow,单位em

后端程序员前端之路05盒子模型详解_html/css_WEB-ITnose

css盒子模型、文档流、相对与绝对定位、浮动与清除模型_html/css_WEB-ITnose

后端程序员前端之路05盒子模型详解_html/css_WEB-ITnose

后端码农谈前端（CSS篇）第六课：盒子模型_html/css_WEB-ITnose

python 之前端开发（盒子模型、页面布局、浮动、定位、z-index、overflow溢出）