CSS 盒子模型

197 阅读5分钟

盒子模型

页面布局要学习三大核心,盒子模型,浮动和定位,学习好盒子模型能非常好的帮助我们布局页面

看透网页布局的本质

网页布局过程:
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;/*清除外边距*/
}

注意:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。但是转换为块级和行内块元素就可以了