Day05-CSS-03-盒子模型复习

CSS-03-盒子模型

盒子模型

CSS三个大模块：盒子模型、浮动、定位

1.盒子模型

继承性、层叠性、优先性

• 把HTML页面中布局的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
• CSS盒模型本质上是一个盒子，封装周围的HTML元素，包括
• 外边距（margin）
• 边框（border）
• 内边距（padding）
• 实际内容（content）

所有的文档元素（标签）都会生成一个矩形框，他描述了一个文档元素在网页布局中会占用的大小

每个盒子除了有自己的大小和位置外，还会影响其他盒子的大小和位置。

2.盒子边框

border: border-width | border-style | border-color
/* 边框综合设置 不分先后顺序*/
border: 1px solid red;   

属性	作用
border-width	定义边框宽度，单位是px
border-style	边框样式
border-color	边框颜色

边框样式常用属性

none：没有边框（默认值）

solid：边框为单实线

dashed：边框为虚线

dotted：边框为点线

double：边距为双实线

2.1圆角边框

border:radius: 左上角 右上角 右下角 左下角;

• 其中每一个值可以为数值或百分比的形式

• 让一个正方形变成圆圈

  border-radius: 50% 
  

3.内边距

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

padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距

3.1属性值设置

值得个数	表达意思
一个值	上 右 下 左
两个值	上下 左右
三个值	上 左右 下
四个值	上 右 下 左

3.2外盒子和内盒尺寸计算（元素实际大小）

/*外盒尺寸计算（元素空间尺寸）*/
空间高度 = content height + padding + border + margin
空间宽度 = content width + padding + border + margin
/*内盒尺寸计算（元素实际大小）*/
空间高度 = content height + padding + border
空间宽度 = content width + padding + border

注意：

宽度属性和高度属性仅用于块元素，对行内元素无效（img标签和input行内块除外）

计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并情况

如果一个盒子没有给定宽度或则说继承了父亲的宽度，则padding 不会影响本盒子的大小

4.外边距

margin会在元素之间创建“空白”，这段空白通常不能放置其他内容

margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:左外边距

4.1 外边距实现盒子居中

可以让一个盒子实现水平居中，需要两个条件：

必须是块级元素。

盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

.box{ 
    width:960px;
    margin:0 auto;
}

4.2文字（行内元素）居中

文字的水平居中是 text-align: center;

盒子水平居中是 margin: 0 auto;

text-align: center; /*  文字居中水平 */
margin: 10px auto;  /* 盒子水平居中  左右margin 改为 auto 就阔以了 */

4.3 清除元素的默认内外边距

*{
    padding: 0;  /*清除内边距*/
    margin: 0;   /*清除外边距*/
}

4.4外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

4.4.1 相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

解决方案： 不要这样设置。

4.4.2 嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

解决方案：

1. 可以为父元素定义1像素的上边框或上内边距。
2. 可以为父元素添加overflow:hidden(overflow 属性规定当内容溢出元素框时发生的事情）。

5.插入图片和背景图片的区别

插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin

背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position

 img {  
		width: 200px;/* 插入图片更改大小 width 和 height */
		height: 210px;
		margin-top: 30px;  /* 插入图片更改位置 可以用margin 或padding  盒模型 */
		margin-left: 50px; /* 插入当图片也是一个盒子 */
	}

 div {
		width: 400px;
		height: 400px;
		border: 1px solid purple;
		background: #fff url(images/sun.jpg) no-repeat;
		background-position: 30px 50px; /* 背景图片更改位置 用 background-position */
	}

6. CSS盒模型大小计算

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

• 1、box-sizing: content-box 盒子大小为 content (width/heigth)+ padding + border, content-box:此值为其默认值，其让元素维持W3C的标准Box Mode。

• 2、box-sizing: border-box 盒子大小为 width/heigth 就是说 padding 和 border 是包含到width里面的。

6.1 盒子模型的概念

就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

6.2 盒子模型的组成

一个元素占有空间的大小由几个部分构成，其中包括

元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin），
四个部分，这四个部分一起构成了盒子模型。

6.3 盒子模型的分类

盒模型的分类（最重要的部分）
盒模型分为 ： W3C标准盒子 、IE盒子

1.W3C标准盒子（content-box）：

在这种盒模型下，我们所说的元素的 width ，实际上只包含 content

盒子总宽度 = margin + border + padding + width

2.IE盒子（border-box）：

又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型。

在这种盒模型下，我们所说的元素的 width ，实际上包含了 content + padding + border

盒子总宽度= margin + width

7. 盒子阴影

语法格式：

box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内/外阴影；

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

注意:

1. 前两个属性是必须写的。其余的可以省略。
2. 默认是外阴影 (outset) ，不用设置， 想要内阴影设为 inset 。
3. X轴与Y轴如果有值，就改变了（正值 向右 向下）

div {
    width: 200px;
    height: 200px;
    border: 10px solid red;
    /* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
    /* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */
    box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);			
}

8.overflow 溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

visible(默认) : 　不剪切内容也不添加滚动条。
auto : 　 超出自动显示滚动条，不超出不显示滚动条
hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll : 　不管超出内容否，总是显示滚动条