CSS布局

丝白嘚MAN

已于 2024-06-11 17:23:04 修改

阅读量123

点赞数

分类专栏： CSS 文章标签： css 前端

于 2023-10-19 16:39:30 首次发布

本文链接：https://blog.csdn.net/qq_54825857/article/details/133927804

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS盒子模型

盒子模型 box-sizing:content-box/*内容盒子*/|border-box/*边框盒子*/

一、内容盒子

也叫w3c盒子，标准盒子。宽高---->内容区

内容区的宽：width
内容区的高：height

盒子的宽：内容+左右内边距+左右边框
盒子的高：内容+上下内边距+上下边框

所占屏幕空间的宽：盒子宽+左右外边距
所占屏幕空间的高：盒子高+上下外边距

二、边框盒子

也叫怪异盒子，ie盒子。宽高---->盒子(内容+内边距+边框)

内容区的宽：盒子宽-左右边框-左右内边距
内容区的高：盒子高-上下边框-上下内边距
盒子的宽：width （内容+内边距+边框）
盒子的高：height
所占屏幕空间的宽：盒子宽+左右外边距
所占屏幕空间的高：盒子高+上下外边距

三、外边距合并

兄弟级外边距合并
- 原因：一个兄弟元素设置了下外边距，另一个兄弟元素设置了上外边距，发生外边距合并现象
- 合并规则：{
  1.如果两个值都为正数，取最大外边距合并
  2.如果一个值是正数，另一个值是负数取外边距之和
  3.如果两个值都为负数，取最小外边距绝对值进行缩减
  }

解决方案：
1.给其中一个元素设置外边距，另一个不设置
2.给上方兄弟建一个父元素,为其父素元素开启BFC

父子级外边距合并
- 原因：给子元素和父元素设置同一方向外边距就发生合并现象
- 合并规则：{
  1.如果两个值都是正数，取最大的外边距合并
  2.如果一个值是正数，另一个值是负数，取外边距之和
  }

解决方案：
1.给父元素设置内边距，不给子元素设置外边距,(此时盒子高度发生改变,若不想它变,可以将父元素设置为border-box)
2.给父元素设置一个边框
3.给父元素开启BFC

四、 BFC(块级格式化上下文)

Block Formatting Context是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
把BFC当作是元素的一种属性，只要元素拥有了这种属性，就成为独立的一块渲染区域，容器内的元素不会影响到容器外的元素。
即BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响

BFC的布局规则：

1.内部的Box会在垂直方向一个接着一个地放置。
2.Box垂直方向上的距离由margin决定。属于同一个BFC的两个相邻的Box的margin会发生重叠。
3.每个盒子的左外边框紧挨着包含块的左边框，即使浮动元素也是如此。
4.BFC的区域不会与float box重叠。
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
6.计算BFC的高度时，浮动子元素也参与计算。

如何触发BFC

1.html
2.float:left/right;
3.position:absolute/fixed;
4.display:inline-block
5.overflow: hidden /auto/scroll,不为visible(尽量用这个，因为每个属性都有自己的特效，就这个影响最小)

BFC作用：

1.避免外边距合并
2.清除浮动
3.阻止元素被浮动元素覆盖
4.两列布局(左侧定宽,右侧自适应)
5.三列布局(),左右定宽,中间自适应

3.1 避免外边距合并

overflow–>为父元素设置bfc
如不想为父元素设置bfc,可用display,但会多出几px的宽度,影响布局.

