Web篇-css盒子模型

文章目录

Web篇-css盒子模型
前言
一、概述
二、盒子模型的使用
- 1、边框(border)
- 2、内边距（padding）
- 3、外边距（margin）
- 4、盒子的方向
- 5、外边距塌陷
- 6、在页面中查看盒子的大小

前言

在css设计和布局中，会经常使用到盒子模型，”box model“即用 盒子“盛放” 网页
中的各种元素。本篇文章将以初学者的角度对盒子模型作以浅学概述。

一、概述

如果把盒子模型比作一个快递包裹，那么模型的内容如同盒子里的实html中的所有元素都可以看作盒子，使用css盒子模型的本质是一个盒子封装周围的html元素。

二、盒子模型的使用

1、边框(border)

边框三要素：（缺少任何一个都不会显示）

边框颜色；
边框大小：（边框大小影响盒子大小，就像生活中的快递盒子边框越厚盒子就会变大）
边框样式：solid表示实线,dashed虚线,double双线。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试边框</title><style>.d{width: 300px;height: 300px;background-color: cadetblue;/* border-width: 20px;border-style: solid;border-color: aqua; *//* 简写形式： */border:20px solid aqua;          } </style></head><body><div class="d"></div></body>
</html>

**如何将盒子设计成圆角？
**

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试圆角</title><style>.d{width: 300px;height: 300px;background-color: aqua;border: 20px solid sandybrown;border-radius: 170px;}</style></head><body><div class="d"></div></body>
</html>

可见，当半径为盒子宽度一半时变成一个圆形，如果有边框，还应加上边框的大小。

2、内边距（padding）

内边距是透明的，定义元素边框与元素内容之间的空间。（也会影响盒子大小）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试内边距</title><style>.d{width: 400px;height: 400px;border: 20px solid lightgreen;padding: 10px;}</style></head><body><div class="d">内边距</div></body>
</html>

此时内边距为10，我们将内边距修改为50：

3、外边距（margin）

外边距指的是盒子与盒子之间的距离；（不会影响盒子大小）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试外边距</title><style>.d1{width: 300px;height: 300px;border: 20px double lightskyblue;margin: 50px;}.d2{width: 300px;height: 300px;border: 20px double lightskyblue;margin: 50px;}</style></head><body><div class="d1"></div><div class="d2"></div></body>
</html>

4、盒子的方向

盒子分为4个方向：top,bottom,left,right可以分别进行设置，此处我们以border为例；

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试盒子方向</title><style>.d{width: 300px;height: 300px;background-color: lightskyblue;border-bottom: 30px solid lightblue;border-top: 20px double lightsalmon;}</style></head><body><div class="d"></div></body>
</html>

使用浮动使两个盒子水平分布，且同时设置外边距margin属性时，水平距离是两个外边距之和：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试盒子方向2</title><style>div{width: 300px;height: 300px;background-color: cornflowerblue;float: left;}.d1{margin-right: 100px;}.d2{margin-left: 200px;</style>   </head><body><div class="d1"></div><div class="d2"></div></body>
</html>

当两个div垂直分布，且上边的div设置下外边距，下边的div设置上外边距，他们的垂直距离是两个外边距中距离较大的那个；

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试盒子方向2</title><style>div{width: 300px;height: 300px;background-color: cornflowerblue;}.d1{margin-bottom: 100px;}.d2{margin-top: 30px;</style>    </head><body><div class="d1"></div><div class="d2"></div></body>
</html>

5、外边距塌陷

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试外边距塌陷</title><style>.d1{width: 800px;height: 800px;background-color: aqua;/* overflow: hidden; */border: 1px solid lightcoral;}.d2{width: 200px;height: 200px;background-color: coral;margin-top:50px;}</style></head><body><div class="d1"><div class="d2"></div></div></body>
</html>

如上图，子盒子和父盒子出现了外边距合并的现象，把这种现象称作为外边距塌陷；
解决方案：

给父盒子添加overflow: hidden;
给父盒子添加一个边框；

6、在页面中查看盒子的大小

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>查看盒子大小</title><style>.d{width: 300px;height: 300px;background-color: aqua;border: 100px double limegreen;padding: 100px;margin-top: 100px;}</style></head><body><div class="d"></div></body>
</html>

在页面中按F12:

在html中很多标签（盒子）会自带内边距和外边距，在开发时需要去掉这些，所以在样式中首先书写：

margin：0；
padding: 0;

CSS设计中盒子模型的应用相关推荐

Web前端，CSS中盒子模型的组成，了解掌握盒子模型的边框、内边距、外边距
前言持续总结输出中,今天分享的是Web前端,CSS中盒子模型的组成,了解掌握盒子模型的边框.内边距.外边距 1.盒子模型的介绍盒子的概念页面中的每一个标签,都可看做是一个 "盒子&qu ...
CSS学习之盒子模型
1. 前言盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并不是盒子.这个很好理解,比如说,一张图片里并不能放东西,它自己就是自 ...
CSS Box Model 盒子模型
1. 介绍 1.1 什么是 Box Model 在HTML中的每个element(元素)都可以看作一个矩形的盒子,矩形从内到外依次由元素的内容(content).内边距(padding).边框(bor ...
标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)
转载自:http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html 盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们 ...
从奥运门票系统瘫痪到家乐福踩踏事件看软件设计中业务模型的处理
从奥运门票系统瘫痪到家乐福踩踏事件看软件设计中业务模型的处理作者:郭方明完成日期:2007-11-17 version 1.0 联系信箱:gfm.job@Gmail.com 注:转载文章,请注明作 ...
CSS系列：CSS中盒子模型
盒子模型是CSS控制页面时一个很重要的概念.所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间.可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小. 1. 盒子的内部结构在CSS中, ...
css中盒子模型的布局
目录一水平布局二垂直布局 css中的盒子模型布局分为两种:水平布局和垂直布局一水平布局盒子模型中水平方向影响因素有7个,分别是:margin-left border-left padd ...
css中盒子模型图片,CSS 盒子模型
盒子模型(Box Model) 一般的标签都是盒子,但是除了极个别的标签(例如:img.input标签)不是盒子盒子模型的属性 width 盒子内容的宽度 height 盒子内容的高度 margin ...
CSS中盒子模型、嵌套盒子中垂直外边距塌陷问题解决方案、标准盒模型、怪异盒模型
盒子模型(Box Model): 指把HTML页面中的元素看作是一个矩形的盒子,也称容器,这个盒子从内到外由:元素的内容(content).内边距(padding).边框(border).外边距(ma ...

CSS设计中盒子模型的应用