css布局分类以及布局的两种思路

最新推荐文章于 2022-10-05 21:45:45 发布

小杰同学i

最新推荐文章于 2022-10-05 21:45:45 发布

阅读量96

点赞数

文章标签： css 分类 css3

本文链接：https://blog.csdn.net/weixin_53562163/article/details/123252701

版权

两种

固定宽度布局，一般宽度是960 / 1000 / 1024px(一般是pc端)

不固定宽度布局，主要是靠文档流的原理来布局

文档流本来就是自适应的，不需要加额外的样式

第三种布局

响应式布局

意就是PC上固定宽度，手机上不固定宽度

也就是一种混合布局

布局的两种思路

从大到小

先定下大局

然后完善每个部分的小布局

从小到大

先完成小布局

然后组合成大布局

两种均可

新人推荐用第二种，因为小的简单

老手一般用第一种，因为熟练有大局观

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小杰同学i

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

CSS 网页布局（详解网页的布局构造）

百赢出品，必属精品

04-26

2088

网页布局是将网页内容按照一定的结构和规则进行排版和组织，使得页面具有良好的结构和易读性。它涉及到页面元素的位置、大小、间距等方面的设计。头部区域、菜单导航区域、内容区域、底部区域。了解网格系统的概念和作用，掌握如何设计和实现网格布局，以及如何利用网格系统进行页面排版和元素定位。理解响应式设计的原理和重要性，掌握使用媒体查询、流式布局等技术实现网页在不同设备上的自适应显示。熟悉CSS中的各种布局模型，包括常规文档流、浮动布局、定位布局（相对定位、绝对定位、固定定位）、Flexbox布局和栅格布局等。

收藏！40 个 CSS 布局技巧

BDawn的专栏

07-20

366

版权声明：本文为CSDN博主「阿里技术官方号」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/alitech2017/article/details/107460459 简介：CSS是Web开发中不可或缺的一部分，随着Web技术的不断革新，CSS也变得更加强大。CSS的众多属性你知道了多少？具体开发中该使用什么属性才最适合恰当？如今的一些CSS属性可以让我们节约更多的时间。比如在Web布局中，现代CSS特性就可以更.

参与评论您还未登录，请先登录后发表或查看评论

css 布局的几种方式

热门推荐

zhang6223284的博客

08-21

6万+

前言 1 table 布局 2 flex 布局 2.1 盒模型 2.2 display / poistion 2.3 flexbox 布局 3 float 布局前言 CSS 的布局应该是 CSS 体系中的重中之重了，主要的布局方式有 table 表格布局（早期），float 浮动布局和 flex 布局，还有针对于移动端的响应式布局，不论是工作还是面试都是非常重要的知识...

CSS布局方案以及思路

m0_61934949的博客

03-21

1683

前言在我们前端开发时，经常会遇到不同的场景页面布局问题，页面框架搭建是前端开发基础，也是十分重要的一环。本文先是对页面开发基本流程思路进行了总结，在此基础上对CSS布局常见方案进行梳理，涉及水平垂直居中、单列布局、两栏布局、圣杯布局、双飞翼布局、等高布局以及粘带布局。全文概要要点速看网页开发基本思路：确定版心--》分析行模块--》分析列模块；如果一行当中有多个模块，一定要放在同一个父模块中；列模块首先可以先给宽高背景颜色，实例化盒子；水平居中推荐使用方法：justify-co

CSS 页面布局整体思路

岁月的博客

08-12

408

为了提高网页制作的效率，布局时通常有以下的整体思路： 1,必须确定页面的核心(可视区)，我们测量可得知。 2,分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一准则。 3,一行中列模块经常浮动布局，先确定每个列的大小，之后确定列的位置，页面布局第二准则 4,制作HTML结构，我们还是遵循，现有结构，后有样式的原则。结构永远最重要 5,所以，先理清楚布局结构，再写代码尤为重要，这需要我们多谢多积累。 ...

CSS双飞翼布局的两种方式实现示例

09-24

在本文中，我们将深入探讨如何使用CSS来实现双飞翼布局的两种方法：一种是利用Flexbox（弹性盒子）布局，另一种则是通过绝对定位。首先，让我们看看使用Flexbox实现双飞翼布局的方式。Flexbox是CSS3引入的一种布局...

css两端对齐之div+css布局实现2端对齐的4种方法总结

12-30

div+css布局实现2端对齐是我们网页排版中经常会使用到的，这篇文章将总结一下可以实现的方法： html结构实现demo里面的div通过Css进行2端对齐。 <div>1 <div>2 <div>3 1.margin负值的方式该方法需要...

