前端-固定布局-盒模型/元素类型

固定布局概念

固定布局(Fixed Layout)是网页的常用的布局方式。设置固定宽高的包裹层(Wrapper)俗称容器，来进行分区，添加margin/padding调整位置,其内部的内容可以使用百分比或者固定的宽高来固定，添加margin/padding来调整它的位置。

盒模型

首先，我们先认识一下CSS盒子模型，它是搭建布局的重要组成。它由内容content、内边距padding、边框border、外边距margin等几个重要的CSS元素组成。

这里要注意的是，标准盒模型（content-box）中，给盒子设定的固定宽高是指内容content的宽高，当添加内边距padding与边框border时，盒子会被撑大，也就是浏览器中显示的元素宽高=内边距padding+边框border+你设置的宽高。

为了解决这个问题，可以使用box-sizing: border-box;将盒模型转为怪异盒模型（border-box），这样你设置的宽高就会是浏览器中显示的元素宽高，padding和border将不会把盒子撑大。

CSS 标准盒模型 Box Model

元素类型

其次，是块元素block、内联元素（行内元素）inline与行内块元素inline-block。

块元素（block）的特点

1，占独一行（会换行，上下排列）；

2，能认识宽高 ；

3，一般作为容器使用；

//不设置宽时，其宽等于父标签的宽

div p h1 h2 h4 h h3 h6 form ul li dl dt dd ol等 属于块元素

ul li默认的元素类型是list-item

内联元素（inline）的特点

1，不会独立占一行（不会换行，左右排列）；

2，不认识宽高 ，宽度由内容撑开；

3，不认识margin-top/margin-bottom padding-top/padding-bottom解析的时候显示不正确；

a span b strong i em等都属于内联元素

行内块元素（inline-block）的特点

1，不会独立占一行（不会换行，左右排列）

2，能认识宽高

img input button等属于行内块元素

默认样式布局中块级元素垂直排列，行内元素和行内块元素水平排列