盒模型

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

盒模型一

一.盒子的分类

不同元素产生的盒子类型可能不同（但都是矩形）

一个元素产生什么样的盒子，取决于它CSS的display属性

四种盒子：

display： none 不生成盒子

display： inline 行盒：多个标签在一行显示

display： block块盒：一个标签独占一行

display：其他属性

二.盒子的组成

margin 外边距 与其他盒子之间的距离

border 边框

padding 内边距 边框与内容之间的距离

content 内容 内容的宽度和高度

默认情况下，背景色的渲染区域是内容，内边距和边框三个部分

padding取值；margin取值

1个值表示4个方向相同，上，下，左，右

2个值表示上下，左右两个方向

3个值表示上，左右，下

4个值表示上，右，下，左

边框

三个值：1.边框粗细 2.边框样式(solid实线) 3.边框颜色

实线 solid

虚线 dashed

双线 double

圆点 dotted

取值可以1-4个，但必须要有线

css新增

圆角边框

1个值：border-radius: 10 p x 四个角一样的弧度 (以半径为十画圆)

扩展

2个值：border-radius: 10 px / 20 px（椭圆）

通过css得到一个三角形

没有内容的块级标签，设置css实线，X像素，边框宽度0,边框为四种颜色，给其中三个设置透明色transparent 可以得到一个三角形

边框的默颜色是文本的默认颜色

盒模型二

一、相关设置

设置width，height

最大/小 宽高

min/max width/height

网页缩小/放大到一定尺寸就不再变化

溢出内容显示设置

overflow:设置超出内容的展示方式

scroll 在设置的范围内显示多出的内容

注：会同时出现两个方向的滚动条

hidden 超出部分隐藏

即：只显示填充盒内容（padding 和content）

auto 哪个方向超出哪个方向滚动

visible 显示

断词规则

英文：空格，标点符号

中文：标点符号，【空格】

数字：空格，标点符号

normal:按照断词规则执行

break-all：不断词（当占满宽度时，再换行）

例如： word-break: normal;

盒子扩展内容：子盒子

边框盒（border-box）组成：border，padding,content

填充盒(padding-box) 组成： padding, content

内容盒(content-box) 组成： content

二、背景

背景图片

background-image: url（）

url统一资源路径

url小括号里面是图片地址，需要加引号

设置背景的显示区域（颜色）

border-box 边框盒的左上角

padding-box 填充盒的左上角

content-box 内容盒的左上角

例子： background-clip: content-box;

设置背景的渲染区域 (图片)

border-box 边框盒的左上角

padding-box 填充盒的左上角

content-box 内容盒的左上角

例子： background-origin: content-box;

三、标准盒模型和IE盒模型的区别

box-sizing设置盒子的计算规则

content-box 默认值（标准盒模型）

border-box IE盒模型

标准盒模型：宽高是元素内容的宽高

IE盒模型：宽高是边框+内边距+内容总和

IE盒模型的适用场景

宽度给百分百的基础上，又添加了其他盒子的尺寸

为解决滚动条的问题，因此更改盒子的计算规则来实现效果

轮廓：outline

优点：不占像素

不可分别设置四个方向的值（即四个方向样式统一）

四、继承 inherit

继承是指子元素会自动拥有父元素的某些CSS属性

文本类的样式，字体都可以继承

可以继承条件

• 属性是可以继承的

• 属性没有被声明过

强制继承

强制继承，也叫显式继承，是指将CSS属性值设置为inherit

两个原因：

• 为了继承有些不可继承的属性
• 为了继承已被声明过的属性

盒模型中，只有margin可以给负值