CSS布局大全

最新推荐文章于 2024-08-21 14:09:37 发布
最新推荐文章于 2024-08-21 14:09:37 发布
阅读量379 收藏 2
点赞数 1
分类专栏： css的tips 文章标签： CSS布局大全 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/miao_599/article/details/103120209
版权

CSS布局大全

水平居中布局

inline-block(子)+text-align(父)

缺点：text-align具有继承性导致子集文本内容默认居中显示

 #parent{
            background-color: palevioletred;
            width: 100%;
            height: 300px;
            text-align: center;
        }
  #child{
            background-color: papayawhip;
            display: inline-block;
            width: 200px;
            height: 100px;
        }

body中结构：
水平居中实现方式1
网页效果展示：
在这里插入图片描述

table（子）+margin（子）

缺点：如果子集元素脱离文档流（float，absolute，fixed），导致margin无效

#parent{
            background-color: palevioletred;
            width: 100%;
            height: 300px;
        }
 #child{
            background-color: papayawhip;
            margin: 0 auto;
            display: table;/*转换成块级元素*/
        }

body结构：

<body>
    <!-- 水平居中布局 -->
    <div id="parent">
        <div id="child">
            我是水平居中布局table+margin
        </div>
    </div>
</body>

效果：
在这里插入图片描述

relative(父开定位即可)+absolute（子）+transform(子) —>推荐

缺点：css3新增属性，浏览器支持性不好

#parent{
            background-color: palevioletred;
             position: relative;/*开定位即可fixed也行 */
            width: 100%;
            height: 300px;
        }
  #child{
            background-color: papayawhip;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }

body结构：

<body>
    <!-- 水平居中布局 -->
    <div id="parent">
        <div id="child">
            我是水平居中布局absolute+transform
        </div>
    </div>
</body>

效果展示：
在这里插入图片描述

垂直居中布局

table-cell（父）+vertical-aligh(父)

父：相当于单元格，子相当于其中的文本
缺点具有继承性

#parent{
            background-color: palevioletred;
            display:table-cell;
            vertical-align: middle;
            width: 100%;
            height: 300px;
        }
 #child{
            background-color: papayawhip;
            
        }

body结构：

<body>
    <!-- 垂直居中布局 -->
    <div id="parent">
        <div id="child">
            我是垂直居中布局table-cell+vertical-aligh
        </div>
    </div>
</body>

效果展示：
在这里插入图片描述

relative(父)+absolute(子)+transform（子)

父加定位即可fixed也可

#parent{
            background-color: palevioletred;
            position: fixed;
            width: 100%;
            height: 300px;
        }
 #child{
            background-color: papayawhip;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

body结构：

<body>
    <!-- 垂直居中布局 -->
    <div id="parent">
        <div id="child">
            我是垂直居中布局absolute+transform
        </div>
    </div>
</body>

多列布局

两列布局

float+margin

#left{
           width: 200px;
           height: 300px;
           background-color:yellow;
           float:left;
       }
#right{
           height: 300px;
           background-color: purple;
           margin-left: 200px;
       }

body结构：

<body>
    <!-- 两列布局 -->
    <div id="left">两列布局左</div>
    <div id="right">两列布局右</div>
</body>

效果展示：
在这里插入图片描述

float+overflow

overflow：hidden会开启BFC模式，当前元素的内部环境与外界完全隔离

#left{
           width: 200px;
           height: 300px;
           background-color:yellow;
           float:left;
       }
#right{
           height: 300px;
           background-color: purple;
           overflow:hidden;
       }

display:table

	   #parent{
           display: table;
           width: 100%;
       }
       #left{
           display: table-cell;
           width: 200px;
           height: 300px;
           background-color:yellow;
       }
       #right{
           height: 300px;
           background-color: purple;
       }

body结构：

<body>
    <!-- 两列布局 -->
    <div id="parent">
        <div id="left">两列布局左</div>
        <div id="right">两列布局右</div>
    </div>
</body>

圣杯布局（定宽+自适应+定宽）

在这里插入图片描述

      #left,#right{
           width: 200px;
           background-color: pink;
           height: 300px;
       }
       #center{
           height: 300px;
           background-color: powderblue;
           margin-left: 200px;
           margin-right:200px;
       }
       #left{
           float: left;
       }
       #right{
           float:right;
       }

body中的结构：

<body>
    <!-- 圣杯布局 -->
    <div id="left">左侧</div>
    <div id="right">右侧</div>
    <div id="center">中间</div>
</body>

效果展示：
在这里插入图片描述

圣杯布局center在上

为了对搜索引擎友好，要把最重要的center放在第一位加载，因此body结构应该如下：

