css基础布局细节(一)

本文介绍了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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值