CSS3--多列布局与响应式

浅浅的花香味﹌ 2024-04-19 15:15 74阅读 0赞

# 多列布局 #

### （一）column多列属性 ###

##### 一、columns：设置多列布局的列宽和列数。 #####

1.  **columns**: < column-width > < column-count >  
    columns 属性初始值根据元素个别属性而定，它适用于不可替换的块元素、行内块元素、单元格，但是表格元素除外。  
    **通俗理解**：column属性是一个简写属性，用于设置列宽和列数  
    **默认值**：columns:auto auto;
2.  columns属性的取值为列宽和列数中的一个即可。  
    例：**columns:140px;** //按照1列宽度为140px的原则自动分列  
    **columns:5;** //将所有文本内容分为5列
3.  **若列宽和列数同时存在**：  
    （1）按照列宽优先的原则进行分列。  
    （2）column-count是指分列的最大列数。  
    例：假设文本内容按照列宽为140px的原则分列，最多分成7列。  
    **columns:140px 5;** //文本内容分成5列  
    **columns:140px 7;** //文本内容分为7列  
    **columns:140px 10;** //文本内容分为7列

##### 二、column-width：单独设置分列的列宽。 #####

给列定义个最小的宽度。  
取值：

1.  auto：（默认值）由浏览器决定列宽，表示将根据column-count列的数量自动调整列宽。
2.  length：规定列的宽度、长度值，不可以为负值。

> 原则：取大优先  
> 1.如果人为设置宽度大，则取更大的值，但是重新计算，有时会填充整个屏幕，所以意味着最终的宽度可能大于设置的宽度  
> 2.如果人为设置的宽度更小，则使用默认计算的宽度

##### 三、column-count：单独设置分列的列数。 #####

##### 四、column-rule：在列和列之间设置分割线。 #####

column-rule-width、column-rule-style、column-rule-color

##### 五、column-gap：设置列与列之间的间隔。 #####

规定列之间的间隔，即定义栏与栏之间的间距，一般为1em，即当前所在对象或祖先元素的1个字体大小的间距。  
**注意**：  
如果column-gap与column-width加起来大于总宽度的话，就无法显示column-count指定的列数，会被浏览器自动调整列数和列宽

##### 六、column-span：设置具体的内容是否跨列显示。 #####

取值（该属性作用在分列显示内部的某个内容上）：

1.  1，默认值，在一列显示。
2.  all，跨列显示。

##### 七、column-fill：定义栏目的高度是否统一，规定如何对列进行填充 #####

注意：主流浏览器都不支持column-fill属性  
语法格式：column-fill: auto | balance;

1.  auto：各列的高度随其内容的变化而自动变化
2.  balance：默认值，各列的高度将会根据内容最多的那一列的高度进行统一

##### 八、 #####

**-webkit-column-break-before**：将具体的内容和前面的部分断开列（另起一列）。  
**-webkit-column-break-after**：将具体的内容和后面的部分断开列。

### （二）常用属性及浏览器兼容 ###

（1）IE10 和 Opera 支持多列属性  
（2）Firefox 需要前缀 -moz-，Chrome 和 Safari 需要前缀 -webkit-  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]

### （三）应用场景：瀑布流布局 ###

.waterfall{
    				width: 600px;
    				height: auto;
    				border: 1px solid;
    				padding: 10px;
    				box-sizing: border-box;
    				/*设置列数*/
    				column-count: 3;
    				-moz-column-count: 3;/*Firefox*/
    				-webkit-column-count: 3;/*Safari和Chrome*/
    				/*设置列之间的间隔*/
    				column-gap: 10px;
    				-moz-column-gap: 10px;
    				-webkit-column-gap: 10px;
    			}
    			.waterfall .waterfall-item{
    				break-inside: avoid;
    				width: 100%;
    				margin-bottom: 10px;
    				background: #DDDDDD;
    				text-align: center;
    			}

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]

### （四）响应式常用的布局尺寸 ###

##### 响应式常用的布局尺寸 #####

*  大屏幕：width>=1200px
 *  默认：width>=980px
 *  平板：980px>=width>=768px
 *  手机到平板：width>=768px
 *  手机：width<=480px

##### 开发编程写法 #####

@media (min-width: 1200px) { }
    			/*大屏幕*/
    			@media (min-width: 1200px) and (max-width: 979px) { }
    			/*平板电脑768和小屏幕980之间的分辨率*/
    			@media (max-width: 767px) { }
    			/*横向放置的手机480和竖向放置的平板767之间的分辨率*/
    			@media (max-width: 480px) { }
    			/*横向放置的手机480及分辨率更小的设备*/

##### 其他响应式尺寸布局写法 #####

*  图片流

/*常用于图片流*/
    			@media all and (max-width: 1690px) { }
    			@media all and (max-width: 1280px) { }
    			@media all and (max-width: 980px) { }
    			@media all and (max-width: 736px) { }
    			@media all and (max-width: 480px) { }

*  稍微复杂的基本响应

/*常用于稍微复杂的基本响应*/
    			@media all and (max-width: 1200px) { }
    			@media all and (min-width: 960px) and (max-width: 1199px) { }
    			@media all and (min-width: 768px) and (max-width: 959px) { }
    			@media all and (min-width: 480px) and (max-width: 767px) { }
    			@media all and (max-width: 599px) { }
    			@media all and (max-width: 479px) { }

*  Bootstrap 3.x 全球主流框架

/*基于Bootstrap 3.x 全球主流框架*/
    			@media all and (max-width: 991px) { }
    			@media all and (max-width: 768px) { }
    			@media all and (max-width: 480px) { }

*  Bootstrap 4.x 全球主流框架

/*基于Bootstrap 4.x 全球主流框架*/
    			@media all and (min-width: 576px) { }
    			@media all and (min-width: 768px) { }
    			@media all and (min-width: 992px) { }
    			@media all and (min-width: 1200px) { }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/7d13b64609ad4a2a8999b62a7af936ee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/efef475e96af4fe78657e8e39b44fd3a.png