HTML CSS

资料:

HTML

<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

常见元素

例子

出现在 head 中, 不会在页面上留下内容:

meta, title, style, link, script, base

出现在 body 中:

区域: div / section / article / aside / header / footer
段落: p
行内元素: span / em / strong
表格: table / thead / tbody / tr / td /
列表: ul / ol / li / dl / dt / dd
链接: a
表单: form / input / select / textarea / button

元素分类

按默认样式分类

例子

block (块级)
inline 内联 (行内 / 内联)
inline-block (行内块级 / 内联块级)

block 元素是方形的, 默认情况下占据一整行, 不会给其他元素留出空间

inline 元素不是方形, 不一定是规则形状, 不会独占一行

inline-block 像其他元素一样堆在一起, 对外表现像 inline 和别的元素在一行, 对内表现像 block 是方块形状, 有自己的尺寸宽高

<!-- div 是块级元素, 独占一行 -->
<div>独占一行</div>
<!-- p 也是独占一行的块级元素 -->
<!-- span, em, strong 是内联元素 -->
<!-- 当空间小后, 没有固定形状-->
<!-- 不可以设置宽高 -->
<p><span>行内元素</span><em>行内元素</em><strong>行内元素</strong></p>
<p><span style="width: 100px">行内元素 width 不生效</span></p>
<!-- select 是 inline-block 元素 -->
<!-- 它和 span 元素在同一行, 对外没有独占一行 -->
<!-- 对内是个方形, 就算宽度不够也还是方块 -->
<!-- 可以设置 width -->
<p>
  <select style="width: 100px">
    <option>下拉框</option>
  </select>
  <span>select 是 inline-block 元素</span>
</p>

按内容分类

元素按内容分类

元素嵌套关系

w3c 制定了严格的标准规定哪些元素可以包含那些元素, 但是浏览器对非标准行为有非常非常非常多的兼容.

只能按照基本原则总结为:

块级元素可以包含行内元素
块级元素不一定能包含块级元素
行内元素一般不能包含块级元素

默认样式和 reset

CSS reset:

<style>
  * {
    margin: 0;
    padding: 0;
  }
</style>

或者 normalize.css

前者简单粗暴, 后者有认知成本, 需要花时间看它 reset 了什么东西

CSS 基础

选择器

基本规则:

选择器 {
  属性: 值;
  属性: 值;
}

选择器分类:

元素选择器 a{}
伪元素选择器 ::before{}

在页面中可以被显示的元素
类选择器 .link{}
属性选择器 [type=radio]{}
伪类选择器 :hover{}

伪类是一个元素的状态, 比如鼠标指向元素时, 该元素某个状态下的样式
ID 选择器 #id{}
组合选择器 [type=checkbox] + label{}
否定选择器 :not(.link){}
通用选择器 *{}

表示什么元素都匹配

选择器权重 (从高到低排序):

优先级高的选择器叠加在优先级低的选择器之上.

ID 选择器 #id{}
类选择器 .link{}, 属性选择器 [type=radio]{}, 伪类选择器 :hover{}
元素选择器 a{}
其它选择器

例子例子

!important 优先级最高
元素属性优先级高
相同权重后写的生效

例子

非布局样式

字体, 字重, 颜色, 大小, 行高
背景, 边框
滚动, 换行
粗体, 斜体, 下划线
其它

非布局样式 - 字体

字体族

serif sans-serif monospace cursive fantasy
多字体 fallback
网络字体, 自定义字体
iconfont

非布局样式 - 行高

非布局样式 - 背景

非布局样式 - 边框

非布局样式 - 滚动

非布局样式 - 文本折行

非布局样式 - 装饰性属性

CSS 布局

布局是 CSS 知识体系的重中之重, 早期以 table 为主 (简单), 后来以技巧性布局为主 (难), 现在有 flexbox / grid (偏简单), 响应式布局是必备知识

常用布局方法:

