css基础布局细节（一）

最新推荐文章于 2023-02-09 18:20:12 发布

seven-yang

最新推荐文章于 2023-02-09 18:20:12 发布

阅读量656

点赞数

CC 4.0 BY-SA版权

分类专栏： css基础文章标签： css

本文链接：https://blog.youkuaiyun.com/yangyixue123/article/details/78196913

css基础专栏收录该内容

4 篇文章

订阅专栏

本文介绍了CSS布局中的定位、浮动、三栏布局和居中布局。详细讲解了position属性的各个值，浮动元素的理解及清除浮动的方法，以及圣杯布局和双飞翼布局的区别。同时，探讨了使用浮动和负margin实现三栏布局的原理，并提供了多种水平和垂直居中的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个页面上两个div左右铺满整个浏览器，要保证左边的div一直为100px，右边的div跟随浏览器大小变化（比如浏览器为500，右边div为400，浏览器为900，右边div为800），请写出大概的css代码。

方式1

 <style type="text/css">
        #box{
            width: 900px;
            height: 100px;
            display:flex;
            flex-direction: row;
            align-items:center;
            border: 1px solid yellow;
        }
       .left{
           height: 100%;
           background-color: red;
           flex-basis: 100px;
           -webkit-flex-basis: 100px;
       }
        .right{
            background-color: green;
            flex-grow: 1;
            height: 100%;
        }
    </style>

<div id="box">
    <div class="left"></div>
    <div class="right"></div>
</div>

方式2：浮动布局

<style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .left{
            width: 220px;
            background-color: red;
            float: left;
        }
        .right{
            background-color: blue;
            margin-left: 220px;
        }

    </style>

<div class="left">left siderbar</div>
<div class="right">right siderbar</div>

定位（position）

点击链接：css布局说
点击链接：定位详解
理解：相对于一个元素来定义另一个元素位置

position属性：

static(默认)：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分
relative：相对定位，元素框相对于之前正常文档流中的位置发生偏移，并且原先的位置仍然被占据。发生偏移的时候，可能会覆盖其他元素。

absolute：绝对定位，相对父元素定位，情况有两种

a.设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute，则这时元素的定位对象为此已设置position属性的祖先元素
　b.如果并没有设置了position属性的祖先元素，则此时相对于body进行定位。

fixed：绝对定位，元素框不再占有文档流位置，并且相对于浏览器窗口（body）进行定位
sticky：(这是css3新增的属性值)粘性定位，相当于relative和fixed混合。最初会被当作是relative，相对于原来的位置进行偏移；一旦移出偏移范围后，会被当成fixed定位，相对于视口进行定位。目前适用于浏览器只有FireFox和iOS的Safari

demo：固定页头和页脚

