CSS进阶（六）结构与布局

CSS进阶（六）结构与布局

一、自适应内部元素

解决方案

CSS内部与外部尺寸模型：http://w3.org/TR/css3-sizing

       width和height属性的新关键字：min-content，解析为这个容器内部最大的不可断行元素的宽度（即最宽的单词、图片或具有固定宽度的盒元素）

<!-- figcaption用于描述figure标签的标题，figure用于标记img* -->
<p>Some text afniosfnaio andianf afni ifpjwip wnhfisn washfdi afhipwsn </p>
<figure>
    <img src="1.png" alt="">
    <figcaption>
        The Greatest man in the world who i fall in love with.
    </figcaption>
</figure>
<p>More text fnpangip angnkz agipag asfin qwafpsin wqafns.vn qwfansikqfwasnop </p>

figure{
    max-width: 300px;  /*回退机制*/
    max-width: min-content;
    margin: auto;
}

figure > img {
    max-width: inherit;
}

自动让figure水平居中

 

二、精确控制表格列宽

解决方案

       利用属性 table-layout，默认值时auto，其行为模式被称作自动表格布局算法。另一个值：fixed。固定表格布局模式，更易使用。因为表格的内容不会影响单元格的宽度，所以在页面下载过程中，表格不需要重复绘制

table {
	table-layout: fixed;
    width:100%; /*必须要设置宽度，确保table-layout奏效*/
}

 

三、根据兄弟元素的数量设置样式

场景

当一个列表不断延长时，通过隐藏控件或压缩控件的方式节省屏幕空间

• 电子邮件列表
• 待办事项应用程序
• 调色板应用程序
• 包含多个<textarea>元素的应用程序

 

解决方案

li:only-child{
	/*只有一个列表项的样式*/
}

/*等同于*/
li:first-child:nth-last-child(1){
}

扩展：

li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4)~li{
	/*当列表正好包含四项时，命中所有列表项*/
}

使用预处理器：

@minin n-items($n) {
    &:first-child:nth-last-child(#{$n}),
    &:first-child:nth-last-child(#{$n})~&{
        @content;
    }
}

/*调用*/
li {
    @inclulde n-items(4) {
        /*属性与值*/
    }
}

 

根据兄弟元素的数量范围来匹配元素

利用:nth-child()选择符,:nth-child(n+b)表示选中从第b个开始的所有元素

• n+b: 至少有多少个元素
• -n+b：最多有多少个元素

li:first-child:nth-last-child(n+4),
li:first-child:nth-last-child(n+4)~li{
	/*当列表至少包含四项时，命中所有列表项*/
}

li:first-child:nth-last-child(-n+4),
li:first-child:nth-last-child(-n+4)~li{
	/*当列表最多包含四项时，命中所有列表项*/
}

li:first-child:nth-last-child(n+2):nth-last-child(-n+6),
li:first-child:nth-last-child(n+4)~li{
	/*当列表包含2~6项时，命中所有列表项*/
}

 

四、满幅的背景，定宽的内容

背景

背景宽度满幅，内容宽度固定的特点：

• 页面中包含多个大区块，每个区块都占据整个视口的宽度，区块的背景也各不相同
• 内容是定宽的，即使在不同分辨率下宽度不一样。也只是因为媒体查询改变里固定的宽度值而已。某些情况下，不同区块的内容也可能有不同的宽度

 

解决方案

footer {
	padding:1em; /*回退机制*/
    padding: 1em calc(50%-450px); /*有了calc就可以不用写max-width：900px，因为就内容也只有900px的可用空间*/
    background:#333;
}

 

五、水平居中和垂直居中（重点）

5.1 水平居中

• 行内元素：对父元素应用text-align: center;
• 块级元素：对自身应用margin：auto；

 

5.2 垂直居中

<main>
    <h1>Am I Centered yet?</h1>
    <p>Center me, please!</p>
</main>

 

基于绝对定位的解决方案

main {
    position: absolute;
    top: calc(50%-5em);
    left: calc(50%-15em);
    width: 30em;
    height: 10em;
}

       上面的方法最大的局限在于它要求元素的宽高是固定的，而很多时候，对于需要居中的元素，其尺寸往往是由其内容决定的

       我们可以使用translate（），在translate（）变形函数中使用百分比时，是以元素自身的宽度和高度为基准进行换算和移动的，这样就不用在偏移量中把元素的尺寸写死了。

main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

 
注意：在某些浏览器中，这个方法可能会导致元素的显示有些模糊，因为某些元素被放置在半个像素上，这个问题可以用：transform-style：preserve-3d，但也有点hack

 

基于视口单位的解决方案

1. 视口单位

• 1vw表示视口宽度的1%，1vh类似
• 当视口宽度小于高度时，1vmin=1vw。否则为1vh
• 当视口宽度大于高度时，1vmax=1vw。否则为1vh

main{
    width: 30em;
    padding: 1em 1.5em;
    margin: 50vh auto 0;
    transform: translateY(-50%);
}

 

基于flexbox的解决方案（最佳）

只需写两行声明：

• 给待居中元素的父元素设置：display：flex；
• 给元素自身设置：margin：auto；

body{
    display: flex;
    min-height: 100vh;
    margin: 0;
}
main {
    margin: auto;
}

 
注意：

• 当使用flexbox时，margin：auto；不仅在水平方向将元素居中，垂直方向也如此
• 不需要指定宽度
• 居中元素分配到的宽度为max-content

felxbox的另一个好处是：可以将匿名容器（即没有被标签包裹的文本节点）垂直居中

main {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18em;
    height: 10em;
}

 

六、紧贴底部的页脚

假设页脚的文本永远不折行，则它实际所占的高度：
$$2行\times 行高+3\times 段落的垂直外边距+页脚的垂直内边距$$

main {
    min-height: calc(100vh-页头的高度-页脚的高度);
    box-sizing: border-box;
}

注意：

• 这个方法要求确保页脚内文本不会折行
• 每当改变页脚的尺寸时，都需要跟着调整min-height

 

Flexbox方案（推荐）

body{
    display: flex;
    flex-flow: column;
    min-height: 100vh; /*人body占据整个视口的高度*/
}

main {
    flex: 1;  /*内容自动伸缩栈满所有的可用空间*/
}