盒模型、浮动

目录

盒模型

边框border

外边距（边界）margin

margin:0 auto;

内边距（补白/内填充）padding

CSS浮动属性

清除浮动

---

盒模型

css定义所有的元素都是一个盒子，都包含边框（border）、外边距（margin）、内边距（padding）、内容区（content）组成。

标准盒模型(传统盒模型)

1. box-sizing:content-box;
2. 标准盒大小计算公式：width(content) + 左右padding + 左右border + 左右margin;
3. 传统盒模型的宽度和高度只包括内容区域（content）;

怪异盒模型(ie盒模型)

1. box-sizing:border-box;
2. 怪异盒大小的计算公式：width(content + padding + border) + 左右margin;
3. 怪异盒模型的宽度和高度包括了内容区域、内边距（padding）和边框（border）。

---

边框border

border:边框宽度 边框类型 边框颜色;

简写：border：宽度 类型 颜色

例如：border:5px solid #ff0000

边框作用： 网页中很多修饰性线条都是由边框来实现的。

边框宽度：border-width:

边框颜色：border-color:

边框样式：border-style:solid(实线)   dashed(虚线)  dotted(点划线)  double(双线)可单独设置一方向边框，

可单独设置一方向边框，

border-top:边框宽度 边框类型 边框颜色;

边框会撑大盒子

boeder:none/0;消除边框;

---

外边距（边界）margin

（控制盒子与盒子之间的距离，不会撑大元素的大小 ）

说明：

边界：margin,在元素外边的空白区域

margin-left:左边界

margin-right:右边界

margin-top:上边界

margin-bottom:下边界

属性值的4种方式：

四个值：上 右 下 左

三个值：上 左右 下

二个值：上下 左右

一个值：四个方向 如：margin:2px;定义元素四边边界为2px；

margin:0 auto;

让一个有宽度的块元素在父元素里或者在页面里面左右居中（水平居中）。

说明：可单独设置一方向边界，如：margin-top:10px;

margin的值可为负数，正数向右向下移动，负数向左向上移动 。

padding值不可以为负数

margin塌陷bug
两个垂直排列的兄弟块元素	两个元素上下的margin值 不会相加，会按照较大值计算。  解决方法:只给一个盒子maigin值。
父子元素	父子元素，给子元素设置margin-top会传递给父元素, 而子元素设置的margin-top无效。 解决方法: 1. 给父盒子设置浮动, 2. 给父盒子设置overflow ：hidden, 3 父盒子设置border-top或设置padding-top

---

内边距（补白/内填充）padding

(边框与内容之间的距离,会撑大盒子)

用法：

1）用来调整内容(文本、图片、子元素)在父元素中的位置关系

注：padding属性需要添加在父元素上。

2）padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值

属性值的4种方式：

四个值：上 右 下 左 {padding:0px 0px 0px 40px;}

三个值：上 左右 下 {padding:10px 20px 30px ;}

二个值：上下 左右 {padding:10px 20px ;}

一个值：四个方向 padding:2px; 定义元素四周填充为2px

说明：可单独设置一方向填充，如：上方向padding-top:10px;

padding不会对背景图片的位置造成影响。

---

CSS浮动属性

（让标准流盒子，一行内显示；即竖向排列变成横向排列，脱离文本流的控制（脱流））

（浮动的元素具有行内块元素的特点：

1.一行内多个显示，

2.可以直接设置宽度 高度，

3.默认宽度是内容宽度，

4.盒子中间没有间隙，且顶端对齐）

float属性的属性值：none，left，right。

none：默认值，没有浮动。

left：向页面左侧浮动。

right：向页面右侧浮动。

清除浮动

可以理解为打破横向排列。

清除浮动的关键字是clear，

语法：

clear : none | left | right | both

none：默认值。允许两边都可以有浮动对象

left：不允许左边有浮动对象

right  :  不允许右边有浮动对象

both  :  不允许有浮动对象

对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素；