网页布局中,我们是如何把里面的文字,图片,按照美工给我们的效果图排列的整齐有序呢?
其实网页布局的本质就是:
所谓盒子模型,就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。
盒子模型有元素的内容、边框(border)、内边距(padding)、和外边距(margin)组成。
盒子里面的文字和图片等元素是 内容区域盒子的厚度 我们成为盒子的边框盒子内容与边框的距离是内边距(类似单元格的 cellpadding)。
盒子与盒子之间的距离是外边距(类似单元格的 cellspacing)。
他的语法格式如下:
border : border-width || border-style || border-color
/** 例子 **/
border: 1px solid red;
属性 | 作用 |
---|---|
border-width | 定义边框粗细,单位是px |
border-style | 边框的样式 |
border-color | 边框颜色 |
边框有四种样式:
padding属性用于设置内边距。 **是指 边框与内容之间的距离。**当我们给盒子指定padding值之后, 发生了2件事情:
属性 | 作用 |
---|---|
padding-left | 左内边距 |
padding-right | 右内边距 |
padding-top | 上内边距 |
padding-bottom | 下内边距 |
我们分开写有点麻烦,我们可以进行简写。
值的个数 | 表达意思 |
---|---|
1个值 | padding:上下左右内边距; |
2个值 | padding: 上下内边距 左右内边距 ; |
3个值 | padding:上内边距 左右内边距 下内边距; |
4个值 | padding: 上内边距 右内边距 下内边距 左内边距 ; |
margin属性用于设置外边距。 margin就是控制盒子和盒子之间的距离。margin值的简写 (复合写法)代表意思 跟 padding 完全相同。
属性 | 作用 |
---|---|
margin-left | 左外边距 |
margin-right | 右外边距 |
margin-top | 上外边距 |
margin-bottom | 下外边距 |
可以让一个块级盒子实现水平居中必须:
实际工作中常用这种方式进行网页布局,示例代码如下:
.header{ width:960px; margin:0 auto;}
text-align: center; /* 文字 行内元素 行内块元素水平居中 */
margin: 10px auto; /* 块级盒子水平居中 左右margin 改为 auto 就阔以了 上下margin都可以 */
padding margin
ackground-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 */
}
为了更灵活方便地控制网页中的元素,制作网页时,我们需要将元素的默认内外边距清除
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。
当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom
,下面的元素有上外边距margin-top
,则他们之间的垂直间距不是margin-bottom
与margin-top
之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。所以我们尽量给只给一个盒子添加margin值。
对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者。
为了解决这个问题,大概有以下几个方案:
overflow:hidden
。网页布局的核心,就是用 CSS 来摆放盒子。CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流(标准流)、浮动和定位。
div
、hr
、p
、h1~h6
、ul
、ol
、dl
、form
、table
。span
、a
、i
、em
。元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制移动到指定位置。他有三个作用:
在 CSS 中,通过 float
属性定义浮动,语法如下:
选择器 { float: 属性值; }
属性值 | 描述 |
---|---|
none | 元素不浮动(默认值) |
left | 元素向左浮动 |
right | 元素向右浮动 |
漂浮在普通流的上面。脱离标准流。 俗称 “脱标”,float
属性会让盒子漂浮在标准流的上面,所以第二个标准流的盒子跑到浮动盒子的底下了。
.box1 {
width: 200px;
height: 200px;
background-color: rgba(255, 0, 0, 0.5);
float: left;
}
.box2 {
width: 150px;
height: 300px;
background-color: skyblue;
}
浮动的盒子,把自己原来的位置漏给下面标准流的盒子,就是不占有原来位置。
.box1 {
width: 200px;
height: 200px;
background-color: rgba(255, 0, 0, 0.5);
/* 让第 1 个盒子漂浮起来,不占位置 */
float: left;
}
.box2 {
width: 150px;
height: 300px;
background-color: skyblue;
}
float
属性会改变元素display属性。任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。 生成的块级框和我们前面的行内块极其相似。下面举例我们生活中很常见的一个样式:div 水平排列。
div {
width: 200px;
height: 200px;
background-color: pink;
/* 转换为行内块元素,可以水平显示,不过 div 之间有间隙,不方便处理 */
/* display: inline-block; */
/* 设置浮动属性,可以让 div 水平排列,并且没有间隙 */
float: left;
}
.two {
background-color: hotpink;
}
浮动的元素互相贴靠一起的,但是如果父级宽度装不下这些浮动的盒子, 多出的盒子会另起一行对齐。
我们使用浮动的核心目的——让多个块级盒子在同一行显示。 因为这是我们最常见的一种布局方式。
float (浮漏特)
特点 | 说明 |
---|---|
浮 | 加了浮动的盒子是浮起来的,漂浮在其他标准流盒子的上面。 |
漏 | 加了浮动的盒子是不占位置的,它原来的位置漏给了标准流的盒子。 |
特 | 特别注意:浮动元素会改变display属性, 类似转换为了行内块,但是元素之间没有空白缝隙 |
定位也是用来布局的,它有两部分组成:定位 = 定位模式 + 边偏移。
简单说, 我们定位的盒子,是通过边偏移来移动位置的。
在 CSS 中,通过 top
、bottom
、left
和 right
属性定义元素的边偏移:(方位名词)。
边偏移属性 | 示例 | 描述 |
---|---|---|
top | top: 80px | 顶端偏移量,定义元素相对于其父元素上边线的距离。 |
bottom | bottom: 80px | 底部偏移量,定义元素相对于其父元素下边线的距离。 |
left | left: 80px | 左侧偏移量,定义元素相对于其父元素左边线的距离。 |
right | right: 80px | 右侧偏移量,定义元素相对于其父元素右边线的距离 |
定位的盒子有了边偏移才有价值。 一般情况下,凡是有定位地方必定有边偏移。
在 CSS 中,通过 position
属性定义元素的定位模式,语法如下:
选择器 { position: 属性值; }
定位模式是有不同分类的,在不同情况下,我们用到不同的定位模式。
值 | 语义 |
---|---|
static | 静态定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
静态定位是元素的默认定位方式,无定位的意思。它相当于 border 里面的none, 不要定位的时候用。静态定位 按照标准流特性摆放位置,它没有边偏移,静态定位在布局时我们几乎不用的 。
相对定位是元素相对于它原来在标准流中的位置来说的。他有两个特点:
绝对定位是元素以带有定位的父级元素来移动位置,也就是我们常说的拼爹。他的特点:
固定定位是绝对定位的一种特殊形式: (认死理型) 如果说绝对定位是一个矩形 那么 固定定位就类似于正方形
浏览器可视窗口 + 边偏移属性
来设置元素的位置; 定位模式 | 是否脱标占有位置 | 移动位置基准 | 模式转换(行内块) | 使用情况 |
---|---|---|---|---|
静态static | 不脱标,正常模式 | 正常模式 | 不能 | 几乎不用 |
相对定位relative | 不脱标,占有位置 | 相对自身位置移动 | 不能 | 基本单独使用 |
绝对定位absolute | 完全脱标,不占有位置 | 相对于定位父级移动位置 | 能 | 要和定位父级元素搭配使用 |
固定定位fixed | 完全脱标,不占有位置 | 相对于浏览器移动位置 | 能 | 单独使用,不需要父级 |
top
和 bottom
不要同时使用;left
和 right
不要同时使用。