09CSS布局

最新推荐文章于 2024-05-14 18:25:49 发布
最新推荐文章于 2024-05-14 18:25:49 发布
阅读量68 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49233445/article/details/119815867
版权

CSS布局

什么是网页的布局方式？

网页的布局方式就是指浏览器是如何对网页中的元素进行排版的

标准流(文档流/普通流)排版方式

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

标准流处在网页的最底层，他表示的是一个页面中的位置，我们所创建的元素默认都处在标准流中。

元素在标准流中的特点

块元素

  • 块元素在标准流中独占一行，块元素会自上向下排列
  • 块元素在标准流中默认宽度是父元素的100%
  • 块元素在标准流中的高度默认被内容撑开

内联元素

  • 内联元素在标准流中只占自身的大小，默认从左向右排列，若一行中不能容纳所有元素则会换到下一行中还是会从左向右排列
  • 在标准流中，内联元素的宽高默认被内容撑开

  1. 浏览器默认的排版方式就是标准流的排版方式

  2. 在CSS中元素分为三类，块级元素、行内块级元素、行内元素

  3. 标准流中有两种排版方式：垂直排版、水平排版

    若元素是块级元素则会垂直排版

    若元素是行内元素或行内块级元素则会水平排版

​ 4.若想要块元素在页面中水平排列，可以使块元素脱离标准流，可以使用float来进行浮动，从而使他们脱离标准流

可选值：

  • none 默认值，元素默认在标准流中排列

  • left 元素会脱离标准流，向页面左浮动

  • right 元素会脱离标准流，向页面右浮动

  • 当一个元素设置浮动后，元素会立即脱离标准流，元素脱离标准流后，它的元素会马上向上移动，那么前面的元素就会盖住后面的元素。

  • 元素浮动以后，会尽量向页面的左上或者右上漂浮，直到遇到父元素的边框或者遇到其他的浮动元素。

  • 如果浮动元素上边没有浮动的块元素，则浮动的元素不会超过块元素

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

浮动流排版方式

​ 浮动流是一种“半脱离标准流”的排版方式，并且只有一种排版方式就是水平排版，只能设置某个元素左对齐或右对齐。

浮动元素字围现象

​ 浮动元素不会挡住没有浮动元素中的文字，没有浮动的文字会给浮动的元素让位置。

注：浮动流中没有居中对齐，不可以使用margin：0 auto；

特点：浮动流中不区分块级元素、行内元素和行内块级元素的并且都可以水平排版的，都可以设置宽高。所以浮动流中的元素和标准流中的行内块级元素很像。

高度塌陷

​ 在文档流中，福严肃的高默认被子元素撑开，就是子元素多高父元素就有多高。但是当子元素设置浮动之后，子元素就会脱离文档流，此时会导致子元素不能撑起父元素的高度，从而导致父元素高度塌陷，父元素下的所有元素都会向上移动，会造成页面布局混乱。

解决方法：

  1. 可以将父元素的高度写死来避免高度塌陷，但是一旦写死，父元素的高度就不能适应子元素的高度。（不推荐使用）

  2. 在高度塌陷的父元素的后面添加一个空白的div，由于div没有浮动所以是可以父元素的高度的，然后对它进行清除浮动。但是会在页面中添加多余的结构。

    取值：none、left、right、both

  3. 通过after伪类向元素的最后添加一个空白的块元素并对其清除浮动，不会在页面中添加多余的div

.clearfix::after{

​ 添加一个内容

​ content：“”；

​ 转换为一个块元素

​ display：block；

​ 清除两侧的浮动

​ clear：both；

}

两列布局：左边定宽，右边自适应

.left {
    float: left;
    width: 300px;
    background-color: blue;
}
.right {
    overflow: auto;
    background-color: red;
}

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

是一个独立的布局环境，BFC内部的元素布局与外部互不影响

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

1.根元素

2.float属性不为none

3.position 为absolute或fixed

4.display为inline-block table-cell table-caption flex inline-flex

