只需用HTML、CSS就可以了。
HTML
HTML 的话，只要熟悉html标签的意思，一般就是单词意思，就能所谓的语义化的结构。
如果是在很久以前，还没有css的时候，那就是看文章，用浏览器给他们的生成的自带样式也就够了，可是现在的网页布局很“复杂”，所以就要学会css。
css的学习就是背单词而已，真的，背会了，简简单单的页面就可以做出来了，但是还有一些奇怪的问题要注意，因为可能在你写样式的时候，就两两一配合，然后我就可以恭喜你了，问题出来了，O(∩_∩)O哈哈~
常见CSS问题
- 浮动的时候，父元素高度塌陷
- 元素就是标签的上下方向的margin会合并，当然这是有前提条件的
- css的优先级
- 如何能触发bfc现象
- css中的，哪些属性触发回流，哪些属性触发重绘
- 子元素固定定位+父元素添加transform属性：固定定位失效，变成绝对定位
- 布局：定位布局、浮动布局、flex 布局、grid布局
- 居中问题
- 响应式
- 内联元素（包括 inline-block）：都要使用
vertical-align，值可以是任意一个- 内联元素之间有任何看不见的字符（回车、空格），都会转为1个空格（试试用浮动代替）
-
position+float：他们会有啥 bug？
绝对定位.png
相对定位.png - 何时直接定宽高，何时要用其他属性把容器撑开
CSS 选择器：就是为了选中元素
link 标签：媒体查询
CSS 一开始设计出来的时候并没有想到大家会这么依赖 CSS，所以设计的时候想得特别简单：你要什么功能我就加什么属性。
- 你要颜色，就有 color: red; background-color: red;
- 你要图文混排，就有 float: left
- 你要绝对定位，就有 position: absolute
CSS 不正交，因而有些反直觉。不正交主要表现在两点：
- 各属性之间互相影响
-
margin V.S. border、display:block、display:flex
- 兄弟节点
- border、padding、 display:inline-block|flex|table、overflow:hidden
- 父子节点
小圆点 V.S. display
position: absolute V.S. display: inline
-
- 各元素之间互相影响
- position: fixed V.S. transform
- float 影响 inline 元素（只影响文字，容器没影响）
CSS 学习的易点
背套路即可应付日常工作
- 水平居中
- 垂直居中：避免 parent 容器的高度固定
布局套路.png
水平居中.png
垂直居中.png
巧用工具
- CSS 3 Generator
文档流（Normal Flow）
- 内联元素的宽高
- 字体的行高是由设计师决定的，所以不同字，默认行高不同
- 块级元素的宽高
- 高度：由内部文档流总和决定（是决定，不是相等）的（如果只有文字，那就是 line-height*行数）
- div 的宽度，不是由文字决定的。默认就好，根据父级宽度。
- 水平居中
- 垂直居中：flex
- 文字溢出省略（多行）
image.png
文字垂直居中：padding+适当的 line-height
盒模型
-
一比一的 div
一比一的 div.png outline
border 调试大法
