Web前端开发笔记——第三章 CSS语言 第五节 盒子模型
目录
- 一、CSS布局与定位
- 二、盒子模型
- 三、盒子模型的组成
- 四、设置边框的属性
- 五、设置外、内边距的属性
- 六、overflow 属性
- 结语
一、CSS布局与定位
在CSS中对一个网页进行布局与定位，首先通过盒子模型，即页面元素的大小、边框、各元素之间的间距将布局进行设计元素，然后通过定位，即文档流、浮动定位、层定位来决定盒子模型的位置，且盒子是可以嵌套的。
二、盒子模型
简单的来说盒子模型它可以是一个区域、图片、列表、导航栏等等，都可以称作盒子，即HTML元素都可以称作为盒子。
可以通过下图来简单了解一下盒子模型，以下是一个网页页面当按下F12后的html源码，我们可以看到布局中的盒模型：
三、盒子模型的组成
盒子模型以四个部分组成，可以以几个不同大小的矩形内嵌为例，从外到内依次分别是外边距（Margin）、边框（Border）、内边距（Padding，也可以叫做填充）、内容（Content），其中内容的空间由height属性和width属性设定。
例如，下列代码，设置一个div区域，设置内容的空间宽度为250px、高度为200px，边框大小为20px，且为实体天蓝色，内边距大小为20px，外边距大小为20px：
css代码：
div {width: 250px;height: 200px;border: 20px solid skyblue;padding: 20px;margin: 20px;
}html代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="../CSS/new_file.css" /></head><body><div>内容</div></body></html>运行结果如下：
我们可以发现其实该盒子模型的实际宽度（高度）=内容宽度（高度）+两边内边距（padding）+两边边框（border）+两边外边距（margin）。
例如上图的：
div {width: 250px;height: 200px;border: 20px solid skyblue;padding: 20px;margin: 20px;
}该盒子模型的实际宽度=内容宽度（width：250px）+两边内边距（左侧内边距padding-left：20px+右侧内边距padding-right：20px）+两边边框（左边框border-left：20px+右边框border-right：20px）+两边外边距（左侧外边距padding-left：20px+右侧外边距padding-right：20px）=370px；
该盒子模型的实际高度=内容高度（height：200px）+两边内边距（上侧内边距padding-top：20px+下侧内边距padding-bottom：20px）+两边边框（上边框border-top：20px+下边框border-bottom：20px）+两边外边距（上侧外边距padding-top：20px+下侧外边距padding-bottom：20px）=320px。
四、设置边框的属性
通过对border属性进行设置，可以改变边框的大小、颜色等等。
border-width:属性设置边框的宽度，后跟像素px或thick（粗）、medium（中，即默认值）、thin（细）。
border-style:属性设置边框的样式，它默认值是none，后跟solid时表示实线边框；后跟dashed时表示虚线边框；后跟dotted时表示点线边框；后跟double时表示定义两个边框，其中两个边框的宽度取值取决于border-width的值；后跟inset或outset属性，表示设置3D嵌入或3D突出边框，其取决于border-color边框的颜色；后跟ridge或groove，表示设置3D脊边框或3D槽边框，其也是取决于border-color边框的颜色。
border-color:属性设置边框的颜色，这里要注意如果只设置border-color:改变边框颜色是不起作用的，前提是要设置了border-style:边框样式。
也可以直接通过border:属性在一个属性中设置边框的属性，即同时设置border-width属性、border-style属性和border-color属性，例如：border: 2px dashed red;
例如，下列代码，设置盒子模型的边框属性为虚线红色且宽度为2px：
css代码：
#first {width: 150px;height: 200px;border: 2px dashed red;padding: 20px;margin: 20px;
}
html代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="../CSS/new_file.css" /></head><body><div id="first"><p>计算机（computer）俗称电脑，是现代一种用于高速计算的电子计算机器。</p></div></body></html>运行结果如下：
且也可以在css中附加以下代码，对边框的上边框、下边框或左右边框进行设置，即单独设置各边属性。如下，设置边框的上边框、下边框为2px，且为实体蓝色：
border-top: 2px solid blue;border-bottom: 2px solid blue;运行结果如下：
五、设置外、内边距的属性
可以通过不同方向（top、bottom、right、left）来设置外、内边距不同面的边距，在设置margin属性值时，依次是按top、bottom、right、left的顺序来设置的，也可以设置三个值，中间的值是左右边距，左右即是上边距和下边距；可以设置两个值，即表示上下边距、左右边距。
#first {width: 150px;height: 200px;border: 2px dashed red;padding: 20px;margin: 20px 10px 20px 15px;
}
当有两个盒子模型合并时，margin属性垂直方向合并（即垂直方向像素大的即为合并结果），而水平方向不合并。且当设置div区域，若想让该区域水平居中，可设置margin属性margin:0 auto使该区域达到效果。
例如，下列代码：
css代码：
#first {text-align: left;font-size: 0;
}#first img {width: 100px;height: 100px;border: 2px dashed skyblue;padding: 5px;margin-left: 2px;
}html代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="../CSS/new_file.css" /></head><body><div id="first"><img src="../image/mountain.jpg"><img src="../image/酒柜.png"></div></body></html>运行结果如下：
六、overflow 属性
当盒子模型的内容溢出盒子时，通过overflow 属性可以设置处理方式，它分为以下五种：
当 overflow: visible时，溢出内容会显示在盒子模型以外，这也是默认情况，即不设置overflow 属性时的默认值。
当 overflow: hidden时，溢出内容会被修剪，即内容被修剪掉。
当 overflow: auto时，如果内容被修剪，溢出内容会以滚动条的方式来查看溢出的内容。
当 overflow: scroll时，溢出内容会以滚动条的方式来查看溢出的内容，若内容没有溢出，滚动条仍然可见，但无法滚动，即它是始终显示滚动条的。
当 overflow: inherit时，继承父元素overflow属性的值。
例如，下列代码，设置盒子模型的属性overflow: visible，使溢出内容显示在模型以外：
css代码：
div {width: 150px;height: 200px;border: 20px;padding: 20px;margin: 20px;background-color: aquamarine;
}html代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="../CSS/new_file.css" /></head><body><div><p>计算机（computer）俗称电脑，是现代一种用于高速计算的电子计算机器，可以进行数值计算，又可以进行逻辑计算，还具有存储记忆功能。是能够按照程序运行，自动、高速处理海量数据的现代化智能电子设备。</p></div></body></html>
运行结果如下，可以看到内容是溢出的：
要区分当overflow: auto属性和overflow: scroll属性的不同情况，overflow: scroll属性的滚动条是始终显示的，与内容无关。
例如下列代码，可以看出auto属性和scroll属性的区别：
css代码：
#first {width: 150px;height: 200px;border: 20px;padding: 20px;margin: 20px;background-color: aquamarine;overflow: scroll;
}#second {width: 100px;height: 150px;border: 20px;padding: 20px;margin: 20px;background-color: aquamarine;overflow: auto;
}html代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="../CSS/new_file.css" /></head><body><div id="first"><p>计算机（computer）俗称电脑，是现代一种用于高速计算的电子计算机器。</p></div><br /><div id="second"><p>由硬件系统和软件系统所组成，没有安装任何软件的计算机称为裸机。可分为超级计算机、工业控制计算机、网络计算机、个人计算机、嵌入式计算机五类，较先进的计算机有生物计算机、光子计算机、量子计算机等。</p></div></body></html>运行结果如下，我们发现区域first的内容并未溢出，也显示了滚动条，但滚动条不能使用；区域second的内容溢出，通过设置auto属性，可以支持滚动查看修剪内容。：
结语
以上就是全部内容，篇幅较长，感谢您的阅读和支持，若有表述或代码中有不当之处，望指出！您的指出和建议能给作者带来很大的动力！！！
Web前端开发笔记——第三章 CSS语言 第五节 盒子模型相关推荐
- Web前端开发笔记——第三章 CSS语言 第四节 CSS列表、表格样式
目录 一.CSS列表样式 (一)设计列表项前标志类型 (二)设计列表项前标志位置 (三)设计列表项图片 (四)设计整体列表属性 二.CSS表格样式 (一)设计表格大小 (二)设计表格边框 (三)奇偶选 ...
- Web前端开发笔记——第三章 CSS语言 第六节 CSS定位
目录 一.定义 二.文档流定位 (一)block类型元素 (二)inline类型元素 (三)inline-block类型元素 三.浮动定位 (一)左浮动和右浮动 (二)清除浮动 四.层定位 (一)st ...
- Web前端开发笔记——第三章 CSS语言 第七节 圆角边框、阴影
目录 前言 一.圆角边框 (一)border-×-×-radius (二)border-radius 二.阴影 (一)基本阴影设置 (二)内部阴影设置 结语 前言 本节介绍仅在CSS3中的新内容,例如 ...
- Web前端开发笔记——第三章 CSS语言 第一节 CSS的基本概念和样式表
目录 一.CSS和HTML 二.CSS的基本语法格式 三.CSS样式设置 (一)行内样式 (二)内嵌样式 (三)引用外部CSS文件 四.多重样式优先级 结语 一.CSS和HTML CSS,又称为层叠样 ...
- Web前端开发笔记——第三章 CSS语言 第三节 文本、字体、背景、超链接样式属性
目录 一.CSS文本属性 二.CSS字体属性 (一)常用文本字体样式属性 (二)设置整体font属性 三.CSS背景属性 (一)背景颜色 (二)背景图片 (三)图片平铺方式 (四)图片位置 (五)设置 ...
- Web前端开发笔记——第三章 CSS语言 第八节 CSS3文本文字设置
目录 前言 一.文本阴影 二.强制换行 三.字体设置 结语 前言 本节中的仅支持CSS3中的新语法,比如文字的阴影.长文本的换行等等. 一.文本阴影 通过定义text-shadow来对文本进行阴影设置 ...
- Web前端开发笔记——第三章 CSS语言 第二节 CSS选择器
目录 前言 一.CSS选择器 (一)标签选择器 (二)id选择器 (三)类别选择器 二.针对标签的选择器嵌套 三.集体声明和全局声明 (一)集体声明 (二)全局声明 结语 前言 CSS代码由选择器和一 ...
- Web前端开发笔记——第四章 JavaScript程序设计 第五节 数组
目录 一.数组的创建 (一)Array()构造函数 (二)字面量方法 二.数组元素的读写和遍历 三.添加和删除数组元素 (一)添加数组元素 (二)删除数组元素 (三)splice()方法 四.二维数组 ...
- Web前端开发笔记——第四章 JavaScript程序设计 第四节 条件语句和循环语句
目录 一.if条件语句 二.while循环语句 (一)while()语句 (二)do--while语句 三.for循环语句 四.switch语句 五.break语句和continue语句 一.if条件 ...
最新文章
- 9、MySQL中SQL语句的大小写规则
- mysql 乘法拼接字符串_【原创】利用MySQL 的GROUP_CONCAT函数实现聚合乘法
- JS-循环清空对象 判断数据类型的5种常用方法
- SAP Spartacus 里的三种table类型
- Excel 工作表，单元格破解密码宏
- ISAPI_Rewrite伪静态配置
- 转 ：原码，反码，补码
- 玩转JMETER参数化
- 一个好的销售团队需具备的4个特点
- 房友系统服务器地址,房友系统的那些功能，你都知道吗？
- 基于JAVA高校信息资源共享平台计算机毕业设计源码+系统+mysql数据库+lw文档+部署
- 中科大一所学校撑起中国人工智能半壁江山
- 看完电影《门锁》感觉脊背发凉，智慧园区带来安全感
- 【Netty - 解码器】did not read anything but decoded a message 异常
- 红楼梦人物分词及可视化
- python 编写仓库管理程序
- Anaconda命令整理
- 常用的华为路由器命令
- 控制面板有u盘显示，可是计算机不显示u盘符
- 【车载】ESP/ESC/DSC车身稳定系统