发表于: 2019-11-26 20:41:59
1 1099
今日完成:
公用header和footer
加上响应式布局
在使用grid布局中,可以使用minxmax()来为轨道指定最小尺寸或最大尺寸。
比如:
grid-template-colums: 15em 4.5fr minmax(5em,3fr)10%;
布局中间两列是弹性变形的,第三列的最小宽度为5em。如果再变小,布局中将有三个宽度固定的列
(宽度分别为15em、5em和10%),以及一列尺寸弹性变化的列。
根据内容设定轨道的尺寸(min-content和max-content)
能设置栅格轨道的尺寸为可用空间的几分之几,或者占据固定的空间的的确不错,但是如果想把页面中的某些部分
对齐起来,而无法确定各部分有多宽多高呢?这时可以使用min-content和max-content
这两个关键字的字面意思很简单,但对于它的使用方式来说还是不够明确
max-content的意思是“占据内容所需的最大空间”。对大段文字来说(例如博客文章),
这个值一般意味着尽量多占据可用空间,为内容提供最大空间。
max-content也可以指“宽度尽量大,以防换行”。对常规文本来说,这可能导致列轨道特别宽。
与之相比,min-content的意思是“尽量少占据空间,够显示内容即可”。对文本来说,这意味着宽度会尽量
收窄,只保证最长的单词(如果有图像或表单输入框的话,指宽度最大的行内元素)能在一行里完整显示。这个值会导致栅格元素中有大量断行,而且特别窄特别高。
这两个关键字的强大之处在于,它们将应用于整个栅格轨道上。例如,如果把一列的尺寸设为max-content,
那么整个列轨道的宽度都与列中最宽的内容一样。
提取 组件库这块还可以做的更好
明日计划:
使用css完成轮播图的功能
完成最后的三个官网页面
遇到的问题:
无
收获:
无
评论