問答作業：（答案寫的真好 給我自己的筆記補充了不少）
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>
