CSS常用布局学习

最新推荐文章于 2024-04-26 15:21:52 发布
最新推荐文章于 2024-04-26 15:21:52 发布
阅读量211 收藏 4
点赞数
分类专栏： CSS 文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010259906/article/details/120794823
版权

CSS常用布局学习

1、水平居中

1.1 行内元素/行内块元素水平居中

给父元素设置text-align:center。

.parent{
        text-align:center;
}
<div class="parent"><span>水平居中</span></div>

优缺点

  • 优点：简单快捷，容易理解，兼容性非常好
  • 缺点：**只对行内内容有效；**属性会继承影响到后代行内内容；如果子元素宽度大于父元素宽度则无效，只有后代行内内容中宽度小于设置text-align属性的元素宽度的时候，才会水平居中

1.2 块级元素水平居中

定宽块级元素水平居中

只需给需要居中的块级元素加margin:0 auto即可，但这里需要注意的是，这里块级元素的宽度width值一定要有

  .center{
      width:200px;
      margin:0 auto;
      border:1px solid red;
  }
  <div class="center">水平居中</div>

优缺点

  • 优点：简单；兼容性好
  • 缺点：必须定宽，并且值不能为auto；宽度要小于父元素，否则无效

不定宽块级元素水平居中

不定宽即块级元素宽度不固定

方法一:设置table

通过给要居中显示的元素，设置display:table，然后设置margin:0 auto来实现。

.center{
      display:table;
      margin:0 auto;
      border:1px solid red;
  }
  <div class="center">水平居中</div>
方法二：设置inline-block(多个块级元素)

子元素设置inline-block，同时设置父元素text-align:center。

 .parent{
      text-align:center;
  }
  .inlineblock-div{
      display:inline-block;
  }
  <div class="parent">
      <div class="inlineblock-div">1</div>
      <div class="inlineblock-div">2</div>
  </div>

在这里插入图片描述
优缺点

  • 优点：简单，容易理解，兼容性非常好
  • 缺点：只对行内内容有效；属性会继承影响到后代行内内容；块级改为inline-block换行、空格会产生元素间隔
方法三: 设置flex布局（多个块级元素）

只需把要处理的块状元素的父元素设置display:flex,justify-content:center;

  .parent{
      display:flex;
      justify-content:center;
  }
  <div class="parent">
      <div class="flex-div">1</div>
      <div class="flex-div">2</div>
  </div>

在这里插入图片描述
优缺点

  • 优点：功能强大；简单方便；容易理解
  • 缺点：PC端兼容性不好，移动端（Android4.0+）
方法4：position + 负margin；
.parent {
  position: relative;
  height: 400px;
  border: 1px solid red;
}
.son {
  position: relative;
  width: 100px;
  height: 100px;
  left: 50%;
  margin-left: -50px;
  border: 1px solid orange;
}
 <div class="parent">
    <div class="son">HelloWorld!</div>
  </div>

优缺点

  • 优点：使用margin-left兼容性好；不管是块级还是行内元素都可以实现
  • 缺点：使用margin-left需要知道宽度值；
方法5：position + margin：auto；
.parent {
  position: relative;
  height: 400px;
  border: 1px solid red;
}
.son {
  position: relative;
  width: 100px;
  height: 100px;
  left: 0;
  right: 0;
  margin: auto;
  border: 1px solid orange;
}
 <div class="parent">
    <div class="son">HelloWorld!</div>
  </div>
方法6：position + transform；
.parent {
  position: relative;
  height: 400px;
  border: 1px solid red;
}
.son {
  position: relative;
  width: 100px;
  height: 100px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid orange;
}
 <div class="parent">
    <div class="son">HelloWorld!</div>
  </div>

缺点: 使用transform兼容性不好（ie9+）

总结

  • 对于水平居中，我们应该先考虑，哪些元素有自带的居中效果，最先想到的应该就是 text-align:center 了，但是这个只对行内内容有效，所以我们要使用 text-align:center 就必须将子元素设置为 display: inline; 或者 display: inline-block; ；
  • 其次就是考虑能不能用margin: 0 auto; ，因为这都是一两句代码能搞定的事，实在不行就是用绝对定位去实现了。
  • 移动端能用flex就用flex，简单方便，灵活并且功能强大，无愧为网页布局的一大利器！

