权重
选择器
盒模型
- W3C 标准盒模型:
属性width,height只包含内容content,不包含border和padding。 - IE 盒模型:
属性width,height包含border和padding,指的是content+padding+border。
在当前W3C标准中盒模型是可以通过box-sizing自由的进行切换的。
content-box(标准盒模型)
width = 内容的宽度
height = 内容的高度
border-box(IE盒模型)
width = border + padding + 内容的宽度
height = border + padding + 内容的高度
当你想让两个子容器float:left,宽度各50%,然后给一点padding,最后让子容器并排充满父容器,一切想的挺美好,然而你发现结果并不是这么美好,因为子容器的盒子宽度已经超出了父容器的一半,导致了折行,于是,width就不能50%了,只能是50%再减去padding的像素值
响应式布局
同一页面在不同屏幕尺寸下有不同的布局。
响应式:只需要开发一套代码。 响应式设计通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容。
自适应:需要开发多套界面。 通过检测视口分辨率,来判断当前访问的设备是:pc端、平板、手机,从而