<style type="text/css">
        .header{
            width: 100%;
            height: 100px;
            background-color: yellow;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
        }
        .center{
            width: 100%;
            height: 800px;
            background-color: yellowgreen;
            margin-top: 100px;
        }
        .footer{
            width: 100%;
            height: 100px;
            background-color: yellow;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div class="header">头部头部头部</div>
<div class="center">中间部分中间部分中间部分</div>
<div class="footer">底部底部底部</div>
</body>

position:absolute和float的异同

相同点：均可以让元素脱离文档流，并且设置其宽高

不同点：position会覆盖文档流的其他元素，float仍会占据位置

浮动

浮动之前需要了解盒子模型：

分为两种盒子模型：

W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分
IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding

一般情况下使用W3C盒子模型
这里写图片描述

避免两种盒子在不同浏览器显示不同，可以在代码加上

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

浮动发生的原因

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边（如果一行放不下，则被挤到下一行）：如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐，当页面需要两个元素并排排列，此时就需要清除浮动

清除浮动

清除浮动的原因

当一个父元素包含了多个浮动的子元素，且页面的内容设置了一个宽度，子元素的浮动确定了他们的位置，但浮动元素不会影响父元素的宽度。这样做会让父元素塌陷，从而使父元素的高度为“0”，以及忽略其他的属性。
清除浮动的方法

1.添加一个空的div

给浮动元素的同级下加一个空标签div，并将其属性设置为clear：both，让父级div自己获取高度，
父容器现在必须考虑非浮动子元素的位置，而空标签肯定出现在浮动元素下方，所以显示出来，
父容器就把所有子元素都包括进去了。

 <style type="text/css">
        .div1{
            background-color:red;
        }
        .left{
            float:left;
            width:45%;
            height:100px;
            background-color:yellow;
        }
        .right{
            float:left;
            width:45%;
            height:100px;
            background-color: green;
        }
        .empty{
            clear: both;
        }
        .div2{
        background-color: mediumseagreen;
        height: 100px;
        margin-top: 10px;
    }
    </style>
</head>

<div class="div1">
    <div class="left"></div>
    <div class="right"></div>
    <div class="empty"></div>
</div>
<div class="div2"></div>

优点：简单，代码少，浏览器支持好
缺点：有过多的空标签，代码冗余,刚开始理解不了，如果页面浮动过多，则不推荐使用。

2.运用overflow:hidden

用hidden或者auto 均可，区别在于一个可以查看隐藏部分，一个不可以
必须设置宽度或者用zoom:1的同时不能使用height,使用溢出隐藏时，浏览器会自动检测浮动区域的高度。
当代码中没有用溢出隐藏时，div1会失去高度，div2取代div1的高度。

<style type="text/css">
       .div1{
           background-color: red;
           overflow: hidden;
           width: 98%;
       }
       .left{
           float: left;
           background-color: green;
           width:20%;
           height:200px;
       }
       .right{
           float: right;
           background-color: yellow;
           width: 50%;
           height: 100px;
       }
       .div2{
           width: 98%;
           height: 200px;
           background-color: mediumseagreen;
           margin-top: 10px;
       }
    </style>

优点：代码简单 理解方便，浏览器支持好
缺点：不能和position一起使用，因为超出的部分会被隐藏

3.给父级定义一个伪类clearfloat

在父级中加一个clearfloat的class名，然后给clearfloat加上样式，在clearfloat的元素的结尾添加content中的内容,
在这里添加了一个空的元素，并且把它的display设置成block；高度设为0；
clear设为both；visibility设为隐藏。这样就可以撑开父元素。

<style type="text/css">
        .div1{
            background-color: red;
        }
        .left{
            float: left;
            background-color: green;
            width:20%;
            height:200px;
        }
        .right{
            float: right;
            background-color: yellow;
            width: 50%;
            height: 100px;
        }
        .div2{
            height: 200px;
            background-color: mediumseagreen;
            margin-top: 10px;
        }
        .clearfloat:after{
            display: block;
            clear:both;
            content:"";
            visibility: hidden;
            height: 0;
        }
    </style>

<div class="div1 clearfloat">
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="div2"></div>

优点：浏览器支持好，大型浏览器都适用,如腾讯、网易、新浪等
缺点：代码多，难以理解，需要两行代码配合才能被主流浏览器使用

4.给父级元素也加浮动（float:left）

优点：容易理解
缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用

5.给父元素手动加高度，解决了父级div无法获取高度的问题

优点：代码量少，容易理解 
缺点：只适合高度固定的布局，如果子元素高度和父元素不一样，则不能用

用z-index定位

元素的“z-index”值越高将会出现在越上面，给元素设置“z-index”属性，首先要在这个元素上设置了“position”属性值为“relatvie”、“absolute”或者“fixed”之一。

三栏布局

圣杯布局

简书详细解释

包含三个盒子，左中右

<style type="text/css">
       .contain{
           height:200px;
           overflow: hidden;
           padding: 0 200px;
       }
       .middle{
           width: 100%;
           height: 200px;
           background-color: indigo;
           float: left;
       }
       .left{
           width: 200px;
           height:200px;
           background-color: yellowgreen;
           float: left;
           margin-left: -100%;
           position: relative;
           left: -200px;
       }
       .right{
           width: 200px;
           height: 200px;
           background-color: pink;
           float: left;
           margin-left: -200px;
           position: relative;
           right: -200px;
       }
    </style>

<div class="contain">
    <div class="middle">aaa中间弹性区中间弹性区中间弹性区
        中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区
        中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区
        中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区
        中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区</div>
   <div class="left">左边</div>
   <div class="right">右边</div>
</div>

分析:

中间盒子宽度为100%，占一行

左右两边盒子，用负边距（margin-left），让三个盒子在同一行，左边（margin-left: -100%），右边（margin-left: -200px）

父盒子设置左右内边距，把三个盒子向中间挤

给左右盒子加相对定位，让他们占住留出来的左右内边距，此时中间盒子不会被盖住。

双飞翼布局

<head>
    <meta charset="UTF-8">
    <title>双飞翼</title>
    <style type="text/css">
        #main{
            float: left;
            width: 100%;
            height: 200px;
            background-color: pink;
        }
        #main-inner{
            background-color: red;
            padding: 0 200px;
        }
        #left{
            width: 200px;
            height: 200px;
            float: left;
            background-color: yellowgreen;
            margin-left: -100%;
        }
        #right{
            width: 200px;
            height: 200px;
            float: left;
            background-color: yellow;
            margin-left: -200px;
        }
    </style>
</head>
<body>
<div id="main">
    <div id="main-inner">aa双飞翼布局双飞翼布局双飞翼布局双飞翼布局
        双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局
        双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局
        双飞翼布局双飞翼布局双飞翼布局</div>
</div>
<div id="left"></div>
<div id="right"></div>
</body>

