扫盲关键词：CSS、class（样式类）、style、margin、padding、border
概述
CSS：层叠样式表 (Cascading Style Sheets)。HTML代表内容，CSS代表样式，内容和样式分离是很重要的原则。
小试牛刀
目标页面
image.png
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小试 CSS</title>
<!-- <link rel="stylesheet" type="text/css" href="css/question.css">-->
<style type="text/css">
body {
background: #f5f6f7;
font-family: "Helvetica", "Microsoft Sans Serif", sans-serif;
font-size: 16px;
}
/* 试题卡片 */
.questionCard {
width: 700px;
margin: 50px auto 50px auto;
padding: 20px;
border: 1px solid #edf0f2;
border-top: 4px solid #879ac0;
border-radius: 4px;
background: #fff;
}
/*题号*/
.questionOrder {
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
border-radius: 50%;
background-color: #879ac0;
font-size: 14px;
color: #fff;
text-align: center;
}
.sourceText {
font-size: 14px;
color: #bbb;
}
.difficulty {
display: inline-block;
padding: 1px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 12px;
color: #bbb;
}
.article {
text-align: center;
}
.title {
font-weight: 700;
}
.author {
font-size: 14px;
}
.content {
font-family: "Kaiti SC", sans-serif;
}
.childQuestionSteam {
margin-top: 10px;
margin-bottom: 5px;
}
.childQuestionOptions {
margin: 0;
padding-left: 26px;
list-style: none;
line-height: 30px;
}
</style>
</head>
<body>
<div class="questionCard">
<div class="questionSource">
<span class="questionOrder">12</span>
<span class="sourceText">(2016年江苏苏州苏州市景范中学校初三一模第6题4分)</span>
<span class="difficulty">较易</span>
</div>
<div class="questionSteam">
<p>阅读下面一首诗歌，完成下题。</p>
<div class="article">
<p class="title">游山西村</p>
<p class="author">陆游</p>
<div class="content">
<p>莫笑农家腊酒浑，丰年留客足鸡豚。</p>
<p style="text-decoration: underline;font-weight: 700;color: red">山重水复疑无路，柳暗花明又一村。</p>
<p>萧鼓追随春社近，衣冠简朴古风存。</p>
<p>从今若许闲乘月，拄杖无时夜叩门。</p>
</div>
<!-- x偏移量 | y偏移量 | 阴影颜色 -->
<img src="img/luyou.jpg" style="width: 300px;border-radius: 4px;box-shadow: 4px 4px 10px #879ac0"
alt="陆游">
</div>
</div>
<div class="childQuestion">
<div class="childQuestionSteam">(1) “山重水复疑无路”经常被错认为是“山穷水尽疑无路”，请联系诗句，说说为什么要用“山重水复”?</div>
</div>
<div class="childQuestion">
<div class="childQuestionSteam">(2) 关于本诗，下列说法有误的一项是?</div>
<ul class="childQuestionOptions">
<li>A.诗歌朗读的节奏可以按音节兼顾意义来划分，例:“衣冠/简朴/古风/存”。</li>
<li>B.“丰年留客足鸡豚”一句写出了农民热情好客、淳朴厚道的性格。</li>
<li>C.全诗生动地描绘了优美的农村风光，充满了浓郁的生活气息。</li>
<li>D.全诗在写实中按时间推移展开叙述，层次清晰，表达了诗人的闲适心情。</li>
</ul>
</div>
</div>
</body>
</html>
知识补充
盒子模型
image.png
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
块级元素与内联元素
- display:block
- block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
- block元素可以设置width，height属性。块级元素即使设置了宽度，仍然是独占一行。
- block元素可以设置margin和padding属性。
- display:inline
- inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
- inline元素设置width，height属性无效。
- inline元素的margin和padding属性，水平方向的padding-left， padding-right， margin-left， margin-right都产生边距效果；但竖直方向的padding-top， padding-bottom， margin-top， margin-bottom不会产生边距效果。
- display:inline-block
- 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