2、垂直居中

2.1 单行文本垂直居中

原理：line-height的最终表现是通过inline box实现的，而无论inline box所占据的高度是多少（无论比文字大还是比文字小），其占据的空间都是与文字内容公用水平中垂线的。

.parent {
  height: 200px;
  line-height: 200px;
  border: 1px solid red;
}
 <div class="parent">
    <span>好好学习</span>
  </div>

优缺点

  • 优点：简单；兼容性好
  • 缺点：只能用于单行行内内容；要知道高度的值

2.2 图片居中

.parent{
    height: 150px;
    line-height: 150px;
    font-size: 0;
}
.son{vertical-align: middle;} /*默认是基线对齐，改为middle*/

优缺点

  • 优点：简单；兼容性好
  • 缺点：需要添加font-size: 0; 才可以完全的垂直居中；不过需要注意，parent包裹img之间需要有换行或空格

2.3 多行文本的垂直居中

通过设置父元素table，子元素table-cell和vertical-align
vertical-align:middle的意思是把元素放在父元素的中部

.parent {
  display: table;
  height: 400px;
  border: 1px solid red;
}
.son {
  display: table-cell;
  vertical-align: middle;
}
 <div class="parent">
    <span class="son"
      >多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本</span
    >
  </div>

在这里插入图片描述

2.4 块级元素垂直居中

定高度垂直居中

利用position和top和负margin。

第一步:给父元素设置postion。
第二步:设置要垂直居中的块级元素postion:absolute/relative/fixed。
第三步: 设置margin=高度的负一半。

.parent {
  position: relative;
  height: 400px;
  border: 1px solid red;
}
.son {
  position: relative;
  height: 200px;
  width: 100px;
  top: 50%;
  margin-top: -100px;

  border: 1px solid orange;
}

  <div class="parent">
    <div class="son"></div>
  </div>
利用position和bottom、top、margin
.parent {
  position: relative;
  height: 400px;
  border: 1px solid red;
}
.son {
  position: absolute;
  bottom: 0;
  top: 0;
  margin: auto;

  width: 100px;
  height: 100px;
  border: 1px solid orange;
}

  <div class="parent">
    <div class="son">HelloWorld!</div>
  </div>

不定高垂直居中

position和top和transform
.parent {
  position: relative;
  height: 400px;
  border: 1px solid red;
}
.son {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
  border: 1px solid orange;
}
 <div class="parent">
    <div class="son">HelloWorld</div>
  </div>
利用flex

在需要垂直居中的父元素上，设置display:flex和align-items：center.
要求：父元素必须显示设置height值

.parent {
  display: flex;
  align-items: center;
  height: 400px;
  border: 1px solid red;
}
  <div class="parent">
    <div class="son">HelloWorld</div>
  </div>

优缺点

  • 优点：简单灵活；功能强大
  • 缺点：PC端兼容性不好，移动端（Android4.0+）

总结

  • 对于垂直居中，最先想到的应该就是 line-height 了，但是这个只能用于行内内容；
  • 其次就是考虑能不能用vertical-align: middle; ，不过这个一定要熟知原理才能用得顺手，建议看下vertical-align和line-height的基友关系 ；
  • 然后便是绝对定位，虽然代码多了点，但是胜在适用于不同情况；
  • 移动端兼容性允许的情况下能用flex就用flex

3、水平垂直居中

3.1 行内/行内块/图片

原理：text-align: center; 控制行内内容相对于块父元素水平居中,然后就是line-height和vertical-align的基友关系使其垂直居中，font-size: 0; 是为了消除近似居中的bug

.parent{
    height: 150px;
    line-height: 150px;  /*行高的值与height相等*/
    text-align: center;
    font-size: 0;   /*消除幽灵空白节点的bug*/
}
.son{
    /*display: inline-block;*/  /*如果是块级元素需改为行内或行内块级才生效*/
    vertical-align: middle;
}
  • 优点：代码简单；兼容性好（ie8+）
  • 缺点：只对行内内容有效；需要添加font-size: 0; 才可以完全的垂直居中；不过需要注意html中parent包裹son之间需要有换行或空格；熟悉line-height和vertical-align的基友关系较难.

