盒子模型
概念:
所谓盒子模型就是把HTML页面中的元素(标签)看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。
看透网页布局的本质
我们之前说过,行内元素比如文字,也需要一个盒子把他们装起来,我们前面学过的双标签都是一个盒子。有了盒子,我们就可以随意的,自由的,摆放位置了。
网页布局的本质:
把网页元素比如文字图片等等,放入盒子里面,然后利用CSS摆放盒子的过程,就是网页布局。
盒子模型(Box Model)
所有的文档元素(标签)都会生成一个矩形框,我们称为元素框(element box),它描述了一个文档元素再网页布局汇总所占的位置大小。
盒子模型总尺寸=border-width(边框)+padding+margin+内容宽度
1、盒子内容(content)
可以给盒子内容设置大小
div {
width:100px;
height:100px;
}
宽度 width:像素值/百分比
高度 height:像素值/百分比
2、盒子边框(border)
边框就是那层皮,橘子皮,柚子皮,橙子皮。
1.边框宽度:
border-width:像素值
border-位置(top,bottom,left,right)-width:
2.边框样式:
border-style:
border-top-style:
border-bottom-style:
border-left-style:
border-right-style:
常见的solid(实线)、dashed(虚线)、dotted(点线)、none 默认值 、double(双线)
如果没有设置这个属性,所有边框效果不显示
3.边框颜色:
border-color:
综合语法:
border : border-width border-style border-color
例如:
border(顶,底,左,右): 1px solid red;
border-top(顶部边框): 1px solid red; /*上边框*/
border-bottom(底部边框): 2px solid green; /*下边框*/
border-left(左边边框): 1px solid blue;
border-right(右边边框): 5px solid pink;
3、内边距(padding)
padding属性用于设置内边距。 是指 边框与内容之间的距离。
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left: 左内边距
值的个数 | 表达意思 | |
---|---|---|
1个值 | padding:上下左右边距 | 比如padding: 3px; 表示上下左右都是3像素 |
2个值 | padding: 上下边距 左右边距 | 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素 |
3个值 | padding:上边距 左右边距 下边距 | 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素 |
4个值 | padding:上内边距 右内边距 下内边距 左内边距 | 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针 |
4、外边距(margin)
margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”, 这段空白通常不能放置其他内容。
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:左外边距
margin:上外边距 右外边距 下外边距 左外边
取值顺序跟内边距相同。
宽度: 内容 + 内边距(左右) + 外边距(左右)+ 边框(左右)
外边距实现盒子居中
可以让一个盒子实现水平居中,需要满足一下两个条件:
- 必须是块级元素。
- 盒子必须指定了宽度(width)
然后就给左右的外边距都设置为auto,就可使块级元素水平居中。
实际工作中常用这种方式进行网页布局,示例代码如下:
div{
width:1000px;
margin:10px auto;
}
外边距折叠(上下)
元素的上边距和下边距有时会发生折叠现象(与相邻的margin折叠,折叠后的值为折叠前两个值中较大的那一个)
外边距嵌套塌陷
在网页布局中,经常遇到一个div盒子嵌套另一个div盒子的情况,如果给子盒子设置一个上外边距,你会发现外边距会掉下来,此时,这是外边距塌陷的问题。
解决办法:
1、给父盒子设置边框。
2、给父盒子设置内边距(padding)。
3、给父元素添加overflow:hidden。
盒子模型的扩充
文字内容和盒子居中
- 盒子里的内容(行元素)水平居中是 text-align: center
- 盒子整体水平居中 margin: 0px auto;
text-align: center; /* 文字水平居中 */
margin: 10px auto; /* 盒子水平居中 左右margin 改为 auto 就OK了 */
清除元素的默认内外边距
为了更方便地控制网页中的元素,制作网页时,可使用如下代码清除元素的默认内外边距:
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
注意: 行内元素是只有左右外边距的,是没有上下外边距的。
content宽度和高度
使用宽度属性width和高度属性height可以对盒子的大小进行控制。
width和height的属性值可以为不同单位的数值或相对于父元素的百分比%,实际工作中最常用的是像素值。
圆角边框(CSS3)(扩展)
从此以后,我们的世界不只有矩形。radius 半径(距离)
语法格式:
border-radius: 50%; 让一个正方形变成圆圈
盒子阴影(CSS3)(扩展)
语法格式:
box-shadow:水平阴影(10px) 垂直阴影(10px) 模糊距离(虚实)(10px) 阴影尺寸(影子大小)(10px) 阴影颜色 内/外阴影(inset);
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置,允许负值 |
v-shadow | 必需。垂直阴影的位置,允许负值 |
blur | 可选。模糊距离 |
spread | 可选。阴影的尺寸 |
color | 可选。阴影的颜色。 |
inset/outset | 可选。将外部阴影(outset)改为内部阴影 |
前两个属性是必须写的。其余的可以省略。
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);
}
盒模型的分类和区别
标准盒模型和IE盒模型:
标准盒模型是w3c标准的盒模型,其包含:
盒子占用宽度:margin(左右) + border(左右) + padding(左右) + content(width)
IE盒模型,在IE中content的宽度包括padding和border这两个属性
盒子占用宽度:margin(左右) + content(width,padding,border)
总结:标准盒模型:设置边框和内边距时,会扩大盒子的宽度或高度
IE盒模型:设置边框和内边距时,不会扩大盒子的宽度或高度
w3c标准盒模型和IE盒模型(怪异模型)之间的转换:
css3的box-sizing属性
box-sizing:content-box| border-box|inherit
当为content-box时,将采取标准模式进行解析计算
当为border-box时,将采取IE模式解析计算
当为inherit时,将从父元素来继承box-sizing属性的值
使用box-sizing: border-box;就是为了在设置有padding值和border值的时候不把宽度撑开。
块元素和行内元素(display)
我们网页的标签非常多,在不同地方会用到不同类型的标签,以便更好的完成我们的网页。
标签的类型(显示模式)
HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素。具体如下:
1、块级元素(block-level)
每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素。
块级元素的特点:
(1)总是从新行开始,独占一行。
(2)设置宽度和高度,行高、外边距以及内边距都可以控制。
(3)宽度默认是容器的100%
(4)可以容纳内联(行内元素)元素和其他块元素。
2、行内元素(inline-level)
行内元素(内联元素)不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式。
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中<span>标签最典型的行内元素。
行内元素的特点:
(1)和相邻行内元素在一行上。
(2)高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。
(3)默认宽度就是它本身内容的宽度。
(4)行内元素只能容纳文本或则其他行内元素。
注意:
-
只有文字才能组成段落,因此p里面不能放块级元素,
同理还有这些标签h1,h2,h3,h4,h5,h6他们都是文字类块级标签,里面不能放其他块级元素。
-
链接里面不能再放链接。
-
a里面可以放块级元素
块级元素和行内元素区别
块级元素的特点:
(1)独占一行。
(2)可以设置宽度,高度,行高和外边距以及内边距。
(3)宽度默认是容器的100%。
(4)可以容纳行内元素和其他块元素。
行内元素的特点:
(1)不能独占一行,和相邻行内元素在一行上。
(2)不能设置宽和高,但水平方向的padding和margin可以设置,垂直方向的无效。
(3)默认宽度就是它本身内容的宽度。
(4)行内元素只能容纳文本或则其他行内元素。
3、行内块元素(inline-block)
在行内元素中有几个特殊的标签——<img />、<input />、<td>,可以对它们设置宽高和对齐属性,它们被称为行内块元素。
行内块元素的特点:
(1)和相邻行内元素(行内块)在一行上(但是之间会有空白缝隙)。
(2)可以设置宽,高,行高,外边距以及内边距。
(3)默认宽度就是它本身内容的宽度。
标签显示模式转换属性 display
块转行内:display:inline;
行内转块:display:block;
块、行内元素转换为行内块: display: inline-block;
此阶段,我们只需关心这三个。