分析：父盒子包含左中右三个盒子，其中中间的盒子再加上一个子盒子

中间盒子宽度100%

左右盒子用负边距，将两边盒子和中间盒子在同一行

中间盒子的子盒子设置内边距（或者外边距）给左右盒子留空

两种布局的异同

相同点：都是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

不同点：如何使中间盒子的内容不被左右盒子遮挡：

圣杯布局的方法：设置父盒子的 padding 值为左右盒子留出空位，再利用相对布局对左右盒子调整位置占据 padding 出来的空位；

双飞翼布局的方法：在中间盒子里再增加一个子盒子，直接设置这个子盒子的 margin（padding）值来让出空位，而不用再调整左右盒子。

用浮动实现

<style type="text/css">
       #container{
           width: 100%;
           height:200px;
           overflow: hidden;
       }
       .left{
           width: 200px;
           height:200px;
           background-color: red;
           float: left;
       }
        .right{
            width: 200px;
            height: 200px;
            background-color: yellow;
            float: right;
        }
        .middle{
            width:100%;
            height: 200px;
            background-color: pink;
            margin-left: 200px;
            margin-right: 200px;
        }
    </style>
</head>
<body>
<div  id="container">
    <div class="left">aaa</div>
    <div class="right">bbb</div>
    <div class="middle">ccc中间弹性区中间弹性区中间弹性区中间弹性区
        中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区
        中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区
        中间弹性区中间弹性区</div>
</div>

对负margin的解释

简书详细解释

三栏布局中用到了负margin对浮动元素的影响，当给一个浮动元素设置margin-left: -200px时，就意味着元素左移200px,

即在圣杯布局和双飞翼布局中，由于父盒子设置左右内边距，把三个盒子向中间挤，左右盒子都被中间盒子所覆盖，用margin-left让左盒子左移动一整行到最左边，让右盒子左移自己的宽度，到第一行的空位置处

居中布局

水平居中

行内元素(主要针对文本)：text-align:center
块级元素（block）：给元素设宽度，并把marigin-left 和 margin-right 设成 auto
多个块级元素：对父元素设置 text-align: center;，对子元素设置 display: inline-block;；或者使用 flex 布局（flex布局最后记录）

demo

<style type="text/css">
      p{
          text-align: center;
      }
        .kuai{
            width: 200px;
            background-color: pink;
            margin-right: auto;
            margin-left: auto;
        }
        #box{
            width: 100%;
            text-align: center;
            height: 200px;
        }
        .box1,.box2,.box3{
            width: 200px;
            height: 200px;
            display:inline-block ;
        }
        .box2{
            background-color: pink;
        }
        .box3{
            background-color: yellow;
        }
        .box1{
            background-color: red;
        }
    </style>
</head>
<body>
<p>abcdefg</p>
<div class="kuai">
    aaa
</div>
<div id="box">
    <div class="box1">aaa</div>
    <div class="box2">bbb</div>
    <div class="box3">ccc</div>
</div>
</body>

垂直居中

行内元素

a.单行：上下padding相同，或者line-height和height相同
b.多行:  上下padding相同,或者设置 display: table-cell; 和 vertical-align: middle;或者使用 flex 布局；或者使用伪元素

块级元素：必须父元素相对布局

a.已知高度：元素使用绝对布局 top: 50%;，再用负的 margin-top 把子元素往上拉一半的高度
b.未知高度：子元素使用绝对布局 position: absolute; top: 50%; transform: translateY(-50%);
c.使用 Flexbox：选择方向，justify-content: center;

 <style type="text/css">
        .simple-line{
            width: 200px;
            padding-top: 50px;
            padding-bottom: 50px;
            background-color: red;
        }
        #box{
            width: 500px;
            height:700px;
            position: relative;

        }
        .box1{
            width: 200px;
            height: 100px;
            position: absolute;
            top:50%;
            margin-top: -50px;
            background-color: yellow;
        }
        .box2{

            width: 200px;
            position: absolute;
            top:50%;
            transform: translateY(-50%);
            background-color: pink;
        }
    </style>
</head>
<body>
<div class="simple-line">aaaaaaa</div>
<div id="box">
    <div class="box1">aaa</div>
    <div class="box2">bbb</div>
</div>

水平垂直居中

定高定宽：先用绝对布局 top: 50%; left: 50%;，再用和宽高的一半相等的负 margin 把子元素回拉
高度和宽度未知：先用绝对布局 top: 50%; left: 50%;，再设置 transform: translate(-50%, -50%);
使用 Flexbox：justify-content: center; align-items: center;

<style type="text/css">
        #box{
            width: 200px;
            height:200px;
            background-color: yellowgreen;
            position: absolute;
            top:50%;
            left: 50%;
            margin:-100px;
        }
        .box1{
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="box">
    aaa
</div>
<div class="box1">
    bbb
</div>
</body>