5.overflow不为visible

BFC的作用

解决了浮动元素令父元素高度塌陷的问题

方法：给父元素开启BFC

原理：计算BFC的告诉，浮动子元素也会参与计算

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    /* 父元素 */
    .div1 {
      width: 1000px;
      border: 10px solid red;
      /* BFC */
      overflow: hidden;
    }
    /* 子元素 */
    .div2 {
      width: 200px;
      height: 400px;
      background-color: blue;
      float: left;
    }
  </style>
</head>
<body>
  <div class="div1">
    <div class="div2"></div>
  </div>
</body>
</html>
两栏自适应布局

方法：给固定栏设置固定高度，给不固定栏开启BFC

原理：BFC的区域不会与float box重叠

<!DOCTYPE html>
<html lang="en">
<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>
    .left {
      float: left;
      width: 300px;
      background-color: blue;
    }
    .right {
      /* 
        overflow:auto;(隐藏溢出的内容)利用BFC
      */
      overflow: auto;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="left">左边定宽</div>
  <div class="right">
    右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应
  </div>
</body>
</html>
三列布局 两边定宽 中间自适应
*{
	margin:0;
	padding:0;
}
.div1{
	width:500px;
	height:500px;
	background-color:red;
	float:left;
}
.div2{
	width:500px;
	height:500px;
	background-color:pink;
	float:right;
}
.div3{
	margin:0 auto;
	height:500px;
	background-color:blue;
}

<div class="div1">left</div>
<div class="div3">center</div>
<div class="div2">right</div>

定位布局

定位流分类
  • 静态定位
  • 相对定位
  • 绝对定位
  • 固定定位
  • 粘滞定位
  • z-index
1.静态定位

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

position:static;

2.相对定位

相对定位就是相对于自己以前在标准流中的位置来移动

position:relative;

使用top、bottom、left、right来控制

注：

  • 相对定位是不会脱离标准流的，会继续在标准流中占用一份空间
  • 在相对定位中同一方向上的定位属性只能使用一个
  • 由于相对定位是不会脱离标准流的，所以在相对定位中是区分块级元素、行内元素和行内块级元素的。
  • 由于相对定位是不会脱离标准流的，并相对定位的元素会占用标准流中的位置的，可以设置margin和padding等属性来影响标准流的布局的。

应用场景：

  • 用于对元素的微调
  • 配合绝对定位使用
3.绝对定位

绝对定位就是相对于body来定位

position:absolute;

参考点：

​ 绝对定位的元素无论有没有祖先元素都是以body作为参考点的，若有祖先元素且祖先元素也是定位流，那绝对定位的元素会以定位流的那个祖先元素作为参考点。（1.只要是这个绝对元素的祖先元素都可以。2.定位流是指绝对定位、相对定位和固定定位。3.定位流中只有静态定位不行）若一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点。

注：

  • 绝对定位是脱离标准流的
  • 绝对定位不区分块级元素、行内元素和行内块级元素的
  • 一个绝对定位的元素会忽略祖先元素的padding
  • 一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点

绝对定位–子绝父相

相对定位弊端:
相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面
绝对定位弊端:
默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化
子绝父相
子元素用绝对定位, 父元素用相对定位

绝对定位水平居中

设置绝对元素的left:50%; 设置绝对元素的margin-left:元素高度的一半px;

4.固定定位

position:fixed;

固定定位可以让某个盒子不随着滚动条的滚动而滚动。

注：

  • 固定定位是脱离标准流的，不占用标准流中的空间
  • 固定定位和绝对定位一样不区分块级元素、行内元素和行内块级元素的。
5.粘滞定位

position:sticky;

结合了相对定位和固定定位两种定位功能于一体的特殊定位。

设置了position: sticky的元素并不脱离文档流，仍然保留元素原本在文档流中的位置。

当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。

​ 亦即如果设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动（此时相当于fixed定位）。

​ 设置 position:sticky 同时给一个 (top,bottom,right,left) 之一即可

使用条件

  • 父元素不能overflow:hidden或overflow:auto属性
  • 必须指定top、bottom、left和right之一，否则只会处于相对定位。
  • 父元素的高度不能低于sticky元素的高度。
  • sticky元素只能在父元素内生效
6.z-index
  • 默认情况下所有的元素都有一个默认的z-index属性, 取值是0.
    z-index属性的作用是专门用于控制定位流元素的覆盖关系的
  • 默认情况下定位流的元素会盖住标准流的元素。
  • 默认情况下定位流的元素后面编写的会盖住前面编写的
  • 如果定位流的元素设置了z-index属性, 那么谁的z-index属性比较大, 谁就会显示在上面

注：

从父现象：

  • 如果两个元素的父元素都没有设置z-index属性, 那么谁的z-index属性比较大谁就显示在上面。
  • 如果两个元素的父元素设置了z-index属性, 那么子元素的z-index属性就会失效, 也就是说谁的父元素的z-index属性比较大谁就会显示在上面。

flex布局

flex布局属性
  • flex-flow
  • flex-direction
  • flex-wrap
  • justify-content
  • align-items
  • align-content
元素属性
  • order
  • flex-frow
  • flex-shrink
  • flex-basis
  • flex
  • align-self
flex盒模型

对于某个元素只要声明了display: flex;，那么这个元素就成为了弹性容器，具有flex弹性布局的特性。

在这里插入图片描述

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

弹性容器的两根轴非常重要，所有属性都是作用于轴的。

主轴

flex布局大部分的属性都是作用于主轴的，在交叉轴上很多时候只能被动地变化。

可以通过flex-direction修改主轴的方向

若修改了 交叉轴就会相应的旋转90°，弹性元素的排列方式也会发生改变（弹性元素永远沿着主轴排列）

flex-direction属性

取值：row（默认 横向排列 1-2-3）、row-reverse（横向排列 3-2-1）、column（纵向排列 1-2-3）、column-reverse（纵向排列 3-2-1）

在这里插入图片描述

flex-wrap属性

可使得主轴上的元素不换行、换行、反向换行。

取值：nowrap（默认 不换行）、wrap（换行 若超出自然换行）、wrap-reverse（换行 第一排会紧贴容器底部 效果与wrap相反）

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

flex-flow属性

flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。

justify-content属性

取值：flex-start(默认) 、flex-end 、 center 、space-between 、 space-around 、 space-evenly;

用于控制项目在主轴的对齐方式，默认flex-start即左对齐，center 为居中，对应的flex-end为右对齐。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

space-between为左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等。

在这里插入图片描述

space-around为项目之间间距为左右两侧项目到容器间距的2倍，比较特别的布局，日常使用不太多。

在这里插入图片描述

space-evenly为项目之间间距与项目与容器间距相等，相当于除去项目宽度，平均分配了剩余宽度作为项目左右margin。

在这里插入图片描述

align-items属性

取值：flex-start 、flex-end 、 center 、 baseline 、 stretch(默认)

用于控制项目在交叉轴排列方式，默认stretch即如果项目没设置高度，或高度为auto，则占满整个容器，下面第一张图的项目没设置高度，其余均为50px。

在这里插入图片描述

flex-start会让项目在交叉轴紧贴容器顶部，flex-end与之相反：

在这里插入图片描述

在这里插入图片描述

center使用最多，自然不会陌生，在交叉轴中心位置排列：

在这里插入图片描述

baseline比较特殊，它让项目以第一行文字的基线为参照进行排列：

在这里插入图片描述

注意，常理来说justify-content与align-items默认分别处理项目主轴，交叉轴的对齐方式，但如果我们修改了flex-direction为column，它们处理的轴向会交换，也就是justify-content处理交叉轴，align-items处理主轴。

想要使一个子元素垂直水平居中，只需要设置其父元素

justify-content: center; /* 水平居中 */
align-items: center;     /* 垂直居中 */
align-content属性

取值：flex-start 、 flex-end 、 center 、 space-between 、space-around 、 space-evenly 、 stretch(默认);

用于控制多行项目的对齐方式，如果项目只有一行则不会起作用，需设置flex-wrap: wrap；默认stretch，即在项目没设置高度，或高度为auto情况下让项目填满整个容器，与align-items类似。注意，如下演示的12个项目均没有设置高度

在这里插入图片描述

flex-start ，center，flex-end 与align-items属性表现一致：

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

space-around与justify-content保持一致，即项目之间间距为上下两端项目与容器间距两倍。

在这里插入图片描述

space-evenly同理，项目之间间距与项目到容器之间间距相等，space-between为上下两侧项目紧贴容器。

在这里插入图片描述

在这里插入图片描述

order

取值：默认0，用于决定项目排列顺序，数值越小，项目排列越靠前。

在这里插入图片描述

flex-grow

取值：默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；注意，即便设置了固定宽度，也会放大。

假设默认三个项目中前两个个项目都是0，最后一个是1，最后的项目会占满剩余所有空间。（如何去分配剩余的空间）

在这里插入图片描述

假设只有第一个项目默认为0，后面两个项目flex-grow均为1，那么后两个项目平分剩余空间。

在这里插入图片描述

假设第一个项目默认为0，第二个项目为flex-grow:2，最后一个项目为1，则第二个项目在放大时所占空间是最后项目的两倍。

在这里插入图片描述

flex-shrink

取值：默认1，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。

但如果某个项目flex-shrink设置为0，则即便空间不够，自身也不缩小。

在这里插入图片描述

flex-basis

取值：默认auto，用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会比width属性高，因此会覆盖widtn属性。

在这里插入图片描述

设置了flex-basis属性，后设置了width属性，但宽度依旧以flex-basis属性为准。

div{
  flex-basis: 80px;
  width: 60px;
  height: 50px;
  color: white;
}
flex

取值：默认0 1 auto，flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。

该属性有两个快捷键值，分别是auto(1 1 auto)等分放大缩小，与none(0 0 auto)不放大不缩小。

还有最常用的flex:1 === flex: 1 1 0px

align-self

取值：auto(默认) | flex-start | flex-end | center | baseline | stretch，表示继承父容器的align-items属性。如果没父元素，则默认stretch。

用于让个别项目拥有与其它项目不同的对齐方式，各值的表现与父容器的align-items属性完全一致。

在这里插入图片描述

橙橙呀_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html+css布局
sh2001824的博客
07-26 2858
布局
高效学习CSS布局之道
11-26
高效学习CSS布局之道：通过244个范例掌握网页样式与布局技术
css多种布局方式
博哥的二进制世界
05-14 2757
常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等，我会从文档流，容器，效果这些角度介绍文章引导1. 标准流布局2. 浮动布局3. 定位布局4. 弹性布局5. 网格布局6. 多列布局7. 响应式布局。
DIV＋CSS布局
热门推荐
zg0601的博客
10-17 1万+
DIV+CSS布局
CSS实现两列布局
zxl1990_ok的博客
11-17 2322
左列宽固定，右列自适应 效果如下： 利用float + margin <style> .left { background-color: red; width: 200px; height: 500px; float: left; } .right { background-color: green; margin-left: 200px; /* 大于或等于左列宽度 */ height: 500px; } .
div+css布局
qq_62898618的博客
01-08 3333
1. position属性：用于定义一个元素是否：absolute（绝对），relative（相对），static（静态），或者fixed（固定） 1.1 absolute:绝对定位，距top和left的距离，一般与js结合使用，比如页面漂浮的广告。 1.2 relative：相对定位，指的是相对自己默认的位置。 1.3 static：默认 1.4 fixed：固定 2. z-index属性：决定层的先后顺序和覆盖关系，值高的元素会覆盖值比较低的元素 ...
前端练习-CSS布局
qq_42385482的博客
02-08 2104
前端练习-CSS布局 文章目录前端练习-CSS布局在线练习一、盒模型CSS1 盒模型 - content-boxCSS2 盒模型 - border-boxCSS3 盒模型- 外边距折叠二、浮动CSS4 浮动CSS5 浮动 - 清除三、定位CSS7 定位 - inheritCSS8 定位 - absoluteCSS9 定位 - absolute - 评注CSS10 定位 - z-indexCSS11 定位 - relativeCSS12 定位 - fixedCSS13 定位 - fixed - 广告四、dis
css常见布局
liwei26的博客
01-04 5125
基础版 1.两列布局 两列布局是一侧固定，另一侧自适应。一般一个浮动，另一个设置margin，或者一个绝对定位，另一个设置margin，代码如下（浮动方法) style> .left{ float: left; width: 200px; background: green; height: 200px; } .right{
css聊天布局,CSS实现聊天布局
weixin_29927289的博客
08-03 1660
 hmy66吃饭了么吗吃饭了吗hmy666 {{item.contentWord}}Sendexport default {name:'chat',data() {return {chatContent: [{fromUser:'me',from_nickname:'小仙女',avatar:'https://gimg2.b...
css弹性布局
javajy的博客
05-01 2768
row-reverse：主轴方向为水平方向，起点在右端。row(默认)：主轴方向为水平方向，起点在左端。column-reverse：主轴方向为垂直方向，起点在下边。wrap-reverse：换行，第一行在下方。space-between：两端对齐，中间元素间隔相等。flex-start（默认值）：轴起点对齐。column：主轴方向为垂直方向，起点在上边。space-evenly：每个元素两侧的间隔相等。flex-end：轴终点对齐。flex-end：轴终点对齐。space-around：分散对齐。
CSS网页布局
微风洋洋的博客
02-10 7726
介绍一下CSS网页布局这个核心知识，大家一定要重视！
Div_CSS.rar_DIV css布局_css大全_css布局
09-23
**Div+CSS布局详解** Div（Division）+CSS（Cascading Style Sheets）布局是网页设计中的核心概念，它能够帮助开发者实现灵活、高效的页面结构和样式控制。本资料包包含"Div_CSS.pdf"，是一份全面的学习Div+CSS布局...
css常用布局多行多列
12-29
CSS布局常用的方法：float : none | left | right 取值： none :　默认值。对象不飘浮 left :　文本流向对象的右边 right :　文本流向对象的左边 它是怎样工作的，看个一行两列的例子 xhtml: <div id=warp> 这里是第...
CSS网站布局实录
07-10
内容很实际,如果你做过网页的话,会发现很多你想了很久但做不出来的东西,或者你做出来了,但他告诉你更简单的方法最主要的是你不仅会知道做,还知道原理。
css网站布局实录-2
12-15
2. **盒模型**：盒模型是CSS布局的核心，书中详细讲解了W3C标准盒模型和IE盒模型的区别，以及如何通过`box-sizing`属性来统一不同浏览器下的盒模型行为。理解盒模型对于精确控制元素尺寸和间距至关重要。 3. **布局...
python下载安装.zip
09-01
python下载安装
dbForge Studio 2023 for MySQL Enterprise 10.0.150 x64亲测可用
09-01
用全面的 MySQL GUI 工具简化您的日常工作流程，用于数据库开发、经营管理和行政管理。
mysql实验111111111
最新发布
09-01
mysql实验111111111
弹性力学数值方法：有限元法(FEM)：三维弹性问题有限元分析.docx
09-01
弹性力学数值方法：有限元法(FEM)：三维弹性问题有限元分析.docx
Div+CSS布局学习指南
"《Div+CSS布局大全》是一份适合初学者学习Div+CSS布局的文档，由博客园用户JesseZhao整理。文档详细介绍了从基础到进阶的Div和CSS布局技术，包括DOCTYPE的选择、名字空间、语言编码、样式表调用、XHTML代码规范、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值