问答作业：（答案写的真好 给我自己的笔记补充了不少）
1.什么是css语法？
Css语法有两部分组成：选择符和声明；
写法：选择符{属性：属性值；}
2.列举常见的css选择符？
Css选择符就是给对应的元素起个名称
Css选择符包括4大类：类型选择符 id选择符 class选择符 特殊选择符
常用的选择符有：
1：类型选择符（标记选择器）
2：类选择符（class选择器 用.表示）
3：id选择符（用#表示）
4：伪类选择器
5：群组选择符（集合选择器）
6：通配符（设置全局属性 用*表示）}
7：包含选择符（后代选择器）
Id名称多用于外围结构，id名称不可重复
Class名可以重复利用；id权重大于class；后面的样式会将前写的给覆盖
3.background属性如何简写？
选择符：{background:url(图片路径) background-repeat background-position;}
Eg: .div1{background:url(../images/hua.jpg) no-repeat left center;}
4.文本的属性有哪些?请写出font的复合式写法？
（1）：文本水平居中：text-align：left right center
文本垂直居中：vertical-align：top middle bottom
（2）：文本类型属性：
A：字体类型：{font-family：”字体1”，”字体2”；}
说明：当字体是中文字体时需加双引号；当英文字体中有空格时需加双引号；
B：字体大小：{font-size：数值；}
说明：
1必须给属性值加单位属性值为0时除外
2为了减小系统间的字体显示差异确定16px/ppi为标准字体大小默认值即1em
c：文本颜色：{color：颜色值；}
说明：
1十六进制表示颜色值：0123456789ABCDEFG
2RGB（0~255）
3rgba（0,255,255,0.6）透明度（0~1）
4用颜色名表示
D：加粗{font-weight：bolder/bold/normal/数值；}
说明：bolder：更粗的；bold：加粗；normal：常规；数值：一般500为常规字体，600-900为加粗字体
E：字体倾斜{font-style：italic/oblique/normal;}
说明：italic：表示倾斜；oblique：倾斜幅度要大一些；normal：不倾斜；
F：复合式写法：{font：style weight size family；}
说明：font：12px/2em “宋体”
“字体大小/行高” “类型”
Size和family是固定位置不可随意换；
（3）：文本修饰：{text-decoration： ；}
说明：none：没有修饰；underline：添加下划线；overline：添加上划线；line-through：添加删除线；
5.text-indent有什么作用？
首行缩进，可以取负值，并且只对第一行起作用。
6.超链接a标签的作用有哪些？
1.通过href属性来进行页面的跳转
Eg: <a href=”www.baidu.com”></a>
2.压缩包下载
3.锚点
Eg: <a href=”#id名”></a>
- a标签默然样式是什么？
有下划线，点击能发上跳转，字体默认有颜色
8.什么是盒模型？盒模型包括什么？
盒子模型是css的基石，指定标签如何显示以及元素间相互关系；页面上的每一个元素都被当做一个矩形盒子，占据一定的页面空间；
这个盒子由：
内容（content）内边距（补白 填充padding）边框（border）和外边界（margin）组成
A：pidding属性：背景可以覆盖padding区域
9.padding和margin的区别？
Padding是设定页面中元素内容到元素边框之间的距离（补白）；
1：用来调整内容在容器中的位置关系；
2：用来调整子元素在父元素中的位置关系（padding属性需加在父元素上）；
3：padding值是额外加载元素原有大小之上的，
如想保证元素大小不变，需从元素宽或高上减掉添加的padding值大小；
（保证元素大小不变宽高加多少，padding减多少）；
Padding不可以为负值
padding：2px 4px 6px 8px （上 右 下 左）
padding：2px 4px 6px （上 左右 下）
padding：2px 4px （上下 左右）
padding：2px（上下左右）
（a标记默认状态下对padding margin的上下距离无效，但是左右距离可以）
B：margin属性：（调整容器在网页中的位置“调整相邻模块之间的关系”）
背景不可以覆盖margin区域
Margin的使用方式：margin给自身加（不在父元素上加）
“边界：margin 在元素外边的空白区域（边距）”
margin属性的四种方式：
1：{margin：10px 2px 4px 3px；}上 右 下 左
2：{margin：10px 2px 3px；}上 左右 下
3：{margin：10px 2px ；}上下 左右
4：{margin：10px；}上下左右
5：{margin：0 auto；}在浏览器中水平居中
10.什么是margin叠加？什么是margin传递？
Margin叠加：发上在两个块元素之间的margin上下叠加，当两个块元素都同时写上margin值时，谁的margin值大，就取那个大的margin值。
Margin传递：给子元素加上margin值，这时的margin的上下值会传给父元素，导致父元素的位置发生变化。
11.列举几种常见的语义化标签？
Eg: <nav> <section> <footer> <header>等
12.常见的块元素和内嵌元素有哪些？简要说一下它们的区别？
块状元素：
Div：块级元素；dl和dt dd：搭配使用；form：交互表单；
H1-h6：大标题；hr：水平分割线；ol：有序列表；p：段落标签；
Ul：无序列表；fiedset：表单字段集；colgroup-col：表单列分组元素；
Table-tr-td：表格及行-单元格；pre：格式化文本；iframe：框架元素；
内联元素：
表现形式始终以行内逐个显示，没有自己的形状，不能定义宽高，只能根据所包含内容来确定。
常用的：Img：图片； input：输入框；
a：锚点；b：粗体（不推荐使用）；br：换行；em：强调；
i：斜体；span：内联容器定义文本内区域；
label：表单标签；strong：粗体强调；textarea：多行文本输入框；
编程作业：
1、
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>18日作业</title>
<style>
div0{width:0px;height:0px;border:100px #f00 solid;border-bottom:100px #fff solid;}
</style>
</head>
<body>
<div id="div0"></div>
</body>
</html>
链接：http://pan.baidu.com/s/1i5OD7Pb 密码：1j8v
2、
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
box{ width:513px; height:341px; padding:0 22px; border:#000 solid 1px; margin:30px auto; }
div1{ font:bold 24px "宋体";line-height:44px; color:#404646; padding: 0px 408px 0px 0px;}
div2{ font:bold 20px "宋体"; line-height:54px; color:#404646; padding: 0px 289px 0px 0px;}
div3{ font:14px/26px "宋体"; color:#9b9b9b; text-indent:2em; border-bottom: 1px dashed #000; padding:0 52px 28px 0;}
div4{ font:bold 17px/37px "微软黑体"; color:#404646; padding:19px 233px 0px 17px;}
</style>
</head>
<body>
<div id="box">
<div id="div1">动态新闻</div>
<div id="div2">掌握一门技术的重要性</div>
<div id="div3">掌握一门技术是未来生存的一块敲门砖，掌握一门技术是未来生存的一块敲门砖，掌握一门技术是未来生存的一块敲门砖</div>
<div id="div4">走进民企观摩学习与民企面对面
走进民企观摩学习与民企面对面
走进民企观摩学习与民企面对面
走进民企观摩学习与民企面对面</div>
</div>
</div>
</body>
</html>
链接：http://pan.baidu.com/s/1kVwPmoJ 密码：z5bp
标准答案2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding: 0;
}
.box{
width:555px;
height:341px;
border:1px solid #000;
padding-left:20px;
color:#404646;
font:14px/26px "微软雅黑";
}
.box1{
width:512px;
height:178px;
border-bottom:1px dashed #000;
}
h3{
font-size:24px;
line-height:44px;
font-weight: bolder;
}
h4{
font-size:20px;
line-height:54px;
font-weight: bolder;
}
p{
text-indent: 2em;
color:#9b9b9b;
}
.box2{
margin-top:19px;
}
li{
list-style: none;
font-size:18px;
line-height: 38px;
font-weight: bolder;
background: url(img/jiao.jpg) no-repeat left center;
padding-left:17px;
}
a{
text-decoration: none;
color:#404646;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<h3>动态新闻</h3>
<h4>掌握一门技术的重要性</h4>
<p>掌握一门技术的重要性掌握一门技术的重要性掌握一门技术的重要性掌握一门技术的重要性</p>
</div>
<ul class="box2">
<li><a href="###">走进名企</a></li>
<li><a href="###">走进名企</a></li>
<li><a href="###">走进名企</a></li>
<li><a href="###">走进名企</a></li>
</ul>
</div>
</body>
</html>
