前端课1 大纲 -css局部，背景，优先级

f12调试大法

快速预览与学习

CSS 常见布局方式
https://juejin.im/post/599970f4518825243a78b9d5

1. display
2. position
3. float
4. flex

盒模型

• padding
• margin （页边距折叠概念）
• border
• background
  box-sizing:content-box(不包含padding) 默认
• box-sizing:border-box(包含padding)

display

• 流文本 inline
• 流内块级 inline-block
• 块级 block

position

image

• 静态 static
• 相对 relative （相对static位置进行位移，原有位置保持不变）
• 绝对 absolute （向父层一级一级找有relative属性的元素，根据此元素的0，0位置进行位移）
• 固定 fixed （根据viewport的0，0位置进行位移）
• 黏性 sticky

float:left/right

由此引发的浮动闭合方案

1. clear:both
2. overflow:hidden

display:flex

布局新时代，兼容性速查https://caniuse.com/#search=flex
写在父层上，决定了子元素的排列方式，而不是自己
通过例子快速掌握
http://node.dengtacj.cn:55561/demo/flex-demo/flex-demo.html

• flex-direction:row/column 决定主轴横向还是竖向
• justify-content:center 主轴对齐
• align-items:center 次轴对齐

background

• background-position
• background-size

css优先级

• 写在style里的高于写在css里的
• 同一份css或多份css，同样优先级时后者覆盖前者
• 同一份css或多份css，同样优先级不同时，高的覆盖低的

实战之前-语义，结构

https://juejin.im/post/5eb4f89d5188256d800a4b33

image

语义的好处

1. 用户体验
2. 利于seo
3. 团队开发，可读性

• p 段落
• b 表强调
• strong 表强调，小段文字
• em 默认斜体，表强调
• span 小段文字
• h1-h6标题
• li 列表

好的结构是书写css的基础，考察css水平就看结构

实战之垂直居中

1. position:fixed; left:50%; top:50%; transform:translate(-50%,-50%) （写给自己）
2. position:fixed; left:0; top:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center （写在父层）

实战之列表

image

实战之todo

image