AI大模型全栈开发|前端基础：CSS盒模型
CSS盒模型课程前言Course Introduction...
CSS盒模型
课程前言Course Introduction同学们，在网页设计与开发的精彩世界里，CSS 盒模型无疑是构建精美页面的核心基石之一。掌握 CSS 盒模型，意味着你能随心所欲地安排页面元素的位置，精确控制它们的大小，实现从简约现代到复古华丽等各类风格的设计构想。本课程将带你深入探索盒模型的奥秘。一盒子模型（CSS重点）
CodingFuture
1.1看透网页布局的本质
网页布局的本质是先利用CSS设置好盒子的大小和位置，再将文字、图片等元素放入盒子中。1.2盒子模型（Box Model）
盒子模型由元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。盒子是盛装内容的容器，其内容区域是放置文字和图片等元素的地方，边框是盒子的厚度，内边距是内容与边框的距离，外边距是盒子与盒子之间的距离。二边框（border）
CodingFuture
边框的语法为：border:border-width || border-style || border-color属性作用border-width定义边框粗细，单位是pxborder-style边框的样式border-color边框颜色边框的样式：none：没有边框即忽略所有边框的宽度（默认值）solid：边框为单实线(*为常用的)dashed：边框为虚线 dotted：边框为点线div { width: 200px; height: 200px; background-color: red; border-width: 10px; border-style: solid; border-color: green; }2.1边框简写
border:border-width border-style border-color例如：border:1px solid red; 没有顺序2.2盒子边框写法总结表
很多情况下，我们不需要指定4个边框，我们是可以单独给4个边框分别指定的。上边框下边框左边框右边框border-top-style:样式;border-bottom-style:样式;border-left-style:样式;border-right-style:样式;border-top-width:宽度;border- bottom-width:宽度;border-left-width:宽度;border-right-width:宽度;border-top-color:颜色;border- bottom-color:颜色;border-left-color:颜色;border-right-color:颜色;border-top:宽度 样式 颜色;border-bottom:宽度 样式 颜色;border-left:宽度 样式 颜色;border-right:宽度 样式 颜色;注意:当盒子添加外边框之后，会变大，给容器的宽和高是给内容设置的。2.3圆角边框(CSS3)语法：其中每一个值可以为数值或百分比的形式。 border-radius:length; /* border-radius: 50%; */<head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 100px; height: 100px; background-color: red; /* border-radius: 50px; */ border-radius: 50%; } </style></head><body> <div class="box"></div></body></html>三内边距（padding）
CodingFuture
3.1内边距设置
padding属性用于设置内边距，即边框与内容之间的距离包括：padding-left（左内边距）padding-right（右内边距）padding-top（上内边距）padding-bottom（下内边距）<head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 400px; height: 400px; background-color: red; border-top: 20px solid orange; border-left: 20px solid blue; border-bottom: 20px solid green; border-right: 20px solid rebeccapurple; font-size: 40px; /* 内边距距顶部30像素 */ padding-top: 30px; /* 内边距距右部30像素 */ padding-right: 40px; /* 内边距距底部30像素 */ padding-bottom: 40px; /* 内边距距左部30像素 */ padding-left: 40px; } </style></head><body> <div class="box">我就是一个内边距盒子啊</div></body></html>设置内边距时，值的个数不同表达的意思也不同：1个值表示上下左右内边距相同2个值表示上下内边距和左右内边距分别相同3个值表示上内边距、左右内边距、下内边距4个值分别表示上、右、下、左内边距设置内边距后，内容和边框会有距离，且盒子会变大。<head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 400px; height: 400px; background-color: red; border-top: 20px solid orange; border-left: 20px solid blue; border-bottom: 20px solid green; border-right: 20px solid rebeccapurple; /* 上下左右内边距都是40px */ padding: 40px; /* 上下40px 左右50px */ padding: 40px 50px; /* 上40px 右50px 下60px 左边也是50px*/ padding: 40px 50px 60px; /* 上40px 右50px 下60px 左70px */ padding: 40px 50px 60px 70px; } </style></head><body> <div class="box"></div></body></html>3.2内盒尺寸计算（元素实际大小）
内盒尺寸计算：盒子的实际大小 = 内容的宽度和高度 + 内边距 + 边框。四外边距（margin）
CodingFuture
4.1外边距设置
margin属性用于设置外边距，控制盒子和盒子之间的距离。
包括：margin-left（左外边距）margin-right（右外边距）margin-top（上外边距）margin-bottom（下外边距）外边距的简写方式与padding类似，值的个数不同表达的意思也不同。4.2块级盒子水平居中
可以让一个块级盒子实现水平居中必须：盒子必须指定了宽度（width）然后就给左右的外边距都设置为auto，.box{ width:960px; margin: 0 auto;}注意：要居中的盒子必须是块标签盒子必须有宽度4.3文字居中和盒子居中区别
text-align: center; /* 文字 行内元素 行内块元素水平居中 */margin: 0 auto; /* 块级盒子水平居中 左右margin 改为 auto 就可以了 上下margin都可以 */4.4清除元素的默认内外边距(重要)为了更灵活方便地控制网页中的元素，制作网页时，我们需要将元素的默认内外边距清除* { padding:0; /* 清除内边距 */ margin:0; /* 清除外边距 */}注意：行内元素为了照顾兼容性， 尽量只设置左右内外边距， 不要设置上下内外边距。4.5外边距合并使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。(1).垂直外边距(相邻块元素垂直外边距的合并)当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和取两个值中的较大者这种现象被称为相邻块元素的垂直外边距的合并（也称外边距塌陷）。
解决方案：尽量给只给一个盒子添加margin值。(2). 嵌套块元素垂直外边距的合并（塌陷）对于两个嵌套关系的块元素，如果父元素没有上内边距及边框父元素的上外边距会与子元素的上外边距发生合并
解决方案：可以为父元素定义上边框。可以为父元素定义上内边距可以为父元素添加overflow:hidden。五CSS书写规范
CodingFuture
5.1空格规范
空格规范：选择器与【{】之间必须包含空格；属性名与【:】之间不允许包含空格，【:】与属性值之间必须包含空格。5.2选择器规范
选择器规范：并集选择器每个选择器声明必须独占一行；一般情况下选择器的嵌套层级应不大于3级，位置靠后的限定条件应尽可能精确。5.3属性规范
属性规范：属性定义必须另起一行，且定义后必须以分号结尾。
结言陈词Closing statement通过这堂课，大家已经掌握了如何利用CSS设置盒子的大小、位置，以及如何通过内边距、外边距等属性实现网页元素的精确定位与布局。希望大家在今后的学习中，能够继续深入研究CSS的更多特性。下期课程预告：CSS浮动码上未来为同学们安排统一答疑扫码添加微信领取详细课程大纲
微信号:CodingFuture2020
The CodingFuture&The Future is Already Here<<< END >>>
