页面布局

1.标签显示方式

在页面显示的元素，有两种形式：

• 块元素：独占一行，可以设置宽高和内外边距，具备和元素属性，如div
• 行元素：仅占内容大小区域，不可以设置宽高和内外边距，不具备盒元素属性，如span
  在平常编辑网页时，可以给标签添加display属性来更改元素的显示形式
  元素的显示方式：display：
  1. block 块元素（默认）
  2. inline 行元素
  3. inline-block 行内块元素
  4. none 不显示

注意：在给元素添加inline-block属性改变元素的显示方式时，会导致元素之间存在间隔
消除inline-block导致元素间隔的方法：

方法	特点
删除标签之间的空格和换行	代码可读性较差
将父元素字体设置为0px	会影响自身字体大小，同时em之类参考父元素字体的值无法使用，可能导致布局混乱
给父级和自身设置此间距/字母间距	需要给每一个元素设置，比较繁琐
删除闭合标签	可能导致代码读写失败

2.盒模型

盒模型由外间距（margin,元素外部距元素的距离）、内间距（元素边框距元素内容的距离）和边框（border，元素内外间距间的边框线）三者组成

可以通过给margin/padding属性添加数值来控制元素的显示样式
其中，margin和padding都最多可以附加四个数值，
一个数时可同时改变上下左右四个方向的间距
两个数时第一个代表上下方向，第二个数代表左右方向
三个数时第一个代表上边距，第二个数代表左右边距，第三个数代表下边距
四个数时则分别代表上、右、下、左
也可以添加top、bottom、left、right来单独设置间距，如margin-left:2px

调整元素自身与其他元素的距离的方法：元素间的间距是外间距相加的和

3.浮动

元素浮动属性float：（使元素脱离当前位置向指定方向浮动）

1. none 不浮动（默认）
2. left 向左浮动
3. right 向右浮动

根据当前位置居中：auto
使用auto时需注意：

1. 标签自身要有宽高
2. inline-block或float都会使auto失效

浮动产生的影响：

1. 自身父元素无法从自身获得宽高
2. 后续元素会自动向左补位
3. 浮动会使当前元素脱离当前的文档流，覆盖标准流的元素(会遮盖普通元素)
4. 会使auto失效，但支持margin
5. 块元素会横排显示（失去独占一行的特性）
6. 行元素可以设置宽度和高度
7. 会提升半个层级

使用浮动时一定要清除浮动，以免造成页面布局混乱

清除浮动的方法	缺点
给父级设定宽高	直接写死会导致后续元素添加出现问题，无法解决元素重叠问题
使用overflow:hidden使超出内容区域部分隐藏	若内容需要超出或较多时会发生需求冲突，仅推荐在内容较少时使用
使用clear:both清除浮动	需要填写空标签绑定clear属性，该标签没有html属性，不符合html标签语义化
给父级设置display:inline-block属性	父级同级之间会留有间隔
使用after伪类	对浏览器的兼容性有较高的要求

：after伪类:
.父代类名:after{
		content:" . ";
		display:block;
		height:0px;
		clear:both;
		}
.父代类名{ zoom:1; }

4.定位

定位指使元素浮动到指定的位置
定位有三种：

1. 相对定位：相对于自身原有的定位，相对定位移动后原先位置仍然会保留，不会被普通写法占用，可以用其他的定位占用

定位元素{
	position:relative；
	}

2. 绝对定位：是元素脱离文档流，以具有相对定位的父元素为定位，若没有相对定位的父元素，会继续向上寻找直至文档

定位元素{
	position:absolute；
	}

相对定位适用于小范围的移动且移动后原有位置不会再使用的场景
绝对定位适用于动态去拖拽云阿苏时或者一些重叠的动画效果

3. 层级：调整元素层级

定位元素{
   z-index: number ;
   }

* 属性值没有单位，只有数字，以分号结尾
* 若需要调整元素过多时，需将每个元素层级都明确划分

4. 固定定位：将元素固定在页面的某个位置

定位元素{
   position：fixed；
   }

定位时都要用top/bottom/left/right附加具体的数值来调整具体的位置

将各种方法灵活组合使用即可完成简单的静态页面效果

本文均属个人理解