一、grid 网格布局中的项目对齐属性提及 grid 网格容器中项目对齐我们首先要知道的是网格单元在容器中的对齐。我们需要知道的是，grid 网格布局时是否设置了网格单元的大小，因为如果没有设置网格单元的大小的话，也就是网格单元自适应，这时候就不会产...

一、grid 网格布局中的专业术语grid 网格布局是将一个父级元素变成网格容器，父元素的子元素变成网格项目的布局方式。grid 布局中的专用术语有以下几个： 术语名称 术语描述 网格容器 由若干个矩形网格单元构成 网格单元 网格布...

模拟静态的京东页面的总体思路可以大致的将京东首页页面看成是由三部分组成，分别是页眉区、内容区还有页脚区。 页眉和页脚区的布局思路一样，它们的显示优先级都要大于内容区。然后可以注意到的是它的页眉和页脚区域都有许多的字体图标，这个可以在阿里巴巴矢量图标库...

一、弹性盒子（flexbox）一些基本术语和简单介绍 介绍 CSS 弹性盒子布局是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加...

一、浮动（float）浮动属性 float 是指定一个元素沿其所在的容器的左侧或者右侧放置。浮动的出现想解决的问题就是文字和图片的并排显示，不过一旦使用了浮动属性，该元素就会脱离网页正常流动（文档流）。浮动的缺点：任何一个元素使用浮动属性之后都会脱离...

一、box-sizing 属性通常我们认为的盒子是由 width（宽）和 height（高）设置的，一旦两个属性设置好之后就不会变化了。但是在 html 中盒子不仅具有 width 和 height 属性，它的实际大小还会受到 padding（内边距...

一、em 与 rem 的原理与应用在编写页面的时候，我们经常会对元素的字体大小进行设置，以达到自己想要的效果。而在 css 中设置字体的几个常用的基本单位有三个，分别是：px / em / rem。其中 px 是一个绝对单位，一旦使用 px 对字体进...

一、动态伪类选择器 超链接标签\的四种状态（按照先后顺序，顺序固定） 伪类表示 效果 :link 默认状态 :visited 已经访问过的状态 :hover 鼠标悬停状态 :active 鼠标点击状态 样式案例（在本篇...

一、css 规则的三种导入方式1. 内部样式内部样式是通过 style 标签引入的，这种样式导入仅在当前页面适用，一旦跳转到其他页面，想要引入当前页面的样式还得重新用 style 标签导入重新写一遍，这样会形成代码冗余。页面样式示例： 这是一个测试标...