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

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之盒子模型,浮动,定位