CSS布局技巧 | 青训营

blueee
698 阅读8分钟

一.为什么使用CSS布局

使用CSS布局好处如下

1.分离内容和样式：CSS布局使得网页的内容和样式可以分离，使得网页的修改和维护更加方便。通过修改CSS样式表，可以统一修改整个网站的布局风格，而不需要逐个修改每个网页的HTML代码。

2.灵活性：CSS布局提供了更多的灵活性，可以实现各种复杂的布局效果，如多列布局、网格布局、响应式布局等。通过使用CSS的强大选择器和布局属性，可以轻松地调整网页的布局。

3.可维护性：使用CSS布局可以使网页的结构更加清晰，代码更加模块化，易于维护和扩展。通过定义样式类和ID，可以重用样式，减少代码的重复性，提高代码的可维护性。

4.降低网页加载时间：CSS布局的代码量相对较少，可以减少网页的加载时间。通过将样式表文件进行缓存，可以进一步提高网页的加载速度。

5.SEO友好：使用CSS布局可以使网页的结构更加清晰，便于搜索引擎抓取和索引网页的内容，提高网页在搜索引擎中的排名。

总之，使用CSS布局可以提高网页的可维护性、灵活性和加载速度，使得网页的开发和维护更加高效。

二.CSS常用布局技巧

  • 盒子模型：css将页面中的所有元素都设置为了一个矩形的盒子，将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置。也可以称为 盒模型、盒子模型、框模型（box model）。 每一个盒子都由几个部分组成： 内容区（content） 内边距（padding） 边框（border） 外边距（margin）。

  • 浮动方式布局:使用 float 属性，使元素脱离文档流，浮动起来。浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素,即脱离文档流但不脱离文本流。

  • 定位布局：定位(positioning)能够让我们把一个元素从它原本在正常布局流(normal flow)中应该在的位置移动到另一个位置。定位(positioning)并不是一种页面布局的方式，它更像是让你去管理和微调页面中的一个特殊项的位置。

  • 弹性布局：用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。页面中任何一个元素只要设置了display:[flex属性] ，那么当前盒子都称为弹性盒子。弹性盒子默认有两条轴: 默认水平显示的主轴 和 始终要垂直于主轴的侧轴(也叫交叉轴)，在弹性盒子中所有的子元素都是沿着主轴方向显示。

  • 网格布局：就是像网一样有一个个格子一样的布局。在一个容器里面，我们可以切割成很多行很多列，形成一个个网格，从而对这些网格进行规则性的排序，使用，达到我们复杂的页面布局效果

三.相应布局实例应用

1.盒子模型

一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding(内边距) 、content（内容）。会发现margin、border、padding是(CSS属性) ，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。

  • content，即实际内容，显示文本和图像

  • boreder，即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成

  • padding，即内边距，清除内容周围的区域，内边距是透明的，取值不能为负，受盒子的background属性影响

  • margin，即外边距，在元素外创建额外的空白，空白通常指不能放其他元素的区域

  • 盒子模型有 2 种:标准盒子模型与怪异盒子模型

  • 标准盒子模型=content(内容)+border(边框)+padding(内边距)

  • 怪异盒子模型=content(内容)(已经包含了 padding 和 border)

 /* 盒子模型：外边距+边框+内边距+内容 */
        .first{
            width: 100px;
            height: 100px;
            border: 5px solid;
            /* 内边距：内容与父元素边框四周的距离 */
            padding: 20px;
            
        }
        .second{
            margin: 20px;
            color: gray;
        }
        .third{
            margin: 40px;
        }

效果如下

image.png

2.浮动布局

浮动的特征

1.脱离文档流 通过元素的class值“box”给元素添加相应的float属性，box会脱离文档流，向指定方向浮动。这也意味着box无需占据位置，其他元素按照box不存在的情况进行排列，即会出现另一个元素移动到box元素的位置上。

2.只影响内联元素布局 元素浮动之后，不会影响其他块元素的布局，只会影响内联元素的布局。（利用这个特性可以做出图文环绕的效果）

3.块元素在同一行显示 浮动可以取代inline-block的功能，让多个块元素同处一行。

4.默认内容撑开宽度 未设置宽度时，根据块元素的特征，宽度撑满整行。处于浮动状态下的块元素，将默认内容撑开宽度。

5.内联元素支持宽高 未设置浮动的情况下，根据内联元素的特点，所设置的宽高无效，默认内容撑开宽度。给内联元素设置float属性后，内联元素可支持宽高。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动布局</title>
	<style>
		.box1{
			width: 200px;
			height: 200px;
			background-color: red;
			float: left;
			clear: left;
		}
		.box2{
			width: 200px;
			height: 200px;
			background-color: blue;
		}
		.box3{
			width: 200px;
			height: 200px;
			background-color:green;
			float: left;
		}
	</style>
</head>
<body>
	<div class="box1">这是第一个div</div>
	<div class="box2">这是第二个div</div>
	<div class="box3">这是第三个div</div>
</body>

实例图如下

image.png

若清除第一个盒子浮动效果，则

image.png

3.定位布局

相对定位

