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
Model kotak (fokus CSS)
Tiga perkara utama dalam pembelajaran css: model kotak css, terapung, kedudukan
Tema idea:
Matlamat:
- Pemahaman:
- Dapat memberitahu empat bahagian model kotak
- Dapat memberitahu kandungan Peranan jidar dan kesannya pada kotak
- Boleh memberitahu maksud nilai tetapan pelapik yang berbeza
- Boleh memberitahu dua syarat yang diperlukan untuk penjajaran tengah blok -kotak peringkat
- Dapat memberitahu penyelesaian penggabungan jidar
- Aplikasi:
- Boleh menggunakan tulisan kompaun sempadan untuk menambah sempadan kepada elemen
- Boleh mengira kotak Saiz sebenar
- boleh menggunakan kotak modul susun atur model kotak
Model Kotak (Model Kotak)
Model kotak standard
3. Sempadan kotak (sempadan)
border : border-width || border-style || border-color
Salin selepas log masuk
Salin selepas log masuk
| 属性 |
作用 |
| border-width |
定义边框粗细，单位是px |
| border-style |
边框的样式 |
| border-color |
边框颜色 |
- Gaya sempadan:
- tiada: tiada sempadan bermakna mengabaikan lebar semua sempadan (nilai lalai)
- pepejal: sempadan ialah garis pepejal tunggal ( yang paling biasa digunakan)
- putus-putus: sempadan ialah garis putus-putus
- putus-putus: sempadan ialah garis putus-putus
3.1 Komprehensif tetapan sempadan
border : border-width || border-style || border-color
Salin selepas log masuk
Salin selepas log masuk
Contohnya:
border: 1px solid red; 没有顺序
Salin selepas log masuk
3.2 Jadual ringkasan kaedah penulisan sempadan kotak
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:宽度 样式 颜色; |
3.3 表格的细线边框
<style>
table {
width: 500px;
height: 300px;
border: 1px solid red;
}
td {
border: 1px solid red;
text-align: center;
}
table, td {
border-collapse: collapse; /*合并相邻边框*/
}</style>Salin selepas log masuk
4. 内边距（padding）
4.1 内边距：
padding属性用于设置内边距。 是指 边框与内容之间的距离。
4.2 设置
| 属性 |
作用 |
| padding-left |
左内边距 |
| padding-right |
右内边距 |
| padding-top |
上内边距 |
| padding-bottom |
下内边距 |
当我们给盒子指定padding值之后， 发生了2件事情：
内容和边框 有了距离，添加了内边距。
盒子会变大了。
注意： 后面跟几个数值表示的意思是不一样的。
我们分开写有点麻烦，我们可以不可以简写呢？
| 值的个数 |
表达意思 |
| 1个值 |
padding：上下左右内边距; |
| 2个值 |
padding: 上下内边距 左右内边距 ； |
| 3个值 |
padding：上内边距 左右内边距 下内边距； |
| 4个值 |
padding: 上内边距 右内边距 下内边距 左内边距 ； |
练一练：
请写出如下内边距：
- 要求盒子有一个左边内边距是 5像素
- 要求简写的形式写出 一个盒子上下是 25像素 左右是15像素。
- 要求简写的形式写出 一个盒子 上内边距是 12像素 下内边距是 0 左内边距是 25像素 右内边距是 10像素
4.4 内盒尺寸计算（元素实际大小）
- 盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框
4.5 内边距产生的问题
练一练
- 一个盒子宽度为100， padding为 10， 边框为5像素，问这个盒子实际的宽度的是（）
- 关于根据下列代码计算 盒子宽高下列说法正确的是（）
div {
width: 200px;
height: 200px;
border: 1px solid #000000;
border-top: 5px solid blue;
padding: 50px;
padding-left: 100px;
}Salin selepas log masuk
w 200 + 150 + 2 = 352
h 200 + 100 + 6 = 306
4.6 padding不影响盒子大小情况
如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。
5. 外边距（margin）
5.1 外边距
margin属性用于设置外边距。 margin就是控制盒子和盒子之间的距离
5.2 设置：
| 属性 |
作用 |
| margin-left |
左外边距 |
| margin-right |
右外边距 |
| margin-top |
上外边距 |
| margin-bottom |
下外边距 |
margin值的简写 （复合写法）代表意思 跟 padding 完全相同。
5.3 块级盒子水平居中
- 可以让一个块级盒子实现水平居中必须：
- 盒子必须指定了宽度（width）
- 然后就给左右的外边距都设置为auto，
实际工作中常用这种方式进行网页布局，示例代码如下：
.header{ width:960px; margin:0 auto;}Salin selepas log masuk
常见的写法，以下下三种都可以。
- margin-left: auto; margin-right: auto;
- margin: auto;
- margin: 0 auto;
5.4 文字居中和盒子居中区别
text-align: center; /* 文字 行内元素 行内块元素水平居中 */margin: 10px auto; /* 块级盒子水平居中 左右margin 改为 auto 就阔以了 上下margin都可以 */
Salin selepas log masuk
5.5 插入图片和背景图片区别
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 */
}Salin selepas log masuk
5.6 清除元素的默认内外边距(重要)
为了更灵活方便地控制网页中的元素，制作网页时，我们需要将元素的默认内外边距清除
代码：
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */}Salin selepas log masuk
注意：
- 行内元素为了照顾兼容性， 尽量只设置左右内外边距， 不要设置上下内外边距。
5.7 外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
(1). 相邻块元素垂直外边距的合并
- 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom
- 下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和
-
取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
解决方案：尽量给只给一个盒子添加margin值。
(2). 嵌套块元素垂直外边距的合并（塌陷）
- 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
- 父元素的上外边距会与子元素的上外边距发生合并
- 合并后的外边距为两者中的较大者
解决方案：
- 可以为父元素定义上边框。
- 可以为父元素定义上内边距
- 可以为父元素添加overflow:hidden。
还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题，后面咱们再总结。。。
6. 盒子模型布局稳定性
我们根据稳定性来分，建议如下：
按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。
width > padding > margin
Salin selepas log masuk
- 原因：
- margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。
- padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。
- width 没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做。
去掉列表默认的样式
无序和有序列表前面默认的列表样式，在不同浏览器显示效果不一样，而且也比较难看，所以，我们一般上来就直接去掉这些列表样式就行了。 代码如下
li { list-style: none; }Salin selepas log masuk
今日总结
拓展@
以下我们讲的CSS3部分新属性， 但是我们遵循的原则是，以下内容，不会影响我们页面布局， 只是样式更好看了而已。
1.圆角边框(CSS3)
border-radius:length;
Salin selepas log masuk
其中每一个值可以为 数值或百分比的形式。
-
技巧： 让一个正方形 变成圆圈
border-radius: 50%;
Salin selepas log masuk
- 以上效果图矩形的圆角， 就不要用 百分比了，因为百分比会是表示高度和宽度的一半。
- 而我们这里矩形就只用 用 高度的一半就好了。精确单位。
2. 盒子阴影(CSS3)
box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；
Salin selepas log masuk
- 前两个属性是必须写的。其余的可以省略。
- 外阴影 (outset) 是默认的 但是不能写 想要内阴影可以写 inset
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);
}Salin selepas log masuk
CSS书写规范
开始就形成良好的书写规范，是你专业的开始。
空格规范
【强制】 选择器 与 { 之间必须包含空格。
示例：
.selector {}Salin selepas log masuk
【强制】 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。
示例：
font-size: 12px;
Salin selepas log masuk
选择器规范
【强制】 并集选择器，每个选择器声明必须独占一行。
示例：
/* good */
.post,
.page,
.comment {
line-height: 1.5;
}
/* bad */
.post, .page, .comment {
line-height: 1.5;
}Salin selepas log masuk
【建议】 一般情况情况下，选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。
示例：
/* good */
#username input {}
.comment .avatar {}
/* bad */
.page .header .login input {}
.comment div * {}Salin selepas log masuk
属性规范
【强制】 属性定义必须另起一行。
示例：
/* good */.selector {
margin: 0;
padding: 0;}/* bad */.selector { margin: 0; padding: 0; }Salin selepas log masuk
【强制】 属性定义后必须以分号结尾。
示例：
/* good */.selector {
margin: 0;}/* bad */.selector {
margin: 0}Salin selepas log masuk
（学习视频分享：css视频教程、html视频教程）
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)