<body>
    <!-- 圣杯布局 -->
    <div id="parent">
        <div id="center">中间</div>
        <div id="left">左侧</div>
        <div id="right">右侧</div>
    </div>
</body>

相应的css布局代码如下：

	   #parent{
           
           margin-left:200px;
           margin-right:200px;
       }
       #left{
           background-color: yellow;
           width: 200px;
           height: 300px;
           float:left;
           margin-left: -100%;
           position: relative;
           left: -200px;
       }
       #right{
           background-color: palevioletred;
           width: 200px;
           height: 300px;
           float: left;
           margin-right: -200px;
       }
       #center{
           background-color: powderblue; 
           height: 300px;
           float: left;
           width: 100%;
       }

效果展示：
在这里插入图片描述

双飞翼布局

淘宝团队出品，上述圣杯布局较为复杂，双飞翼改善了定位
上述代码若去掉定位则出现如下效果，中间二字不见了：


因此为了改善需要加个子标签div#inner：
body结构：

<body>
    <!-- 双飞翼布局：优化了圣杯布局中的定位 -->
    <div id="parent">
        <div id="center">
            <div id="inner">中间</div>
        </div>
        <div id="left">左侧</div>
        <div id="right">右侧</div>
    </div>
</body>

css结构：

     #parent{
            height: 300px;
       }
       #left{
           background-color: yellow;
           width: 200px;
           height: 300px;
           margin-left: -100%;
           float:left;
       }
       #right{
           background-color: palevioletred;
           width: 200px;
           height: 300px;
           margin-left: -200px;
           float:left
       }
       #center{
           background-color: powderblue; 
           height: 300px;
           width:100%;
           float: left;
       }
        #inner{/*增加了这部分 */
           height: 300px;
           background-color: pink;
           margin-left: 200px;
           margin-right: 200px;
       }

效果如下：
在这里插入图片描述

等分布局

float+width:20%

.child1,.child2,.child3,.child4,.child5{
           height: 200px;
           width: 20%;
           float: left;
       }

<body>
    <!-- 等分布局 -->
    <div id="parent">
        <div class="child1">1</div>
        <div class="child2">2</div>
        <div class="child3">3</div>
        <div class="child4">4</div>
        <div class="child5">5</div>
    </div>
</body>

display:table(父)+display：table-cell（子）

在这里插入图片描述

	  #parent{
           display: table;
           table-layout: fixed;
           width: 100%;
           height: 300px;
       }
       .child1,.child2,.child3,.child4,.child5{
           display: table-cell;
           width:20%;
       }

<body>
    <!-- 等分布局 -->
    <div id="parent">
        <div class="child1">1</div>
        <div class="child2">2</div>
        <div class="child3">3</div>
        <div class="child4">4</div>
        <div class="child5">5</div>
    </div>
</body>

效果：
在这里插入图片描述

css3(新增属性):columns

columns=column-count+column-width

#parent{
           column-count: 5;
           column-width:200px ;
           column-gap: 0;
           
       }

html结构同上
效果同上

