盒子模型

盒子模型(也叫框模型):

一个盒子我们会分成几个部分：

内容区(content)

内边距(padding)

边框(border)

外边距(margin)两个盒子之间的距离

要为一个元素设置边框必须指定三个样式

border-width:边框的宽度

border-color:边框颜色

border-style:边框的样式

盒子可见框的大小由内容区，内边距和边框共同决定,height和weight设置盒子内容区的大小

使用border-width可以分别指定四个边框的宽度

如果在border-width指定了四个值    则四个值会分别设置给上、右、下、左，按照顺时针的方向设置的

如果指定三个值     则三个值会分别设置给上、左右、下

如果指定两个值     则两个值会分别设置给上下、左右

如果指定一个值，则四边全都是该值

除了border-width，CSS中还提供了四个border-xxx-widthxxx的值可能是top right bottom left专门用来设置指定边的宽度

设置边框的颜色

* 和宽度一样，color也提供四个方向的样式，可以分别指定颜色

* border-xxx-color

边框样式:

设置边框的样式可选值：

none，默认值，没有边框

solid 实线

dotted 点状边框

dashed 虚线

double 双线

style也可以分别指定四个边的边框样式，规则和width一致，同时它也提供border-xxx-style四个样式，来分别设置四个边,没有优先级之分

边框

语法:border-width

border-color:

border-style:

内边距（padding），指的是盒子的内容区与盒子边框之间的距离，一共有四个方向：

padding-top

padding-right

padding-bottom

padding-left

内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距

外边距指的是当前盒子与其他盒子之间的距离，他不会影响可见框的大小，而是会影响到盒子的位置

盒子有四个方向的外边距：

margin-top

margin-right

margin-bottom

margin-left

由于页面中的元素都是靠左靠上摆放的，所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变，而如果是设置右和下外边距会改变其他盒子的位置

外边距可以设置负值,如果外边距设置的是负值,元素会反方向移动

盒模型分成内容区、内边距 、边框 、外边距四个部分

内联元素不能设置width和height

设置水平内边距,内联元素可以设置水平方向的内边距

垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局

水平外边距，内联元素支持水平方向的外边距

内联元素不支持垂直外边距

display可以修改元素的类型:

可选值:none:此元素不被显示

inline:可以将元素作为内联元素来显示

block:可以将元素转换成块元素

inline-block:将一个元素转换为行内块元素

(可以使一个元素既有行内元素的特点又有块元素的特点，既可以设置宽高，又不会独占一行)

visibility:

可以用来设置元素的隐藏和显示的状态

- 可选值：

visible 默认值，元素默认会在页面显示

hidden 元素会隐藏不显示

overflow处理溢出内容

可选值:1.visible  默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示

2.hidden    溢出的内容，会被修剪，不会显示

3scroll  可以添加滚动条,垂直和水平都产生

4.auto  根据需求添加滚动条

文档流

元素在文档流中的特点:

块元素

1.块元素在文档流中会独占一行,块元素会自上向下排列

2.块元素在文档流中默认宽度是父元素的100%

3.块元素在文档流中的高度默认被内容撑开

内联元素:

1.内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右。

2.在文档流中，内联元素的宽度和高度默认都被内容撑开

,当元素的宽度的值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，以适应内边距

浮动

语法:float

可选

1.none 默认值,元素默认在文档流中排列

2.left ，元素会立即脱离文档流，向页面的左侧浮动

3.right  ，元素会立即脱离文档流，向页面的右侧浮动

内联元素脱离文档流以后会变成块元素

文字绕图

浮动元素不会覆盖文字

简单布局

分为:固定布局和自适应布局