css布局的几种方式(css的盒子模型有几种)

css布局的几种方式

CSS常见的布局方法包括弹性布局、固定布局、流体布局、混合布局、肯定定位布局等。
1.弹性布局：整体宽度及其中所有栏的值都以单位编写。这应使布局可以运用浏览器的指定根本字体大小缩放。栏宽度将变得更宽,能以任何大小显示更舒适、更可读的行长度。
2.固定布局：整体宽度及其中所有栏的值都以像素单位编写，布局坐落用户浏览器的中心。
3.流体布局：整体宽度及其中所有栏的值都以百分比编写，百分比通过用户浏览器窗口的大小核算。
4.混合布局：混合布局组合两种其他类型的布局，弹性和流体。页面的总宽度为100%,，但侧栏值设置为em单位。
5.肯定定位布局：所有前述布局的外栏运用起浮内容。而肯定定位布局彻底如其名，有肯定定位的外栏。有必要记住,当运用这些布局时，侧栏会“提出文档流程”,因而可能有一些不合适的成果。

css的盒子模型有几种

一、盒子模型分两种
第一种：W3C规范盒子模型（规范盒模型）
第二种：IE规范的盒子模型（奇怪盒模型）
二、规范盒模型与奇怪盒模型的区别
规范盒模型：width指的是内容区域content的宽度，height指的是内容区域content的高度
规范盒模型下盒子的巨细=content+padding+border+margin
奇怪盒模型：width指的是内容、内边距、边框的宽度、height指的是内容、内边距、边框的高度
width=content+padding-left+padding-right+border-left+border-right，
height=content+padding-top+padding-bottom+border-top+border-bottom
奇怪盒模型下盒子的巨细:宽度=width+margin，高度=height+margin
三、通过box-sizing设置盒子模型的解析形式
box-sizing有两个值可选：
（1）content-box：默认值，规范盒模型，盒子的巨细=content+padding+border+margin
（2）border-box：奇怪盒模型，宽度=width+margin，高度=height+margin