前端－想写出静态页面 - 草稿

只需用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 调试大法