2021年9月26日
grid-template-columns 添加多列
摘要： 简单地添加一个网格元素并不会有任何明显的效果。 你还需要明确网格的结构。 在一个网格容器中使用 grid-template-columns 属性可以添加一些列，示例如下： .container { display: grid; grid-template-columns: 50px 50px; } 阅读全文
posted @ 2021-09-26 19:07 小薇的前端学习日记 阅读(242) 评论(0) 推荐(0)
flex-basis 属性设置元素的初始大小
摘要： flex-basis 属性的单位与其他表示尺寸的属性的单位一致（px、em、% 等）。 如果值为 auto，则项目的尺寸随内容调整。 阅读全文
posted @ 2021-09-26 15:29 小薇的前端学习日记 阅读(98) 评论(0) 推荐(0)
flex-shrink 属性定义 flex 子元素的收缩规则
摘要： flex-shrink 属性。 使用之后，如果 flex 容器太小，则子元素会自动缩小。 当容器的宽度小于里面所有子元素的宽度之和时，所有子元素都会自动压缩。 子元素的 flex-shrink 接受数值作为属性值。 数值越大，则该元素与其他元素相比会被压缩得更厉害。 比如，一个项目的 flex-sh 阅读全文
posted @ 2021-09-26 15:20 小薇的前端学习日记 阅读(551) 评论(0) 推荐(0)
2021年9月25日
使用 justify-content 属性对齐元素
摘要： flex 子元素有时不能充满整个 flex 容器， 所以我们经常需要告诉 CSS 以什么方式排列 flex 子元素，以及调整它们的间距。 幸运的是，我们可以通过 justify-content 属性的不同值来实现。 在介绍属性的可选值之前，我们要先理解一些重要术语。 这张图片的元素横着排列，很好地描 阅读全文
posted @ 2021-09-25 16:49 小薇的前端学习日记 阅读(601) 评论(0) 推荐(0)
v 使排版根据设备尺寸自如响应
摘要： 除了使用 em 或 px 设置文本大小，你还可以用视窗单位来做响应式排版。 视窗单位和百分比都是相对单位，但它们是基于不同的参照物。 视窗单位是相对于设备的视窗尺寸（宽度或高度），百分比是相对于父级元素的大小。 四个不同的视窗单位分别是： vw：如 10vw 的意思是视窗宽度的 10%。 vh： 如 阅读全文
posted @ 2021-09-25 16:24 小薇的前端学习日记 阅读(104) 评论(0) 推荐(0)
tabindex 将键盘焦点添加到元素中 , 以及获取焦点的顺序
摘要： HTML 的 tabindex 属性有三种与标签焦点相关的功能。 当它在一个元素上时，表示该元素可以获得焦点。 tabindex 的值（可以是零、负整数或正整数）定义了行为。 当用户使用键盘浏览页面时，诸如链接、表单控件等元素可以自动获得焦点。 它们获得焦点的顺序与它们出现在 HTML 文档流中的顺 阅读全文
posted @ 2021-09-25 16:14 小薇的前端学习日记 阅读(415) 评论(0) 推荐(0)
添加快捷键 accesskey 用于快速导航
摘要： 通过给元素添加 accesskey 属性来让用户可以在链接之间快速导航通过 HTML 提供 accesskey 属性，用于指定激活元素或者使元素获得焦点的快捷键。 添加 accesskey 属性可以让使用键盘的用户更高效率地导航。 HTML5 允许在任何标签上使用这个属性。 该属性尤其适用于链接、按 阅读全文
posted @ 2021-09-25 16:08 小薇的前端学习日记 阅读(120) 评论(0) 推荐(0)
time标签使用 HTML5 的 datetime 属性标准化时间
摘要： HTML5 还引入了 time 标签与 datetime 属性来标准化时间。 time 元素是一个行内元素，用于在一个页面上显示日期或时间。 datetime 属性包含的有效格式。 辅助设备可以获取这个值。 这个属性也有助于避免混乱，因为它规定了时间的标准化版本，甚至可以在文本中以非正式的方式或学术 阅读全文
posted @ 2021-09-25 15:54 小薇的前端学习日记 阅读(161) 评论(0) 推荐(0)
表单日期选择的创建
摘要： <input type="date" > 阅读全文
posted @ 2021-09-25 15:49 小薇的前端学习日记 阅读(75) 评论(0) 推荐(0)
将单选按钮包裹在 fieldset 元素中以获得更好的可访问性通过
摘要： 接下来的表单主题是关于单选按钮的可访问性。 在上一个挑战中，每个单选按钮都有一个包含 for 属性的 label 标签，这些属性值指向相关选项的 id。 然而单选按钮通常成组出现，而且用户必须选择其中一项。 fieldset 标签包裹整组单选按钮，实现这个功能。 它经常使用 legend 标签来提供 阅读全文
posted @ 2021-09-25 15:40 小薇的前端学习日记 阅读(72) 评论(0) 推荐(0)