前端之CSS布局

最新推荐文章于 2024-07-12 14:38:32 发布

Violet永存

最新推荐文章于 2024-07-12 14:38:32 发布

阅读量1k

点赞数 13

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/AWSDN/article/details/136168009

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、前言

我们来继续更新CSS的内容，往期的内容可以到前端专栏里去看，也可以点下面的链接

HTML常用内容：

https://blog.csdn.net/AWSDN/article/details/136112174spm=1001.2014.3001.5501
CSS前言：

https://blog.csdn.net/AWSDN/article/details/136127534?spm=1001.2014.3001.5501

CSS选择器：

https://blog.csdn.net/AWSDN/article/details/136131947?spm=1001.2014.3001.5502

CSS盒子模型：

https://blog.csdn.net/AWSDN/article/details/136146708?spm=1001.2014.3001.5501
我打算从4个部分来讲CSS的内容，分别是选择器、盒子模型、布局、style样式。那么本篇就来介绍CSS中布局部分。下面我们就对布局部分进行介绍。

二、内容

1、布局原则

body也可以作为父集元素
越外层的盒子应该限制越少，由内层盒子内容撑起来
注意图片尽量宽高不要同时给，否则容易产生变形
不受控制的（例如浏览器页面默认间隔）元素宁愿不要，用自己的

例如：写页面时先写上

*{
    padding: 0px;

    margin: 0px;

}

2、浏览器规则

浏览器中连续的空格会当作一个空格使用，若想使用连续空格用代表空格（小于号转义字符 <，）
浏览器中连续的换行会当作一个空格使用

3、布局方式

div横向布局

（1）float:left(:right)

子集上设置
放弃无用空间，给其他元素腾空间 overflow:hidden;父集元素随子集元素最大值的变化而变化
解决不了均分的问题（例如：800px分给三个元素）

（2）display：inline-block

子集上设置
缺点：间隔问题使得像素大小不好控制（由于代码上下书写产生的换行形成的空格）
解决方案一（元素里为空）在父集中规定font-size:0;
解决方案二（元素里不为空）在父集中规定font-size:0;子集中规定font-size:16px;
解决不了均分的问题（例如：800px分给三个元素）

（3）弹性盒子：display:flex

父集上设置，主流设置
可以均分：子集加起来大于父集会自动压缩，每个子集元素占相同大小

①flex-direction：row; 设置弹性盒子内元素的排列方向

row:默认,从左向右 ; colum:从上到下；row(colum)-reverse:从右向左/下到上)

②flex-wrap:nowrap; 设置弹性盒子内元素是否换行

默认不换行（nowraq），换行（wrap）

③order:1;（作用于弹性盒子内子元素上）设置该子元素的排列顺序

值越小越靠前(要求正数，不要求从1开始）

④flex（作用于弹性盒子内子元素上）设置该子元素的缩放比例;是复合属性，由flex-grow,flex-shrink,flex-basis组成

flex-grow:1;设置子元素放大比,不写即不参与分配默认为0，公式：（父元素宽度-子元素宽度之和） *该子元素放大比/所有子元素放大比之和+基准宽度
flex-shrink:1;设置子元素压缩比，不写即默认为1，公式：基准宽度-（子元素宽度之和-父元素宽度）*该子元素缩小比/所有子元素缩小比之和
flex-basis:100px;基准宽度等于width:100px
简写：flex:1 2 100px;放大比为1，缩小比为2，width为100px

⑤align-items:flex-start;设置弹性盒子内元素在排列方向的垂直方向的对齐方式（默认上对齐，左对齐）

align-items:flex-start;默认上对齐/左对齐

align-items:flex-end;下对齐/右对齐

align-items:center;居中

align-items:baseline;上对齐/左对齐，但是以元素内容（第一行）的底部为基底

⑥justify-content: ;设置弹性盒子内子元素在排列方向上的分布方式

justify-content:flex-start ;靠上/左分布
justify-content:flex-end ;靠下/右分布
justify-content:center ;居中
justify-content:space-between ;空隙放中间
justify-content:space-around ;空隙放两边

⑦align-content: ;设置弹性盒子内行的分布方式

首先要设置flex-wrap:wrap;换行
参数与⑥形式意义相同

三、总结

虽然本期内容很少，但是这些绝对是最值得自己拿出时间来练习的部分，最重要的是弹性盒子模型，非常的好用实用。如果有错误欢迎指正，另外如果本文对你有帮助的话，希望关注点赞支持，谢谢各位😘😘😘