一、前言
我们来继续更新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; 设置弹性盒子内元素是否换行
③order: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;换行
- 参数与⑥形式意义相同
三、总结
虽然本期内容很少,但是这些绝对是最值得自己拿出时间来练习的部分,最重要的是弹性盒子模型,非常的好用实用。如果有错误欢迎指正,另外如果本文对你有帮助的话,希望关注点赞支持,谢谢各位