table 表格布局
float 浮动 + margin
inline-block 布局
flexbox 布局

布局方式 - 表格

例子: 4-2 表格布局

布局属性

盒模型
display / position
- display 确定元素的显示类型
  
  常用的属性值为: block / inline / inline-block
  
  例子: 4-3 布局属性 display.html
- position 确定元素的位置
  
  常用的属性值为: static / relative / absolute / fixed
  
  例子: 4-3 布局属性 position
z-index

相当于从屏幕到人眼有一个 z 轴, 值越大越能被看见

只有 position: relative / absolute / fixed 的元素可以设置 z-index

flexbox 布局

弹性盒子, 盒子之间并列, 只需要指定宽度

例子: 4-4 flexbox 布局

例子: 4-4 flexbox 布局 2

float 布局

让元素 “浮动”, 会脱离文档流, 但不脱离文本流

对自身元素的影响:

元素形成一个 “块” (BFC)
元素位置会尽量靠上
元素位置尽量靠左 (右)

对兄弟元素的影响:

上面贴非 float 元素
旁边贴 float 元素
不影响其它块级元素的位置
影响其它块级元素内部文本

对父级元素的影响:

相当于从父级的空间里 “消失”
高度塌陷

例子: 4-5 float 布局

例子: 4-5 float 布局 2

inline-block 布局

像文本一样排列 block 元素, 没有清除浮动等问题, 但需要处理间隙

例子: 4-6 inline-block 布局

响应式布局

响应式设计指在不同设备上正常使用, 一般主要处理屏幕大小问题

主要方法:

隐藏 + 折行 + 自适应空间
rem / viewport / media query

例子: 4-7 响应式布局 1

例子: 4-7 响应式布局 2

rem:

<style>
  /* html 元素有一个 font-size 属性, 默认情况下是 16 像素 (16px) */
  /* 这里设置为 20px, 就表示这个页面 1rem  = 20px */
  html {
    font-size: 20px;
  }
</style>

CSS 面试题

实现两栏 (三栏) 布局的方法
1. 表格布局
2. float + margin 布局
3. inline-block 布局
4. flexbox 布局
position:absolute / fixed 有什么区别?

前者相对于最近的 absolute / relative 来进行定位

后者相对于屏幕 (viewport) 定位
display:inline-block 的间隙

原因是: 字符间距

解决方法:
1. 消灭字符, 比如把标签写到一起不要留空白, 或者中间加上注释
2. 消灭间距, 把字体大小设置为 0 (不要占据空间)
如何清除浮动

需要清除浮动的原因是: 浮动的元素不会占据父元素的布局空间, 即父元素布局时不会管浮动元素, 有可能浮动元素就会超出父元素, 从而影响其它元素. 所以作为父元素必须清除浮动.

清除方式:
1. 让盒子负责自己的布局
  
  overflow:hidden(auto)
2. 加一个元素放到浮动元素后面, 让父元素必须包含浮动元素
  
  ::after{clear:both}
如何适配移动端页面
1. viewport 适配
2. rem / viewport / media query
3. 设计上: 隐藏折行自适应
怎样在不使用 width 和 height 的情况下把 div 铺满页面

答案有很多, 核心是考察对 CSS 属性是否熟悉
1. 绝对定位, 加四边都设为 0
2. 两层 flex, 分别设置水平方向垂直方向
3. float + ?? 或者 grid 布局, 等等…

HTML#

常见元素#

元素分类#

按默认样式分类#

按内容分类#

元素嵌套关系#

默认样式和 reset#

CSS 基础#

选择器#

非布局样式#

非布局样式 - 字体#

非布局样式 - 行高#

非布局样式 - 背景#

非布局样式 - 边框#

非布局样式 - 滚动#

非布局样式 - 文本折行#

非布局样式 - 装饰性属性#

CSS 布局#

布局方式 - 表格#

布局属性#

flexbox 布局#

float 布局#

inline-block 布局#

响应式布局#

CSS 面试题#