前端备忘录

---

html position

参考

• static：默认，遵循流式定位
• relative：相对流式定位做偏移时使用，仍占用空间，top/bottom/left/right
• absolute：从文档流中脱离，相对 上一个定过位（absolute/relative）的父元素的padding-box左上角 定位，宽高百分比同样根据该padding-box计算，top/bottom/left/right
• fixed：从文档流中脱离，相对文档定位，不会随scroll移动，top/bottom/left/right
• float：从文档流中脱离，相对父元素浮动，不需要指定position:float，需要指定float:left/right，多个float元素会依次排列，不会重叠。其他元素可以通过指定clear:left/right/both使得左侧/右侧/两边不允许出现浮动元素

html display

参考

• none：不占空间，不显示
• block：块级元素
  • div, p, h1, li
  • 独占一行
  • 可以设置height / width / margin / padding
  • 宽度缺省时占父元素100%
• inline：行内元素
  • a, em, img
  • 不能设置宽高，高度取决于字体大小，宽度取决于内容长短
  • 只能设置左右的padding和margin
  • 内部不能包含块级元素
• inline-block：可以设置height / width / margin / padding，可能存在空白符占位置的问题
• inherit：继承自父元素
• flex: 阮一峰nb

布局技巧

• 史上最全Html和CSS布局技巧

其他

面试参考

1. attribute 和 property 的区别
   attribute 是 dom 元素在文档中作为 html 标签拥有的属性；property 就是 dom 元素在 js 中作为对象拥有的属性。对
2. CSS 选择符
   （1）id选择器（#myid）
   （2）类选择器（.myclassname）
   （3）标签选择器（div,h1,p）
   （4）后代选择器（h1 p）
   （5）相邻后代选择器（子）选择器（ul>li）
   （6）兄弟选择器（li~a）
   （7）相邻兄弟选择器（li+a）
   （8）属性选择器（a[rel=“external”]）
   （9）伪类选择器（a:hover,li:nth-child）
   （10）伪元素选择器（::before、::after）
   （11）通配符选择器（*）