写给后台的前端入门指南（一）

这个练习的目标是了解掌握基本的布局方法

目标页面

涉及以下知识点

CSS Reset

html 标签的默认样式需要重置。
一方面受历史因素影响，有的标签默认值不统一、不合理。
另一方面重置也能减轻记忆负担。

相关的库 normalize.css
对于一个团队，一般会维护自己的 reset.css

入门的时候当然怎么简单怎么来

* {padding: 0; margin: 0; box-sizing: border-box;}
复制代码

关于 box-sizing 是否需要被统一重置是有一定争议的，我们先搁置争议求发展

box-sizing

作为写过 Android/Qt/Wxpython 的程序员，对于 html 的宽度高度一直掌握不了，总之就是达不到期待的效果。
其实在默认情况中，高度指的是内容高度（不包括 padding border margin）
设置 box-sizing: border-box 后，宽度高度的设置包含了 padding 和 border，不包括 margin

MDN box-sizing

block, inline

这里也是和 Qt 等差异很大的一部分
block 就是我们常说的块元素，一个占一整行
inline 是行内元素，只是恰好包裹住内容
关键是很多属性对于 block 和 inline 不通用
比如你可以对行内元素设置 margin-top 和 margin-bottom 试试，无效
常用来控制行内元素空间位置的有以下几个属性

• 行高 line-height
• 字体大小 font-size
• 父元素（注意要有宽度）的 text-align 有时行内元素中的元素需要是块元素，就用 inline-block

MDN display

position

这个很常用
一般的教程会给出大概有几个值：

• static，默认值，无定位。会忽略 left，right，top，bottom，z-index 等属性。
• absolute，绝对定位，相对于第一个非 static 的父元素进行定位。
• relative，相对于正常位置进行定位。
• fixed，相对于浏览器窗口进行定位。

但是很少给出常用的模式：

• 最常见的是 relative + absolute 配合使用。父元素声明为 relative，子元素用 absolute 指定位置
• fixed 用于固定在浏览器中某个位置。
• 单独使用 relative。多出现在 relative 足够用或者需要使用 z-index 的情况。

MDN position

::before, ::after

伪元素，用于在元素之前/之后插入新的元素
有 content 属性，用于指定元素的值
也经常和伪类一起使用，比如 :hover，就是特定行为时的元素选择器
注意使用时一般至少有 content 和 display 两个属性

.content::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    color: green;
}
复制代码

MDN ::before
MDN ::after

em，rem，px，vw，vh，vmin，vmax

em 是相对字体大小，比如字体默认是 16px，1em 就是 16px，可以用来控制内容每行字符数
它的值是多层继承嵌套的
比如当前行的字体大小设置为了 20px，那么 1em 就是 20px
rem 是指相对 html font size 的 px 大小的相对值，更容易把控
rem 的兼容性是 ie8+，可以用 Xpx，Yrem 的写法兼容不支持 rem 的浏览器
1 vw 是 1% 的宽度，1 vh 是 1% 的高度，更适合用于布局
vmin = min(vw, vh)，vmax = max(vw, vh)，对于可能横向的移动端是很有价值的
移动端切换到 PC 端的场景可能 rem 就更合适
移动端开发弹性布局首选就是 vw

菜鸟教程 em、rem、px区别 搞清楚CSS单位px、em、rem、vh、vw、vmin、vmax

float

浮动元素，可以实现右对齐等效果
使用时记得在父元素中设置

overflow: hidden;
复制代码

基本就没有问题了

MDN float

flex

其实在前端中做垂直居中并不容易
有 flex 布局之后就简单多了

flex 布局中有主轴、交叉轴的概念，其中主轴是子元素的排列方向，交叉轴是另一个轴 flow-direction 决定主轴方向：row、row-reverse、column、column-reverse
所以定义分布的属性不是以水平、垂直的名字定义的
justify-content 规定了主轴上的排列方式：flex-start、flex-end、center、stretch（各列之间用空格间隔开）、space-around（边上也用空格包起来）
align-items 规定了交叉轴上的排列方式：flex-start、flex-end、center、stretch（强制拉伸至充满空间）、baseline（首行文本基线一致）
align-self 可以局部覆盖 algin-items 属性
flex-grow 元素的放大空间，默认为 0，不放大
flex-shrink 元素的缩小空间，默认为 1，同等缩小。0 是不缩小

MDN flex

总结

模仿的页面
写完这个页面特别有成就感
弄明白了基础的布局方法，也知道了遇到问题去哪查怎么查
剩下的就是多练习、多熟悉

转载于:https://juejin.im/post/5cc13a895188252d891d0117