Artikel ini membawakan anda pengetahuan yang berkaitan tentang css Ia memperkenalkan kepada anda isu berkaitan tentang hubungan antara saiz kotak dan jidar dan sempadan dalam dan luar. Tiga perkara utama pembelajaran css ialah Model kotak css , terapung, kedudukan, mari kita lihat bersama-sama, saya harap ia akan membantu semua orang.
(Belajar perkongsian video: tutorial video css, tutorial video html)
3-11 kotak Hubungan antara saiz dan jidar dan sempadan dalam dan luar
Tiga perkara utama dalam pembelajaran css: model kotak css, terapung, kedudukan
Tema idea: 
Matlamat:
Model kotak yang dipanggil:
Model kotak standard
border : border-width || border-style || border-color
| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细，单位是px |
| border-style | 边框的样式 |
| border-color | 边框颜色 |
border : border-width || border-style || border-color
Contohnya:
border: 1px solid red; 没有顺序
Dalam banyak kes, kita tidak perlu menentukan 4 sempadan. Kita boleh menentukan 4 sempadan secara berasingan.
| 上边框 | 下边框 | 左边框 | 右边框 |
|---|---|---|---|
| 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:宽度 样式 颜色; |
通过表格的cellspacing="0",将单元格与单元格之间的距离设置为0，
但是两个单元格之间的边框会出现重叠，从而使边框变粗
通过css属性：
table{ border-collapse:collapse; }<style>
table {
width: 500px;
height: 300px;
border: 1px solid red;
}
td {
border: 1px solid red;
text-align: center;
}
table, td {
border-collapse: collapse; /*合并相邻边框*/
}</style>
padding属性用于设置内边距。 是指 边框与内容之间的距离。
| 属性 | 作用 |
|---|---|
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
当我们给盒子指定padding值之后， 发生了2件事情：
内容和边框 有了距离，添加了内边距。
盒子会变大了。
注意： 后面跟几个数值表示的意思是不一样的。
我们分开写有点麻烦，我们可以不可以简写呢？
| 值的个数 | 表达意思 |
|---|---|
| 1个值 | padding：上下左右内边距; |
| 2个值 | padding: 上下内边距 左右内边距 ； |
| 3个值 | padding：上内边距 左右内边距 下内边距； |
| 4个值 | padding: 上内边距 右内边距 下内边距 左内边距 ； |
练一练：
请写出如下内边距：
问题
会撑大原来的盒子
解决：
通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小
练一练
130
100 + 20 + 10
div {
width: 200px;
height: 200px;
border: 1px solid #000000;
border-top: 5px solid blue;
padding: 50px;
padding-left: 100px;
}w 200 + 150 + 2 = 352
h 200 + 100 + 6 = 306
如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。
margin属性用于设置外边距。 margin就是控制盒子和盒子之间的距离
| 属性 | 作用 |
|---|---|
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
margin值的简写 （复合写法）代表意思 跟 padding 完全相同。
实际工作中常用这种方式进行网页布局，示例代码如下：
.header{ width:960px; margin:0 auto;}常见的写法，以下下三种都可以。
盒子内的文字水平居中是 text-align: center, 而且还可以让 行内元素和行内块居中对齐
块级盒子水平居中 左右margin 改为 auto
text-align: center; /* 文字 行内元素 行内块元素水平居中 */margin: 10px auto; /* 块级盒子水平居中 左右margin 改为 auto 就阔以了 上下margin都可以 */
插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin
背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position
img {
width: 200px;/* 插入图片更改大小 width 和 height */
height: 210px;
margin-top: 30px; /* 插入图片更改位置 可以用margin 或padding 盒模型 */
margin-left: 50px; /* 插入当图片也是一个盒子 */
}
div {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
background-position: 30px 50px; /* 背景图片更改位置 我用 background-position */
}
为了更灵活方便地控制网页中的元素，制作网页时，我们需要将元素的默认内外边距清除
代码：
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */}注意：
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
解决方案：尽量给只给一个盒子添加margin值。
解决方案：
还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题，后面咱们再总结。。。
学习完盒子模型，内边距和外边距，什么情况下用内边距，什么情况下用外边距？
我们根据稳定性来分，建议如下：
按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。
width > padding > margin
无序和有序列表前面默认的列表样式，在不同浏览器显示效果不一样，而且也比较难看，所以，我们一般上来就直接去掉这些列表样式就行了。 代码如下
li { list-style: none; }
以下我们讲的CSS3部分新属性， 但是我们遵循的原则是，以下内容，不会影响我们页面布局， 只是样式更好看了而已。
border-radius:length;
其中每一个值可以为 数值或百分比的形式。
技巧： 让一个正方形 变成圆圈
border-radius: 50%;
box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；
div {
width: 200px;
height: 200px;
border: 10px solid red;
/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); */
/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色 内/外阴影； */
box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
}开始就形成良好的书写规范，是你专业的开始。
【强制】 选择器 与 { 之间必须包含空格。
示例：
.selector {}【强制】 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。
示例：
font-size: 12px;
【强制】 并集选择器，每个选择器声明必须独占一行。
示例：
/* good */
.post,
.page,
.comment {
line-height: 1.5;
}
/* bad */
.post, .page, .comment {
line-height: 1.5;
}【建议】 一般情况情况下，选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。
示例：
/* good */
#username input {}
.comment .avatar {}
/* bad */
.page .header .login input {}
.comment div * {}【强制】 属性定义必须另起一行。
示例：
/* good */.selector {
margin: 0;
padding: 0;}/* bad */.selector { margin: 0; padding: 0; }【强制】 属性定义后必须以分号结尾。
示例：
/* good */.selector {
margin: 0;}/* bad */.selector {
margin: 0}Atas ialah kandungan terperinci Mari kita bincangkan tentang hubungan antara saiz kotak CSS, jidar dan sempadan dalam dan luar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