相对定位就是相对于自己以前在标准流中的位置来移动 ​ position: relative; ​ 使用top,right,bottom,left来控制

  • 相对定位注意点

相对定位是不脱离标准流的, 会继续在标准流中占用一份空间

在相对定位中同一个方向上的定位属性只能使用一个

由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素

由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位 的元素设置margin/padding等属性的时会影响到标准流的布局

  • 相对定位应用场景

用于对元素进行微调

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位布局</title>
	<style>
        .child {
          float: left; /* 让所有的 child 元素靠左侧排列 */
          margin: 5px;
          width: 100px;
          height: 100px;
          background-color: #2c3e50;
          color: #fff;
        }
        .child2 {
          background-color: #3498dbf0; /* 十六进制色值表示法，前面六位代表色值，后两位代表透明度 */
          position: relative; /* 定义相对定位 */
          top: 50px; /* 元素顶部距离 */
          left: 50px; /* 元素左侧距离 */
        }
      </style>
      </head>
      <body>
        <div class="child child1">child1</div>
        <div class="child child2">child2</div>
        <div class="child child3">child3</div>
        <div class="child child3">child4</div>
      </body>

效果如下：

image.png

绝对布局

浮动布局中浮动起来的元素，只是“半删除”。即对HTML端的块元素来说浮动起来的元素仿佛从流中被删除了。但对HTML端的内联元素来说浮动起来的元素仍旧存在。

绝对布局就不是“半删除”了，而是从HTML流中彻底删除该元素。被删除的元素和原始HTML流中其他元素，处于不同层面，这就产生了分层的概念。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位布局</title>
	<style>
        .father {
          margin: 0 auto; /* 水平居中 */
          width: 500px;
          height: 200px;
          border: 5px double skyblue;
          /* position: relative; */
        }
        .child {
          float: left; /* 让所有的 child 元素靠左侧排列 */
          margin: 5px;
          width: 100px;
          height: 100px;
          background-color: #2c3e50;
          color: #fff;
        }
        .child2 {
          background-color: #3498dbf0; /* 十六进制色值表示法，前面六位代表色值，后两位代表透明度 */
          position: absolute; /* 设置绝对定位 */
          top: 50px; /* 元素顶部距离 */
          left: 50px; /* 元素左侧距离 */
        }
      </style>
      </head>
      <body><div>
        <div class="father">
          <div class="child child1">child1</div>
          <div class="child child2">child2</div>
          <div class="child child3">child3</div>
          <div class="child child3">child4</div>
        </div>
      </div>
    </body>

效果如下

image.png

4.弹性布局

弹性布局在网页中实现快速分配比例，盒子快速对齐优势很大，因为通过简单的几个属性就可以实现，进而减少我们设置具体值。但是弹性布局中的属性对于浏览器版本要求比较严格，如果浏览器版本太低那么弹性布局中的属性是无法正常使用的。

优点在于其容易上手，根据flex规则很容易达到某个布局效果。

缺点是：浏览器兼容性比较差，只能兼容到ie9及以上。

设置两个元素横向排列

<head>
    <meta charset="UTF-8">
    <title>弹性布局</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .box{
            width: 100%;
            height: 300px;
            display: flex;
        }
        .left{
            width: 50%;
            height: 300px;
            background: rgb(90, 158, 183);
        }
        .right{
            width: 50%;
            height: 300px;
            background: rgb(228, 31, 64);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

image.png

5.网格布局

网络布局将网页划分成一个个网格，可以组合任意不同的网格，做出各样的布局

区别：grid布局与flex布局一定的相似性，都可以指定容器内多个项目的位置。但是它们也存在重大区别

flex 布局是轴线布局，只能指定项目针对轴线位置，可以看作是一维布局 grid 布局则是将容器划分成不同的“行”和“列”，产生单元格，让和指定“项目所在单元格”，可以看作是二维布局，

	<title>网格布局</title>
	<style type="text/css">
	.main{
    display: grid;
    width: 600px;
    height: 600px;
    border: 10px solid skyblue;
}
.item{
    font-size: 50px;
    background-color: red;
    color: #fff;
}
 
.item-1{
    background-color: orangered;
}
.item-2{
    background-color: orange;
}
.item-3{
    background-color: palegreen;
}
.item-4{
    background-color: palevioletred;
}
.item-5{
    background-color: papayawhip;
}
.item-6{
    background-color:peru;
}
.item-7{
    background-color:pink;
}
.item-8{
    background-color:royalblue;
}
.item-9{
    background-color: saddlebrown;
}
.item-10{
    background-color: slateblue;
}

	</style>
</head>
<body>
    <div class="main">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
        <div class="item item-6">6</div>
        <div class="item item-7">7</div>
        <div class="item item-8">8</div>
        <div class="item item-9">9</div>
        <div class="item item-10">10</div>
    </div>
</body>

效果如下：

image.png

四.布局注意

在进行页面布局时主要考虑以下几方面：

（1）要有整体意识。

（2）从外向内，层层递进。

（3）模块化。

（4）命名规则。

参考博文：

blog.csdn.net/m0_53156691…

t.csdn.cn/O3ZIX

blog.csdn.net/qq_51563529…

avatar
文章
阅读
粉丝