CSS基础布局之line、line-block、block布局区别以及flex布局详解

_码农耕地人

已于 2022-02-04 19:57:17 修改

阅读量6k

点赞数 4

文章标签： css

于 2022-02-04 15:39:04 首次发布

本文链接：https://blog.csdn.net/weixin_60414376/article/details/122783464

版权

目录：

一）inline：

1、类似于span标签，不会独占一行，元素排满外部容器之后就会自动换行。

2、不可以设置宽度和高度，设置均无效。

3、设置内外边距时，只有水平方向生效，垂直方向边距设置不生效。

4、两个inline属性的元素，只要该行未排满仍然不会换行。span默认就是inline布局，所以最终显示的是”我是我你是你“没有换行效果。

<span>我是我</span>
<span>你是你</span>

二）block

1、类似于div标签，所以与inline最大的区别就是每个block布局的元素会独占一行。

2、block布局的元素可以设置高度和宽度。尽管两个block的宽度都是容器的50%还是会有换行效果。

3、block布局支持内外边距的所有设置。

4、block布局的宽度默认会将容器填满

block布局很好的用于换行操作，省去写flex操作

三）inline-block

1、是inline和block的综合版。具有inline的不换行效果。

2、具有block的可以设置宽度高度的属性。

3、可以设置边距属性。

4、由于不换行性，就允许了再inline-block布局的左右添加元素，

例：在文字的左边添加小红点：

<!--HTML部分 -->
<view class="notify-content">您有{{ message }}条未读消息</view>

	/*css代码*/
    .notify-content{
		font-size: 30rpx;
		color: @font-color;
		&:before{
			display: inline-block;
			content: '';//内容
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
			background-color: red;
		}
	}

总之，inline-block就是保留了inline的不换行性，又增加了block的可设置高度性。

补充：

vertical-align属性：

设置垂直上的偏差，实现垂直居中，这样就省去用flex再垂直轴居中

四）flex布局详解：

1、flex布局的引用就是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序)，以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。

2、Flex容器会使子项目（伸缩项目）扩展来填满可用空间，或缩小他们以防止溢出容器(若设置了一行的子元素宽度，但是随着一行元素的增多，且属性为不换行，此时flex就会采用压缩的方式使元素强制在一行)。

0、flex布局分为主轴和辅轴，取决于flex-direction属性的设置，默认为横轴row为主轴。