CSS网页布局实例常见的12种网页布局

12-08

本篇文章将深入探讨12种常见的CSS网页布局实例，帮助你为你的网站创建出引人注目的界面。 1. **单一列布局**：这是最基础的布局，整个页面只有一列内容，适用于博客或个人主页，简洁明了。 2. **两列固定宽度布局*...

CSS布局之圣杯布局与双飞翼布局

09-24

圣杯布局与双飞翼布局是CSS布局领域中经典的两种布局方法，主要用来创建一种具有左右两栏固定宽度，中间内容部分自适应宽度的布局结构。这两种布局技术在Web页面设计中应用广泛，尤其是在响应式设计中，它们能够很好...

css等高布局常用几种方式

01-19

从等高布局实现方式来说,又分为两类伪等高子元素高度差依然存在,只是视觉上给人感觉就是等高. 真等高子元素高度相等先来看看伪等高实现方式通过负margin和Padding实现真等高实现方式 table absoult flex ...

css布局和排版

qq_24497061的博客

12-22

914

最近刚完 ,现在把书中提到的布局简单介绍一下：先简单介绍下流概念：流是浏览器在页面上摆放html元素用的方法，浏览器从上到下按遇到的元素来显示各个元素，有点像流水的感觉。流体布局： A、float排版方法：原理：把边栏方放到主内容之上，页头之下，设置边框宽度和float(左或者右)了，就可以设置成两边栏的布局，当边栏的流出页脚的时候，页脚还可以使用clear属性。内元素ima

css适配布局分类

sinat_19594515的博客

11-09

422

一、静态布局（Static Layout）以像素作为页面的基本单位，不管设备和浏览器宽度，只设计一套尺寸。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。二、流式布局（Liquid Layout）也叫百分比布局。网页中主要的划分区域的尺寸使用百分数（搭配mi...

CSS布局--超详解版

qq_44906900的博客

10-12

540

CSS布局目录布局分类布局思路布局需要用到哪些属性 float布局 flex布局 grid布局（二维平均布局一、布局分类固定宽度布局：一般宽度设置为960、1000、1024px 不固定宽度布局：依靠文档流的原理来布局响应式布局：PC上一种布局样式，手机上又是另外一种布局样式二、布局思路从大到小(老手推荐) 先定下大局完善每个部分的小布局从小到大(新人推荐) 先完成小布局组合成大布局三、布局需要使用那些属性一图流四、float布局

常见 css 布局整理

欢迎来到Gorit的博客

02-11

2551

常用 css 布局学习整理一、垂直居中二、等分布局三、等高布局四、多列布局五、局中布局（垂直居中）六、全屏布局七、三列布局八、圣杯布局九、双飞翼布局十、水平居中十一、css 布局特别整理注意：代码里面都有比较详细的注释项目代码全部已经上传至码云和 Github，两个仓库我会同步更新码云 git 下载地址：git@gitee.com:gorit/Coding-with-Front-end...

【css】最全布局总结

qq_45406325的博客

08-13

9197

布局就是控制元素位置、大小，常见布局有标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等，我会从文档流，容器，效果这些角度介绍

css的常见6种布局方式

mangguom23的博客

01-19

4659

下面主要是针对三栏布局进行介绍：常见的三栏布局有，流体布局、圣杯布局、双飞翼布局、flex布局、绝对定位布局、网格布局流体布局两边的宽度是固定的，中间的宽度是可以根据屏幕的大小进行改变的。实现的关键点是，左边还有右边的元素分别给他们设置浮动，即左边设置成左浮动，右边是右浮动，并且要设置成固定的宽高；中间的主要模块，使用margin-left还有margin-right进行设置（设置的值为到父元素两侧的距离，这里指的就是到container这个父元素边距的距离） .left { floa

css常见布局

yuqin的博客

08-03

223

1.实现元素水平垂直居中 2.两列布局一列固定，一列自适应 ①float和margin <div class="left"></div> <div class="right"></div> .left{ float: left; width:100px; height:400px; background:red; }...

网格布局，实现网页图片不规则排版

YY的博客

10-05

3834

网格布局的各种属性，实现网页图片不规则排版

CSS布局解决方案——多列布局（不定款+自适应）

qq_39082301的博客

04-22

1149

方案一：使用float+overflow方案二：使用table方案三：使用flex

CSS新布局技巧：10种现代布局实现

作者提到在观看web.dev的2020直播时，受到启发决定分享这些现代CSS布局技巧。 1. **超级居中** 在Flexbox和Grid出现之前，垂直居中一直是CSS布局的一个难题。现在，通过结合使用`display: grid`和`place-items: ...