<style>
    .one{
      width: 100px;
      height: 100px;
      margin-bottom: 10px;
      background-color: red;
    }
    .two{
      width: 100px;
      height: 100px;
      margin-top: 20px;
      background-color: blue;
      overflow:hidden
    }
    .container{
      /* 给其父元素开启BFC */
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="one"></div>
  </div>
  <div class="two"></div>
</body>

3.2 清除浮动 (解决浮动元素令父元素高度坍塌的问题)

方法：给父元素开启BFC
原理：计算BFC的高度时，浮动子元素也参与计算

<style>
    .parent{
      border: 10px solid red;
      /* 1.给父元素开启 BFC */
      overflow: hidden;
    }
    .child{
      width: 100px;
      height: 100px;
      background-color: blue;
      float: left;
    }
  </style>
</head>

<body>
  <div class="parent">
    <div class="child"></div>
    <!-- 2.清除浮动 -->
    <!-- <p style="clear:both"></p> -->
  </div>
</body>

3.3 阻止元素被浮动元素覆盖(与3.2类似)

3.4 两列布局

方法：给左边固定栏设置固定宽度，给右边不固定栏开启BFC。
原理：BFC的区域不会与float box重叠

 <style>
    .left{
      background-color: red;
      width: 300px;
      float: left;
    }
    .right{
      background-color: blue;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div class="left">左侧定宽</div>
  <div class="right">
    右侧自适应右侧自适应右侧自适应右侧自适应
    右侧自适应右侧自适应右侧自适应右侧自适应
    右侧自适应右侧自适应右侧自适应右侧自适应
    右侧自适应右侧自适应右侧自适应右侧自适应
    右侧自适应右侧自适应右侧自适应右侧自适应
    右侧自适应右侧自适应右侧自适应右侧自适应
    右侧自适应右侧自适应右侧自适应右侧自适应
    右侧自适应右侧自适应右侧自适应右侧自适应
  </div>
</body>

3.5 三列布局

<style>
    .left,.right{
      width: 300px;
      height: 300px;
      background-color: red;
    }
    .left{
      float: left;
    }
    .right{
      float: right;
    }
    .center{
      margin: 0 auto;
      overflow: hidden;
      height: 600px;
      background-color: blue;
    }
  </style>
</head>

<body>
  <div class="left"></div>
  <div class="right"></div>
  <div class="center"></div>
</body>

CSS布局方式

一、标准流（文档流/普通流）

标准流(文档流/普通流)处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在标准流(文档流/普通流)中。

元素在标准流(文档流/普通流)中的特点 :

块元素：
1.块元素在标准流(文档流/普通流)中会独占一行，块元素会自上向下排列。
2.块元素在标准流(文档流/普通流)中默认宽度是父元素的100%
3.块元素在标准流(文档流/普通流)中的高度默认被内容撑开
内联元素：
1.内联元素在标准流(文档流/普通流)中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右。
2.在标准流(文档流/普通流)中，内联元素的宽度和高度默认都被内容撑开

其实浏览器默认的排版方式就是标准流的排版方式
在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素
在标准流中有两种排版方式: 垂直排版, 如果元素是块级元素, 那么就会垂直排版水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版
如果希望块元素在页面中水平排列，可以使块元素脱离标准流(文档流/普通流)，使用float来使元素浮动，从而脱离标准流(文档流/普通流)

二、浮动(float:)

当一个元素设置浮动，脱离标准流(文档流/普通流)以后，它下边的元素会立即向上移动，那么这个时候前面一个元素就会盖住后面一个元素。
元素浮动以后，会尽量向页面的左上或者是右上漂浮，直到遇到父元素的边框或者其他的浮动元素
如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素。

浮动的元素不会超过他上边的兄弟元素，最多一边齐。

浮动 float:none/*默认值，元素默认在标准流(文档流/普通流)中排列*/|left/*元素会立即脱离标准流(文档流/普通流)，向页面的左侧浮动*/|right/*素会立即脱离标准流(文档流/普通流)，向页面的右侧浮动*/
清楚浮动 clear:left/*清楚左侧浮动影响*/|right/*清楚右侧*/|both/*清楚两侧，清楚子浮动对父元素的影响或浮动元素对兄弟的影响（相当于子元素依然浮动，而父元素保持清除浮动之前的样子）*/

2.1字围现象

浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象

注意点:
1.浮动流中没有居中对齐, 也就是没有center这个取值
2.在浮动流中是不可以使用margin: 0 auto;
3.没浮动的文字虽然不会上去，但它的背景样式会上去
特点:
1.在浮动流中是不区分块级元素/行内元素/行内块级元素的
无论是块级元素/行内元素/行内块级元素都可以水平排版
2.在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高 3.综上所述, 浮动流中的元素和标准流中的行内块级元素很像

2.2高度塌陷

原因：给子元素设置浮动后，父元素失去了高度支撑，发生高度塌陷。

解决方案：
给父元素设置高度(一旦高度写死，父元素将不能自动适应子元素的高度，所以方案不推荐)
在高度塌陷的父元素的最后，添加一个空白的div（由于这个div并没有浮动，所以他是可以撑开父元素的高度的）然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用。（与3差不多，唯一区别就是2的div占位置了，而3的伪元素没占位置，所以一般用3）
给父元素清除浮动使用伪元素清除浮动
::after{ display:block;
        content:“”;
           clear:both ;
           }
4. 给父元素开启BFC

三、定位（position:）

定位 position:static/*静态*/|relative/*相对*/|absolute/*绝对*/|fixed/*固定*/|sticky/*粘滞*/

3.1.静态定位（ Static positioning）

所有元素的默认定位方式。意味着将一个元素定位在默认文档流中

3.2.相对定位（ Relative positioning ）

position:relative;
top/right/bottom/left:10px;/*向哪个方向移动10px*/

特点：
1.不脱离文档流
2.参照自身在浏览器位置定位

相对定位应用场景:
-用于对元素进行微调
-配合后面学习的绝对定位来使用

3.3.绝对定位（Absolute positioning）

position:absolute;
top/right/bottom/left:10px/*距离顶部有10px*/

绝对定位的元素是不区分块级元素/行内元素/行内块级元素

特点:
1.脱离文档流原先位置不保留飘在文档流上方
2.默认参照浏览器视口区域定位(左上角(0,0)点)
但给父元素或者祖先元素设置定位参照父元素或者祖先元素定位

相对定位弊端:
相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面
绝对定位弊端:
默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化
子绝父相
子元素用绝对定位, 父元素用相对定位
绝对定位水平居中
只需要设置绝对定位元素的left:50%;
然后再设置绝对定位元素的 margin-left:-width/2 ;

3.4.固定定位（Fixed positioning）

position:fixed;
top/right/bottom/left:10px/*距离顶部有10px*/

不区分行内/块级/行内块级

特点：
1.脱离文档流原先位置不保留飘在文档流上方
2.参照浏览器视口区域定位

3.5.粘滞定位（ Sticky positioning ）

≈相对定位+绝对定位

position:sticky;
top/right/bottom/left:10px;/*指sticky元素到达页面边到10px时开始固定,不在移动*/

特点：
1.不脱离文档流
2.没有达到指定阈值之前是相对定位
达到指定阈值之后是固定定位

使用条件:
父元素不能overflow:hidden或者overflow:auto属性。 
必须指定top、bottom、left、right4个值之一，否则只会处于相对定位 
父元素的高度不能低于sticky元素的高度 
sticky元素仅在其父元素内生效

3.6.z-index

专门用于控制定位流元素的覆盖关系的,默认取值是0

兄弟元素同时开启定位流: 谁的z-index较大谁的优先级高

父子元素同时开启定位流：
1.如果两个同时设置   无论父元素z-index值多大   子元素优先级高
      只给父元素设置      无论z-index值多大      子元素优先级高
2.只给子元素设置同时z-index<0                   父元素优先级高

CSS水平垂直居中方案

通过margin推开
给子元素设置margin :左右margin=（父width-子width）/2
上下margin=（父height-子height）/2
通过padding挤压
给父元素设置border-box
给父元素设置padding : 左右padding=（父width-子width）/2
上下padding=（父height-子height）/2
子绝父相 ,配合属性设置为0 ,然后外边距auto,让它自己调整.
top left bottom right 全部为0
margin:auto
子绝父相
top:50%;
left:50% ;
margin-left:-width/2 ;
margin-top:-height/2

<style>
    .parent{
      width: 220px;
      height: 260px;
      background-color: red;
      /* 水平居中 */
      margin: 0 auto;
      
      /* 1*/
      /* border: 1px solid red; */

      /* 2.1给父元素设置padding */
      /* padding: 80px 60px; */
      /* 2.2将父元素设置为border-box */
      /* box-sizing: border-box; */

      /* 3.给父元素设置相对定位 */
      position: relative;

      /* 4.给父元素设置相对定位 */
      /* position: relative; */
    }
    .child{
      width: 100px;
      height: 100px;
      background-color: blue;

      /* 1.通过margin挤压 
      父元素高-子元素高/2 上下外边距
       父元素宽-子元素宽/2 左右外边距 */
      /* margin:80px 60px; */

      /* 3.子元素绝对定位 配合属性全部为0 margin:auto */
      position: absolute;
      top: 0;
      bottom: 0;
      left:0;
      right: 0;
      margin: auto;


      /* 4.给子元素绝对定位width height以子元素为准 top:50% left:50% margin-left:-width/2 margin-top:-height/2 */
      /* position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -50px;
      margin-top: -50px; */
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>

父设置flex，子设置margin:auto
父设置flex,设主轴和交叉轴排列都为center

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .parent{
      width: 200px;
      height: 200px;
      background-color: red;
      margin: 0 auto;
      /* 1.1给父元素设置为伸缩盒 */
      /* display: flex; */


      /* 2.给父元素设置伸缩盒 设置主轴和交叉轴弹性元素排列方式都为center */
      display: flex;
      /* 设置弹性元素在主轴居中对齐 */
      justify-content: center;
      /* 设置弹性元素在交叉轴居中对齐 */
      align-items: center;
    }
    .child{
      width: 100px;
      height: 100px;
      background-color: blue;
      /* 1.2 给子元素设置margin:auto */
      /* margin: auto; */
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>

四、弹性(flex)

每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系。注意：水平的不一定就是主轴。
每根轴都有起点和终点，这对于元素的对齐非常重要。
弹性容器中的所有子元素称为<弹性元素>，弹性元素永远沿主轴排列。
弹性元素也可以通过display:flex设置为另一个弹性容器，形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。

4.1 容器属性

当父容器主轴无法放下所有弹性元素弹性元素会进行等比例压缩 ,不会换行显示

开启弹性            display:flex;/*变为弹性盒子，子元素也变为弹性元素*/
更改主轴方向        flex-direction:row /*默认值，水平方向*/| row-reverse/*从右到左依次排列*/ | column/*垂直方向，从上到下依次排列*/ | column-reverse/*从下到上依次排列*/
元素超出是否换行    flex-wrap:nowrap/*默认值，不换行*/ | wrap/*换行*/ | wrap-reverse /*换行且翻转*/
上面两个的简写属性  flex-flow:direction wrap;
主轴元素排列方式    justify-content: flex-start/*默认值*/ | flex-end/*沿着终点排列*/ | center/*容器中间*/ | space-around/*左右两侧弹性元素周围空间是其他行弹性元素空间1/2*/space-between/*左右两侧元素紧贴父容器排列*/ | space-evenly/*元素左右两侧空间相等*/ | strecth/*平铺或拉伸占满整个夫元素，若元素设置高，则不生效*/
交叉轴元素排列方式  align-items:flex-start/*默认值*/ | flex-end/*沿着终点排列*/ | center/*容器中间*/ | baseline/*基线对齐/文字对齐*/ | strecth/*默认值，平铺或拉伸占满整个夫元素，若元素设置高，则不生效*/
多行排列方式        align-content:flex-start/*顶部*/ | flex-end/*顶部*/ | center/*中心位置*/ | space-around/*上下两侧弹性元素周围空间是其他行弹性元素空间1/2*/space-between/*上下两侧元素紧贴父容器排列*/ | space-evenly/*元素上下两侧空间相等*/ | strecth/*平铺或拉伸占满整个夫元素，若元素设置高，则不生效*/

请添加图片描述

align-content:
请添加图片描述

4.2 元素属性

元素排列顺序                   order:/*值越大 越靠后 */
父容器剩余空间的分配（放大比例） flex-grow:0/num/* 默认0不放大不分配，默认值0。数值为几就占几份*/
缩小比例                       flex-shrink:1/0/*默认1缩小（等比例），如果空间不足则缩小，即使固定宽度也缩小,设置为0表示不进行等比例压缩*/
重新给元素设置宽/高             flex-basis:px/num/*  默认auto（即原本大小）设置后将占据固定空间。。优先级高于width。只给一个元素设置则将剩余父空间都给他；若多个，则width就是他们之间number比例*/
简写属性                       flex:flex-grow flex-shrink flex-basis 
设置弹性元素自身在交叉轴对齐方式 align-self:/*属性同上align-items:*/
     简写：     flex:0 1 auto;(不放大，缩小)
               flex:1 0 auto;( 放大，不缩小)
   flex：1  表示flex:1 1 0%；（ 放大，缩小）

请添加图片描述

，

4.3自适应布局

<style>
    .parent{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin: 0 auto;
    }
    .parent>.child{
      /* width: 300px; */
      flex: 0 1 300px;
      height: 100px;
      margin: 10px;
      border: 1px solid royalblue;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</body>

五、媒体查询

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式。
一个界面对应、一套代码对应、一个布局

媒体查询与弹性盒布局的适用情况
媒体查询：当页面的结构发生变化的话最好使用媒体查询。
弹性盒：如果只是宽高的变化，尽量使用弹性盒
媒体类型

all	所有媒体（默认值）
screen	彩色屏幕
print	打印预览

媒体属性

width	（可加max min前缀）
height	（可加max min前缀）
device-width	（可加max min前缀）
orientation	portrait竖屏/landscape横屏

书写方式：@media 媒体类型 and （媒体属性） {样式}

使用媒体查询方法：

  <!-- 1.使用link标签引入  -->
  <link rel="stylesheet" media="(min-width:1200px)" href="./style.css">
  
  <!-- 2.使用媒体查询方法  -->
  <style>
    @media (max-width:800px){
      div{
        width: 200px;
        height: 200px;
        background-color: yellow;
      }}

关键字：

  <!--and , not only四者的区别  -->
    /* 必须彩色设备 并且最小宽度为1800px and并且 必须满足两个条件  */
    /* @media screen and (max-width:1800px){ */
    @media screen , (min-width:1800px){
      div{
        font-size: 50px;
        color: pink;}}

    /* 设置多个媒体特性连用 and */
    @media screen and (min-width:800px) and (max-width:1200px) {
      div{
        width: 100px;
        height: 100px;
        background-color: pink;}}

    /* not对媒体查询条件进行取反 not (max-width:800px) =>等同于min-width:800  */
    @media not (max-width:800px) {p{background-color: blue;}}

    /* only 仅满足当前条件 样式才会生效 */
    @media only print{p{display: none;}}

  </style>
</head>
<body>
  <div>我是div</div>
  <p>段落标签</p>
</body>

在Media Query中如果没有明确指定Media Type，那么其默认为all，如：

<link rel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" />

在样式中，还可以使用多条语句来将同一个样式应用于不同的媒体类型和媒体特性中，指定方式如下所示。

<link rel="stylesheet" type="text/css" href="style.css" media="print and (max-width:480px), screen and (min-width:960px)" />

上面代码中style.css样式被用在宽度小于或等于480px的打印预览上，或者被用于屏幕宽度大于或等于960px的设备上。