常见html问题,常见的HTML

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

HTML和CSS是基本组成部分，虽然现在三大框架的原因，几乎很少去原生的去编写了，但是了解其根本是不可避免的

盒大小计算传统盒模型由内到外分别为content->padding->border->margin，容易导致盒子的宽度的变化

box-sizing:border-box,设置这个属性使得模型改为了content = content+padding+border之和，方便计算和修改

margin的重叠问题

当上下两个block元素都存在marigin时，大的会覆盖小的，而不是叠加。当一个为负值时会先转为绝对值再相减，当两个为负值时，转为正值，然后用0去减最大值解决方案：底部元素使用浮动或者绝对定位，或者统一margin的边距

当父元素没有border,padding,inline时，子元素的margin-top/bottom也会与父元素发生重叠解决方案：父元素添加padding,overflow:hidden,border,或者子元素添加绝对定位和浮动

float,position,flex

float问题相关

浮动脱离文档流，最先是为了实现文字环绕图片的效果，而后被人烂用来布局，常见圣杯布局和双飞翼布局

清除浮动，需要给所有浮动元素的父容器添加clearfix这个类.clearfix:after{

content: '';

display: block;

clear: both;

}

.clearfix{

*zoom: 1;

}

双飞翼布局使用margin来腾出空间，双飞翼布局中间部分需要再包一层布局，不然无法使用margin.

圣杯布局使用padding来腾出空间,圣杯布局需要一个最小宽度，因为由于设置了相对定位，所以当left原来的位置和right的位置产生重叠时，由于浮动的原因一行放不下就会换行body{

min-width: 600px;

}

.main{

float: left;

width: 100%;

height:200px;

}

/* 双飞翼布局相关 */

.main-content{

margin: 0 200px;

}

.left{

float: left;

width: 200px;

height: 200px;

/* 圣杯布局相关 */

margin-left: -100%;

position: relative;

left: -200px;

/* 双飞翼布局相关 */

margin-left: -100%;

}

.right{

/* 圣杯布局相关*/

margin-left: -200px;

position: relative;

left: 200px;

/* 双飞翼布局相关 */

margin-left: -200px;

}

position问题相关relative 相对定位，相对于最近一个非static定位的元素

position 绝对定位，绝对于最近一个非static定位的元素

fixed 绝对定位，相对于window

flex布局

flex布局是目前来说最常用的布局了，因为简单使用易上手给一个元素设置display:flex时，他的子元素便成为了flex布局

父元素可以设置主轴方向flex-direction，row为水平方向排列，column为垂直方向排列，xx-reverse则为反转

然后可以设置主轴的对齐方式justify-content, 属性有flex-start/end,center,space-between,apace-around，顾名思义

align-items则为另一个非主轴的对齐方式，属性有flex-statr/end,center,stretch(拉伸于容器同高/宽),baseline(依据子元素的文字对齐)

css选择器的权重和优先级内联样式的权值为1000，如style='xxx'

id选择器的权值为100, 如#content

类，伪类和属性选择器的权值为10，如.content,:hover,[attribute]

元素选择器和伪类选择器的权值为1，如 div,p

相同权重的后面覆盖前面

重绘和回流重绘：当修改简单样式的时候，如颜色，背景，导致浏览器重新绘制样式

回流：当dom元素大小和位置和属性发生改变，导致浏览器重新渲染文档

回流损耗比重绘高，应该避免重复操作dom,应该一次性获取起索引，计算完全后再进行操作