前端课1 大纲 -css局部，背景，优先级
2020-05-09 本文已影响0人
mask2012
f12调试大法
快速预览与学习
CSS 常见布局方式
https://juejin.im/post/599970f4518825243a78b9d5
- display
- position
- float
- 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
由此引发的浮动闭合方案
- clear:both
- 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
语义的好处
- 用户体验
- 利于seo
- 团队开发，可读性
- p 段落
- b 表强调
- strong 表强调，小段文字
- em 默认斜体，表强调
- span 小段文字
- h1-h6标题
- li 列表
好的结构是书写css的基础，考察css水平就看结构
实战之垂直居中
- position:fixed; left:50%; top:50%; transform:translate(-50%,-50%) （写给自己）
- position:fixed; left:0; top:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center （写在父层）
实战之列表
image
实战之todo
image
