Heim >Web-Frontend >CSS-Tutorial >Box-Modell CSS3-Lerngrenze (Grenze)
Box-Modell CSS3-Lerngrenze (Grenze)
- 云罗郡主nach vorne
- 2018-10-12 13:51:402407Durchsuche
Der Inhalt dieses Artikels befasst sich mit der CSS3-Lerngrenze des Box-Modells. Ich hoffe, dass er für Freunde hilfreich ist.
Box-Modell Rand
Randbezogene Attribute
Rahmenbreite Kontrollieren Sie die Größe des RahmensWeisen Sie einen Wert zu Länge
border-style Kontrollieren Sie den Stil des Rahmensnone Keine Grenzendurchgezogen Durchgezogene Linie gepunktet gepunktetgestrichelt gepunktetdoppelt Doppelte Linie
Randfarbe Kontrollieren Sie die Farbe des RandesVier Farbdarstellungen
Rand oben Steuern Sie den oberen Randstil
Rand rechts Kontrollieren Sie den Stil des rechten Randes
Rand -bottom Kontrollieren Sie den Stil des unteren Rands
border-left Kontrollieren Sie den Stil des linken Rands
Tatsächlich sind die vier Kanten auch zusammengesetzte Attribute:
Border-top kann in mehrere Attribute unterteilt werden: border-top -color border-top-width border-top-style (Die restlichen drei Seiten usw.)
Border fortlaufendes Schreiben
Theoretisch: Keine Reihenfolge, kann weggelassen werden
Fall: Tischrand, vierfarbiges Feld, Formrand
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table {
width: 800px;
height: 300px;
border: 1px solid #000;
border-collapse: collapse;/*去掉边框：细线*/
}
th,td {
border: 1px solid #000;
}
</style></head><body>
<table>
<caption><h3>今日小说排行榜</h3></caption>
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr >
<td >1</td>
<td >鬼吹灯</td>
<td ><img src="img/up.jpg" width="13" height="11" /></td>
<td >65589</td>
<td >45</td>
<td ><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>2</td>
<td>盗墓笔记</td>
<td><img src="img/down.jpg" width="13" height="11" /></td>
<td>1</td>
<td>456</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
</tbody></table></body></html>
Document
>
Padding: Kontrollieren Sie den Abstand zwischen Inhalt und RandPadding
Attribut und Padding
Kontinuierliches Schreiben Polsterung-oben Polsterung-oben
Polsterung-rechts Polsterung- rechtsPolsterung unten Polsterung untenPolsterung links linke Polsterung 四种连写 1 只写一个值 padding : 10px; 代表四个方向都是第一个数字 2 写两个 padding : 10px 20px; 表示：上下内边距等于第一个数字，左右内边距等于第二个数字 3 写三个 padding: 10px 20px 30px; 表示：上内边距=第一个数字，左右内边距等于第二个数字，下内边距等于第三个数字 4 写四个 padding: 10px 20px 30px 40px; 表示：上右下左分别对应各个数字 padding和border对盒子的影响 设置padding和border会对盒子的实际大小造成影响 盒子的实际宽度 = 设置在css里的宽度 + 水平的paddding + 水平的border 盒子的实际高度 = 设置的高度 + 垂直的padding + 垂直的border 但是是要注意： 如果是存在父子关系的时候 如果子盒子没有设置宽度，并且子盒子的padding+border没有超过父盒子的宽度，子盒子的宽度是不会改变的 如果子盒子的padding+border超过父盒子的宽度，会被padding和border撑开宽度 案例： padding的作用、padding计算题 盒子模型之margin 外边距属性和外边距连写 margin-top 控制盒子的上外边距 margin-right 控制盒子的右外边距 margin-bottom 控制盒子的下外边距 margin-left 控制盒子的左外边距 margin的连写和padding是一样的 垂直塌陷(合并)现象 当两个盒子垂直分布，同时给两个盒子设置了相对的margin值，两个盒子之间的实际距离，取决于连个margin值中的最大 包含塌陷(合并)现象 当给子盒子设置margin-top的时候，有可能会把父盒子一起带跑 如何解决： 1 、给父盒子设置边框 2、给父盒子设置overflow：hidden 案例：列表显示 给行内元素设置margin和padding的问题 给行内元素设置margin-top和margin-bottom没有效果 给行内元素设置垂直padding的时候，能够增加高度，位置不会依赖于padding撑开的位置 以后给行内元素控制位置，不要用垂直的padding和margin 我们通常使用行高控制行内元素的垂直位置 margin：0 auto；的秘密 margin-left和maring-right同时是auto的时候，会让子元素（块级）居中显示 能将设置了宽度的块级元素相对于其父元素水平居中 通常会使用它来将页面的版心居中 将行内元素和行内块级元素居中 给容器设置text-align：center
以上就是对盒子模型之CSS3学习之边框(Border) 的全部介绍，如果您想了解更多有关CSS3视频教程，请关注PHP中文网。<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
border: 1px solid #000;
width: 500px;
height: 500px;
padding: 10px;
}
</style></head><body>
<p>
我是盒子中的内容 </p></body></html>
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*问题：大盒子宽为500px，高为300px，
在大盒子正中心有一个小盒子
小盒子宽为300px，高为150px，
请用padding将结构写出来 */
.father {
width: 300px;
height: 150px;
padding: 75px 100px;
background-color: red;
}
.son {
width: 300px;
height: 150px;
background-color: green;
}
</style></head><body>
<p class="father">
<p class="son"></p>
</p></body></html>
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<style>
ul{
list-style:none;
}
ul li{
background:url(li.gif) no-repeat left 4px;
padding-left: 25px;
}
li a{
text-decoration: none;
}
a:hover{
color: #9E7878;
text-decoration: underline;
}
</style>
</head>
<body>
<ul>
<li><a href="#">大明星:姜潮魔性拜年道晚安</a></li>
<li><a href="#">软萌正太徐浩演绎《小幸运》</a></li>
<li><a href="#">漫威绝逼好看的电影镜头合集</a></li>
<li><a href="#">从没见过这么搞笑的祖孙组合</a></li>
<li><a href="#">史上最容易挨揍的自助餐吃法</a></li>
</ul>
</body></html>
Das obige ist der detaillierte Inhalt vonBox-Modell CSS3-Lerngrenze (Grenze). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!