目录
盒子模型
页面布局要学习三大核心,盒子模型,浮动和定位,学习好盒子模型能非常好的帮助我们布局页面
看透网页布局的本质
网页布局过程:
1.先准备好相关的网页元素,网页元素基本都是盒子box
2.利用CSS设置好盒子样式,然后摆放到相应位置
3.往盒子里面装内容
网页布局的核心本质:就是利用CSS摆盒子
盒子模型组成
所谓盒子模型:就是把HTML页面中的布局元素看做是一个矩形的盒子,也就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边框,外边距,内边距,和实际内容
边框(border)
border可以设置元素的边框,边框有三部分组成:边框宽度(粗细)边框样式 边框颜色
语法:
border:border-width || border-style || border-color
属性 | 作用 |
---|---|
border-width | 定义边框粗细,单位是px |
border-style | 边框的样式 |
border-color | 边框颜色 |
边框简写
border: 1px solid red; 没有顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div {
width: 300px;
height: 200px;
/*边框的粗细 一般情况下都用px*/
/*border-width: 5px;*/
/*边框的样式 solid 实线边框 dashed 虚线 dotted点线*/
/* border-style: solid;
border-color: green;
*/
border:5px solid green;
/*层叠性 只是层叠了 上边框*/
border-bottom: 4px dashed red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
表格的细线边框
border-collapse属性控制浏览器回执表格边框的方式.它控制相邻单元格的边框。
语法:
border-collapse: collapse;
- collapse是合并的意思;
- bborder-collapse: collapse;表示相邻边框合并在一起
边框会影响盒子实际大小
边框会额外增加盒子的实际大小,因此我们有两种方案解决:
1.测量盒子大小的时候。不量边框
2.如果测量的时候包含了边框,则需要width/height减去边框宽度
内边距
padding 属性用于设置内边距,即边框与内容之间的距离。
属性 | 作用 |
---|---|
padding-left | 左内边距 |
padding-right | 右内边距 |
padding-top | 上内边距 |
padding-bottom | 下内边距 |
内边距的简写
- padding 属性(简写属性)可以右一到四个值
值的个数 | 表达意思 |
---|---|
padding: 5px; | 1个值,代表上下左右都有5像素内边距 |
padding: 5px 10px; | 2个值,代表上下内边距是5像素 左右内边距是10像素 |
padding: 5px 10px 20px; | 3个值,代表上内边距5像素 左右内边距10像素 下内边距20像素 |
padding: 5px 10px 20px 30px; | 4个值,上是5像素 右10像素 下20像素 左30像素 顺时针 |
- 以上4种情况,我们实际开发都会遇到。
padding影响实际盒子大小
当我们给盒子指定padding值之后,发生了2件事情:
- 1.内容和边框有了距离,添加了内边距
- 2.padding影响了盒子实际大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div {
width: 300px;
height: 700px;
/*加了内边距后,width=300+20+50=370px
height=700+10+30=740px*/
padding: 10px 20px 30px 50px;
}
</style>
</head>
<body>
<div>2007年4月19日,词条页面改版,改进词条页面的行高和行宽,在词条页面的底部增加了汉英词典解释,改进历史版本页面;5月百科编辑词条积分调整;6月开放分类检索升级,历史版本增加翻页功能,百科优质版本标准出台;9月高级编辑器上线,百科任务改版。11月百科推出相关词条,可以在百度知道里搜索到百科词条。(百度百科历史首页图片相册图片来源</div>
</body>
</html>
解决方案:
- 如果保证盒子跟效果图大小保持一致,则让width/height减去多出来的内边距大小即可。
padding不会撑开盒子的宽高度
- 如果盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>padding不会影响盒子大小的情况</title>
<style>
h1 {
/* width: 100%; */
height: 200px;
background-color: pink;
padding: 30px;
}
div {
width: 300px;
height: 100px;
background-color: purple;
}
div p {
padding: 30px;
background-color: skyblue;
}
</style>
</head>
<body>
<h1></h1>
<div>
<p></p>
</div>
</body>
</html>
外边距
- margin属性用于设置外边距,即控制盒子和盒子之间的距离
属性 | 作用 |
---|---|
margin-left | 左外边距 |
margin-right | 右外边距 |
margin-top | 上外边距 |
margin-bottom | 下外边距 |
margin简写方式代表的意义跟padding完全一致
外边距典型应用
外边距可以让块级盒子水平居中,但是必须满足两个条件:
- 1.盒子必须指定了宽度(width)
- 2.盒子左右的外边距都设置为auto
.header {
width:960px;
marin:0 auto;
}
常见的写法,一下三种都可以:
.nav {
margin-left:auto;
margin-right:auto;
}
.nav {
margin:auto;
}
/*第三种最常用*/
.nav {
margin:0 auto;
}
注意:以上方法是让块级元素水平居中,行内元素或者行内块元素水平居中给其父元素添加text-align:center
外边距合并
- 使用margin定义块元素的垂直外边距时,可能会出现外边距的合并
嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会坍塌较大的外边距值。
解决方案:
1.可以为父元素定义上边框
2.可以为父元素定义上内边框
3.可以为父元素添加overflow:hidden
还有其他方法,比如浮动,固定,绝对定位的盒子不会有塌陷问题,后面我们再总结。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.father {
width: 450px;
height: 400px;
background-color: green;
margin-top: 20px;
/*border: 1px solid transparent;*/
/*padding-top: 10px;*/
overflow: hidden;
}
.son {
margin-top: 10px;
width: 250px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
清除内外边距
网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。因此我们在布局前,首先要清除下网页元素的内外边距
* {
padding:0;/*清除内边距*/
margin:0;/*清除外边距*/
}
注意:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。但是转换为块级和行内块元素就可以了