3.2 table-cell

原理：CSS Table，使表格内容垂直对齐方式为middle,然后根据是行内内容还是块级内容采取不同的方式达到水平居中

.parent{
    height: 150px;
    width: 200px;
    display: table-cell;
    vertical-align: middle;
    /*text-align: center;*/   /*如果是行内元素就添加这个*/
}
.son{
    /*margin: 0 auto;*/    /*如果是块级元素就添加这个*/
    width: 100px;
    height: 50px;
}
  • 优点：简单；适用于宽度高度未知情况；兼容性好（ie8+）
  • 缺点：设置tabl-cell的元素，宽度和高度的值设置百分比无效，需要给它的父元素设置display: table; 才生效；table-cell不感知margin，在父元素上设置table-row等属性，也会使其不感知height；设置float或position会对默认布局造成破坏，可以考虑为之增加一个父div定义float等属性；内容溢出时会自动撑开父元素。

3.1 定位 + margin:auto

.parent {
  position: relative;
  height: 400px;
  border: 1px solid red;
}
.son {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  margin: auto;

  width: 100px;
  height: 100px;
  border: 1px solid orange;
}

3.2 定位+负margin

.parent {
  position: relative;
  height: 400px;
  border: 1px solid red;
}
.son {
  position: relative;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  width: 100px;
  height: 100px;
  border: 1px solid orange;
}
  <div class="parent">
    <div class="son">HelloWorld!</div>
  </div>

3.3 定位 + transform

.parent {
  position: relative;
  height: 400px;
  border: 1px solid red;
}
.son {
  position: absolute;
  left: 50%; /* 定位父级的50% */
  top: 50%;
  transform: translate(-50%, -50%); /*自己的50% */
  border: 1px solid orange;
}

 <div class="parent">
    <div class="son">HelloWorld!</div>
  </div>

3.4 flex

.parent {
  display: flex;
  justify-content: center; /*子元素水平居中*/
  align-items: center; /*子元素垂直居中*/
  /* aa只要三句话就可以实现不定宽高水平垂直居中。 */
  height: 400px;
  border: 1px solid red;
}
.son {
  border: 1px solid orange;
}
 <div class="parent">
    <div class="son">HelloWorld!</div>
  </div>

参考文档:
干货!各种常见布局实现+知名网站实例分析
https://segmentfault.com/a/1190000022096517

