Dieser Artikel vermittelt Ihnen relevantes Wissen über CSS. Er führt Sie in die damit verbundenen Probleme über die Beziehung zwischen Boxgröße und inneren und äußeren Rändern und Rändern ein. Die drei Schlüsselpunkte des CSS-Lernens sind CSS-Boxmodell, Floating und Positionierung Schauen Sie es sich gemeinsam an, ich hoffe, es wird für alle hilfreich sein.
(Teilen von Lernvideos: CSS-Video-Tutorial, HTML-Video-Tutorial)
3-11 Die Beziehung zwischen Boxgröße und inneren und äußeren Rändern und Rändern
css Drei große Punkte lernen: CSS-Boxmodell, Floating, Positionierung
Themenidee: 
Ziel:
Rahmenbreite
Definieren Sie die Rahmenstärke, die Einheit ist px
| Randfarbe | |
|---|---|
| keine: Es gibt keinen Rand und die Breite aller Ränder wird ignoriert (Standardwert) | solid: Der Rand ist eine einzelne durchgezogene Linie (am häufigsten verwendet) |
| gepunktet: Der Rand ist eine gepunktete Linie | |
border : border-width || border-style || border-color Nach dem Login kopieren Nach dem Login kopieren | Zum Beispiel: border : border-width || border-style || border-color Nach dem Login kopieren Nach dem Login kopieren | 3.2 Übersichtstabelle der Methoden zum Schreiben von Rahmenrändern
| border-top-width:width; | border-bottom-width:width; | border-left-width:width; | border-right -width:width; | ||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| border-bottom-color:color; | border-left-color:color; | border-right-color:color; | |||||||||||||||||||||||||||||
| Rand links: Farbe des Breitenstils; | Rand rechts: Farbe des Breitenstils;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>Nach dem Login kopieren
4. 内边距（padding）4.1 内边距：padding属性用于设置内边距。 是指 边框与内容之间的距离。 4.2 设置
当我们给盒子指定padding值之后， 发生了2件事情：
注意： 后面跟几个数值表示的意思是不一样的。 我们分开写有点麻烦，我们可以不可以简写呢？
练一练： 请写出如下内边距：
4.4 内盒尺寸计算（元素实际大小）
4.5 内边距产生的问题
练一练
div {
width: 200px;
height: 200px;
border: 1px solid #000000;
border-top: 5px solid blue;
padding: 50px;
padding-left: 100px;
}Nach dem Login kopieren
w 200 + 150 + 2 = 352 h 200 + 100 + 6 = 306 4.6 padding不影响盒子大小情况
5. 外边距（margin）5.1 外边距margin属性用于设置外边距。 margin就是控制盒子和盒子之间的距离 5.2 设置：
margin值的简写 （复合写法）代表意思 跟 padding 完全相同。 5.3 块级盒子水平居中
实际工作中常用这种方式进行网页布局，示例代码如下： .header{ width:960px; margin:0 auto;}Nach dem Login kopieren 常见的写法，以下下三种都可以。
5.4 文字居中和盒子居中区别
text-align: center; /* 文字 行内元素 行内块元素水平居中 */margin: 10px auto; /* 块级盒子水平居中 左右margin 改为 auto 就阔以了 上下margin都可以 */ Nach dem Login kopieren 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 */
}Nach dem Login kopieren 5.6 清除元素的默认内外边距(重要)
为了更灵活方便地控制网页中的元素，制作网页时，我们需要将元素的默认内外边距清除 代码： * {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */}Nach dem Login kopieren 注意：
5.7 外边距合并使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。 (1). 相邻块元素垂直外边距的合并
解决方案：尽量给只给一个盒子添加margin值。 (2). 嵌套块元素垂直外边距的合并（塌陷）
解决方案：
还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题，后面咱们再总结。。。 6. 盒子模型布局稳定性
我们根据稳定性来分，建议如下： 按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。 width > padding > margin Nach dem Login kopieren
去掉列表默认的样式无序和有序列表前面默认的列表样式，在不同浏览器显示效果不一样，而且也比较难看，所以，我们一般上来就直接去掉这些列表样式就行了。 代码如下 li { list-style: none; }Nach dem Login kopieren 今日总结
拓展@以下我们讲的CSS3部分新属性， 但是我们遵循的原则是，以下内容，不会影响我们页面布局， 只是样式更好看了而已。 1.圆角边框(CSS3)
border-radius:length; Nach dem Login kopieren
2. 盒子阴影(CSS3)
box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影； Nach dem Login kopieren
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);
}Nach dem Login kopieren CSS书写规范开始就形成良好的书写规范，是你专业的开始。 空格规范【强制】 选择器 与 { 之间必须包含空格。 示例： .selector {}Nach dem Login kopieren 【强制】 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。 示例： font-size: 12px; Nach dem Login kopieren 选择器规范【强制】 并集选择器，每个选择器声明必须独占一行。 示例： /* good */
.post,
.page,
.comment {
line-height: 1.5;
}
/* bad */
.post, .page, .comment {
line-height: 1.5;
}Nach dem Login kopieren 【建议】 一般情况情况下，选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。 示例： /* good */
#username input {}
.comment .avatar {}
/* bad */
.page .header .login input {}
.comment div * {}Nach dem Login kopieren 属性规范【强制】 属性定义必须另起一行。 示例： /* good */.selector {
margin: 0;
padding: 0;}/* bad */.selector { margin: 0; padding: 0; }Nach dem Login kopieren 【强制】 属性定义后必须以分号结尾。 示例： /* good */.selector {
margin: 0;}/* bad */.selector {
margin: 0}Nach dem Login kopieren |
Das obige ist der detaillierte Inhalt vonLassen Sie uns über die Beziehung zwischen der Größe der CSS-Box, den inneren und äußeren Rändern und Rändern sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
