html、css基础总结

html中的标签分类：

• 行内元素：
  无法定义宽高，宽高由内容自动撑起，并且margin（上下）和padding（上下）对行内标签是不起作用的；
  例如：span a label strong

• 块级元素：
  width默认为100%，独占一行，与兄弟块级元素默认上下排序
  例如：div ul ol p h1 h2 h3 li table

• 行内块级元素
  可通过display：inline-block来设置结合了行内元素和块级元素的优点，可是元素在行内横向排序，并且可定义宽高；

css常用基础：

盒模型：
盒子宽度的计算：内边距+内容宽度+外边框 = offsetWidth
使用box-sizing: border-box可让offsetWidth = width
margin重叠问题：
相邻元素margintop和marginbottom会发生重叠，两者之间的距离为最大的margin
margin-top和margin-left为负值，自身移动

marfin-bottom和margin-right为负值，相邻下个元素移动

BFC的理解和应用

BFC: 元素的一种属性，具有BFC属性的元素将会成为独立元素并且不会影响其他元素的布局；
元素变成BFC区域的条件：

• body根元素；
• 设置定位：absolute或者fixed
• 设置overflow非visible
• 设置flex布局
• 设置display：table

float布局：
使用float布局的元素脱离了文档流，但是并未脱离文本流，使用场景：将块级元素在行内显示；
清除浮动方式(主要是清除对标准流元素的影响)：
1、clear:both；
2、利用BFC特性，将元素转成BFC元素，设置visible：hidden
3、在浮动元素后面添加一个空元素，并将该空元素设置为clear：both
4、伪类元素选择器，同3类似

.clearfix:after {
   content:"";
   display: block;
   height: 0;
   clear: both;
}

rem, px ，vw，vh

rem: 相对根元素的font-size值 1rem = 1font-size(根元素)
px: 绝对长度单位；
em：相对于父元素的长度单位；
media-query: 可根据不同屏幕宽度设置根元素的font-size

@media only screen and (max-width: 374px) {
   // ipone5
   html {
     font-size: 86px
   }
}
@media only screen and (max-width: 375px) and (max-width: 413px) {
   // ipone6/7/8/x
   html {
     font-size: 100px
   }
}
@media only screen and (max-width: 414px) {
   // ipone6p或更大尺寸
   html {
     font-size: 110px
   }
}

window.screen.height: 屏幕高度
window.screen.width: 屏幕宽度
window.innerHeight: 网页视图高度
window.innerWidth: 网页视图高度
document.body.clientHeight: body的高度，网页内容决定
document.body.clientWidth: body的高度，网页内容决定
vh: 网页视图高度的1/100
vw：网页视图宽度的1/100
vmax：取网页视图的width和height的最大值的1/100
vmin：取网页视图的width和height的最小值的1/100

line-height的继承

line-height继承：
1、父元素的line-height设置为具体尺寸值（例如：30px）：继承父元素的line-height值
2、父元素的line-height设置为百分比（例如：200%）：继承父元素的fontSizelineHeight
3、父元素的line-height设置为比例值（例如：2，1.5）：继承自身fontSize父元素lineHeight