海森堡_lichangan
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS基础学习
Birdlun的博客
12-16 350
目录 1 CSS(Cascading stye sheets)ceng层叠样式表 作用： css中样式的定义(引入方式)： 2 CSS语法: 3.1 css字体和文本的相关属性： 3.2 文本属性： 3.3 css的边框与背景 边框： 3.4 背景： 3.5 列表元素的属性： 3.6 表格的属性： 3.7 css伪类别属性 3.8div的使用 3.9布局 1 CSS...
css布局教程 — 这一篇足够了
qq_60754128的博客
11-11 3930
display是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是block或inline。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。
【css】最全布局总结
qq_45406325的博客
08-13 7832
布局就是控制元素位置、大小，常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等，我会从文档流，容器，效果这些角度介绍
CSS 网页布局（详解网页的布局构造）
最新发布
百赢出品，必属精品
04-26 1681
网页布局是将网页内容按照一定的结构和规则进行排版和组织，使得页面具有良好的结构和易读性。它涉及到页面元素的位置、大小、间距等方面的设计。头部区域、菜单导航区域、内容区域、底部区域。了解网格系统的概念和作用，掌握如何设计和实现网格布局，以及如何利用网格系统进行页面排版和元素定位。理解响应式设计的原理和重要性，掌握使用媒体查询、流式布局等技术实现网页在不同设备上的自适应显示。熟悉CSS中的各种布局模型，包括常规文档流、浮动布局、定位布局（相对定位、绝对定位、固定定位）、Flexbox布局和栅格布局等。
爆肝！！一文带你全面学习Css所有布局方式
weixin_53061926的博客
11-02 422
爆肝！！！一篇文章带你全面学习 css的所有布局方式，相信绝对能帮到您
CSS页面布局（超详解）
热门推荐
m0_52896041的博客
12-02 2万+
浮动的框可以向左或向右移动，直到其外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档普通流中，所以文档普通流中的块元素表现得就像浮动框不存在一样。HTML文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用的空间，这个模型称为盒子模型。
CSS基础入门 ----- 网页布局
weixin_65489884的博客
03-04 799
网页页面设计
HTML+CSS布局(常用css控制属性)小结
09-25
在这个小结中，我们将探讨一些常用的CSS控制属性，这些属性对于创建响应式和有组织的页面布局至关重要。 首先，CSS布局的基本属性包括`width`、`height`、`margin`和`padding`。在示例中，`#contner`元素的宽度设置...
学习CSS布局
06-27
值得注意的是，`inline-block`和`flex`（弹性布局）是现代CSS布局中常用的两种模式，它们分别提供了结合内联和块级特性的元素布局，以及更灵活的多维度布局解决方案。 接着，我们谈到如何使用【margin: auto】实现...
css网站布局实录学习笔记第三部分网页布局与定位
09-25
在XHTML中，`div`元素是最常用的布局工具，它作为一个容器，主要用于内容的浮动和定位。 **3.1 div元素的理解与使用** - `div`是XHTML中的一个区块元素，它的主要目的是为了布局设计。在传统的表格布局中，`table`...
CSS常用布局
03-24
本资源"CSS常用布局"提供了40个实用的CSS+DIV布局方案，旨在帮助开发者和设计师灵活地创建多样化的网页结构。下面我们将深入探讨这些布局方案背后的CSS技术及其应用场景。 1. **浮动布局**：在早期的CSS布局中，`...
学习DIV+CSS网页布局之三列布局
09-24
三列布局是网页设计中常用的一种布局模式，它可以灵活地适应不同的设计需求。通过理解和掌握`DIV+CSS`中的宽度自适应和固定宽度的三列布局技巧，设计师能够创建出既美观又功能强大的网页。无论是对于初学者还是经验...
一篇全面的CSS布局学习指南 [译]
weixin_34289454的博客
07-07 269
本文来自SmashingMagazine上一篇非常不错的CSS布局综述类文章，汇总了各类CSS布局技术，并提供了这些技术深度阅读的链接。故而翻译过来和大家分享，原文链接在文末，感谢作者Rachel Andrew。 引言 无论你是一个想要学习CSS布局的新手，还是一个比较有经验但想要进一步巩固与了解最新CSS布局知识的前端开发者，这篇指南都能帮你全面了解如今CSS布局发展的现状。 在过去的许多年...
前端基础--CSS布局学习
HopCoder
06-05 640
最近学习小程序发现很多关于css布局的东西都不是很懂，所以学习记录下关于CSS布局相关的知识。 学习资料：http://zh.learnlayout.com/ “display”属性 block：块级元素 inline：行内元素 none：一些特殊元素的默认 display 值是它，例如 script 。 display:none 通常被 JavaScript 用来在不删除元素的情况下隐...
【前端布局规范与方案】CSS常见布局方式以及其实现方法
cannotbecounted的博客
06-30 556
对前端开发中常见的布局方式以及其实现方式进行简要的介绍。
CSS布局学习
Wangyifan1596的博客
06-17 597
CSS布局
CSS基础学习——基本布局
qq_41890177的博客
07-25 233
一、双飞翼布局 由三列组成，两端固定，中间自适应。 双飞翼布局的优点：兼容性好，兼容所有主流浏览器，包括万恶的IE6，因为在DOM中center_panel在三列结构的最前面，因此可以实现主要内容的优先加载。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>双飞翼布局</title> <style>
深度学习CSS弹性盒布局：完整、简便、响应式的页面布局
虽然基于浮动的布局至今仍然是最常用的方法，但设计师一直在改进其用法，并引入了栅格系统等工具来辅助布局。CSS定位模块的引入使得相对定位和绝对定位成为可能，进一步拓展了布局的可能性。然而，针对一些特殊布局...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值