3

CSS中的布局及属性

 1 year ago
source link: https://blog.51cto.com/u_13349380/5569975
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

CSS中的布局及属性

原创
CSS中的布局及属性_属性值

columns属性

我们可以使用columns属性实现分栏布局，columns属性是​​column-width​​和​​column-count​​属性的缩写,columns的写法有很多种：

columns: auto;
columns: auto auto;
columns: auto 4rem;



​​column-width​​表示每一栏或者每一列最佳宽度，而且不支持百分比。



​​column-count​​表示分栏数目，而且当​​column-width​​和​​column-count​​同时存在时，需要统一转换为​​column-count​​值，哪个值小就使用哪个。



​​column-gap​​属性表示每一栏之间的空白空隙大小，可以为百分比值，也可以为长度值，column-gap是gap属性的子属性，而gap属性实际上是column-gap属性和row-gap属性的缩写。



​​column-rule​​属性是column-rule-width和column-rule-style以及column-rule-color的缩写，column-rule属性和border属性的语法和规则一样。



​​column-span​​作用于分栏布局的子元素上，类似于colspan表示内容是否跨多栏显示。默认值为none，表示不横跨多栏，all表示横跨所有垂直列。



​​column-fill​​作用是当内容分栏的时候平衡每一栏填充的内容。接收3个值，分别为​​auto​​表示按顺序填充每一列，内容只占用它需要的空间。​​balance​​是默认值表示列之间平衡内容。​​balance-all​​表示尽可能在列之间平衡内容，浏览器暂时不支持。当值为auto时，需要容器有固定的高度才能准确渲染。



​​break-inside​​属性可以定义页面打印、分栏布局或者Regions布局发生中断时元素的表现形式，如果没有发生中断，我们就可以忽略这个属性。接收的值也比较多。​​auto​​表示元素可以中断，​​avoid​​表示元素不能中断。如果我们希望每个列表元素都是独立的，前后都不断开就可以使用avoid实现。



​​box-decoration-break​​可以用于分栏断开的文字在每一栏中都拥有独立完整的边框。默认值为​​slice​​，表示各个元素断开的部分如同被切开一般。​​clone​​表示断开的各个元素的样式独自渲染。



.wrapper {
    width: 334px;
    columns: 3
}
.wrapper p {
    border: 1px solid #ccc;
    box-decoration-break: clone;
}



弹性布局中块布局我们可以使用​​display: block​​​，内联布局可以​​display: inline​​​,表格布局可以使用​​display:table​​​或者​​display: inline-table​​​。定位布局可以使用​​position: absolute​​​;此外我们可能还会用到float以及​​display: flex​​​或者​​display: inline-flex​​; flex涉及到的属性比较多，比如flex-direction用来控制flex子项整体布局方向，决定从左向右还是从右向左。flex-wrap用来控制flex子项是单行还是换行显示。flex-flow是flex-direction和flex-wrap的缩写。



网格布局属性​​display: grid​​或者​​display: inline-grid​​，两者的区别是后者容器外部盒子保持内联特性，因此可以和图片文字在同一行显示。而前者容器保持块状特性，宽度默认为100%，不和内联元素在一行显示。



​​grid-template-columns​​和​​grid-template-rows​​主要用来指定网格的数量和尺寸等信息。前者在网格中用到的地方比较多，因为网格布局默认布局和块布局很相似，都是从上往下依次垂直排列。



.wrapper {
    grid-template-columns: 44px auto 66px;
    grid-template-rows: 14% 66px auto 40px;
}



当​​grid-template-columns​​属性值有3个值时，表示网格分为3列。从左往右每列的尺寸分别44px、auto、66px;当​​grid-template-columns​​属性值为4个值时，表示网格分为4类，从上往下每行的高度分别为14%、66px、auto、40px；​​grid-template-columns​​的默认值为none，可以使用grid-auto-columns属性设定网格尺寸。而且​​grid-template-columns​​支持很多数据类型，比如长度值、百分比值、关键字属性值、​​<flex>​​数据类型、函数值(包括repeat()、minmax()、fit-content())。



​​min-content​​指的是一排或者一列格子中所有最小内容尺寸中最大的那个最小内容尺寸值而不是某一个格子的最小内容尺寸。​​max-content​​指的是最终的尺寸是最大内容宽度中最大的那个值。​​auto​​指的是尺寸的上限是最大内容尺寸的最大值，它的尺寸会受到​​justify-content​​和​​align-content​​属性影响的，而max-content的尺寸是固定的。



网格的单位​​fr​​是fraction的缩写，表示分数，用来表示自动分配列的尺寸划分的比例。​​auto​​也可以表示，但是auto的尺寸划分会随着内容变化的，内容多则尺寸大，内容少则尺寸少。而fr是按比例计算与内容多少无关。fr的计算规则是当所有fr值之和大于1，则按fr值的比例划分可自动分配尺寸。当所有fr值之和小于1，则最终的尺寸是可自动分配尺寸和fr值得乘法计算值。



.warpper {
    grid-template-columns: 2fr 3fr 4fr;
}



以上案例中的fr之和为9大于1，所以按照比例2:3:4划分。



.warpper {
    grid-template-columns: .3fr .3fr .3fr;
}



上面案例中虽然fr值得比例还是1:1:1，但是由于fr的值和0.9小于1，所以网格的宽度是容器尺寸和0.3的乘法计算值，会有10%的尺寸没有网格元素的。

        

        

            

                report
            

        

    







        
Recommend

        



                

    
About Joyk

    
 





Aggregate valuable and interesting links.

Joyk means Joy of geeK