miao_599
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【CSS笔记】CSS布局相关属性（显示元素、文本溢出、元素浮动）
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
08-18 377
当子级元素使用浮动属性之后，它的父级元素如果没有设置高度，那么由于浮动元素脱离文档流，不占据文档流的高度，所以从而导致父级元素的高度不能被撑开。CSS可以通过【display】属性来设置HTML元素是否显示，以及显示的方式，是以行内元素显示，还是以块内元素显示，还是以行内块元素显示。也可以设置为none隐藏元素，display设置隐藏元素之后，元素不会占据原先的空间，后面的元素会填充隐藏元素的空间位置。，也就是这个元素不占据原先的空间，后面的元素会填充浮动元素原先的空间。要如何解决父级元素的高度问题呢？..
CSS布局汇总
lihaoen666的博客
09-06 243
水平布局 float等宽固定布局（float+width） float流式布局（float+width+margin-left） float自适应布局（float+width+margin-right+display） 左浮动+右侧定宽（float+width+margin-left） 右浮动+左侧定宽（float+width+margin-right）注意，html结构是右边的box1在前！！
CSS布局和属性
weixin_45701868的博客
04-04 898
目录​​​​​​​ 一、尺寸属性 二、盒子模型 三、布局属性 display和visibility 浮动和清理浮动 定位 四、背景属性 固定背景图片 渐变 五、文本属性 透明度 文本 六、过渡效果 ​编辑 七、2D转换 ​编辑 八、弹性布局 一、尺寸属性 auto:无特定宽度值，由内容决定大小(默认值)。 <length>：用长度值来设定宽/高度。不允许负值。 <percentage>: 用百分比来设定宽度。不允许负值。 高度为10..
CSS布局常用属性
qq_64281750的博客
05-25 759
定位属性 盒子的定位涉及盒子的类型，盒子可分为块内元素和行内元素，在CSS中通过display属性来设置盒子的块内元素还是行内元素。作为块内元素的盒子，例如<div>，<p>，HTML规定上下排列，如果是行内元素则左右排列。 使用position属性可以精确的控制盒子的位置，语法格式如下 position:static| relative | absolute | fixed ...
css--DIV+CSS布局、常用属性、盒模型、自定义字体、标签的分类及相互转换
小白小白从不日别的博客
05-11 1915
目录 一、DIV+CSS布局 1.1 布局时常用的属性 1.2 布局 - 上中下结构 1.3 布局 - 上中下 - 左右 1.4 圣杯布局和双飞翼布局 二、字体属性 2.1 字体颜色 2.2 字体大小 2.3 字体加粗 2.4 字体样式 2.5 字体类型 三、背景属性 3.1 背景颜色 3.2 背景图片 3.3 背景图片是否平铺 3.4 背景图片大小 3.5 背景定位 3.6 背景是否固定 四、文本属性 4.1 文本水平对齐方式 4.2 文本装饰 4.3 文本..
css布局以及一些常用属性
Daydream Mr.的博客
01-03 1098
display（显示）是css布局中常用的属性，他的值分别有以下几种（下面列出为常见的几种） 1、block（块级元素）例如以下标签：div、p、form、header、footer、section等 2、inline（行内元素）例如以下标签：span、a等 3、none（没有、不显示）例如以下标签：script  *注意：他和visibility（能见度）不同，把display设置成none，不...
css经典全布局
weixin_44667463的博客
02-20 1566
css经典超全布局
div+css布局大全
03-22
在"div+css布局大全"的PDF文件中，读者可以期待全面覆盖这些知识点，从基础概念到高级技巧，帮助开发者构建高效、美观的Web页面布局。通过学习和实践，开发者能够更好地掌握Web前端的核心技能，提升项目的表现力和...
div和CSS布局大全
01-03
《Div+CSS布局大全》是一本...通过学习《Div+CSS布局大全》，开发者不仅能掌握网页布局的基本原理，还能提升解决实际问题的能力，打造出符合现代网页设计标准的项目。这本书是初学者和进阶者学习网页布局的宝贵资源。
DIVCSS布局大全
12-28
《DIVCSS布局大全》是一本深入探讨网页布局技术的专业书籍，主要聚焦于使用HTML的`<div>`元素和CSS（层叠样式表）进行高效、灵活的网页设计。在这个数字化的时代，网页布局的重要性不言而喻，它直接影响到用户体验和...
CSS常用布局属性
小毛驴
12-24 629
定位 谈及定位，我们就得从position属性说起。你能准确的说出position的属性值吗？相信你可以完美地说出这么六个属性值：static、relative、absolute、fixed、sticky和inherit。 static(默认)：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分；行内元素则会创建一个或多个行框，置于其父元素中。 relative：元素框相对于之前正常文档流...
Div+CSS 布局大全
xuewuzhijing10的专栏
03-29 7813
《Div+CSS 布局大全》               整理者：Jesse Zhao   网站：http://JesseZhao.cnblogs.co m                                                         第 1 页 《Div +
css布局属性（重点！！！）
qq_275487025的博客
08-09 2361
QQ:275487025 QQ群：854312770 欢迎各种大牛指点，和小白一起学习。 （重点）position定位属性： relative相对定位特点是： 相对于游览最上边的左上角或者右上角来定位，但是**不会让出原位置**，除非浮动后，才会让出原位置； absolute绝对定位特点： 这个有两种情况： 情况1：看他是否有脱离文档流（浮动或相对定位）的父元素，有的话就以...
前端字符串将其分割成长度为 32 的子字符串数组
人与人之间最小的差别是智商，最大的差别是坚持。
08-19 356
要实现这个需求，可以编写一个简单的 JavaScript 函数来处理字符串并将其分割成长度为 32 的子字符串数组。将字符串切割后，对list数据进行数据处理。
【js】各类前端输入校验方法
最新发布
galaxyJING的博客
08-21 151
【代码】【js】各类前端输入校验方法。
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 1149
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
iOS WebView
m0_61227789的博客
08-21 249
在iOS开发中，WebView 是一个用于显示网页内容的控件。它允许你在应用程序中嵌入一个浏览器窗口，以便加载和显示网页。iOS 提供了两种主要的 WebView 类：UIWebView 和 WKWebView。其中，WKWebView 是较新的、更强大的选项，推荐在新项目中使用。
CORS error && 302 Found
zcxbd的博客
08-19 182
单点登录认证：访问A系统，在B系统登录认证此处代码为A系统。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值