css第二課時筆記

標籤：css布局   logs   lis   哪些   alt   瀏覽器安全色   代碼   技術   log   

1、css、html、js等分類放入一個檔案夾

2、<table><caption>表格標題</caption></table>

   <tr><th scope="row">行表頭</th></tr>

   <tr><th scope="col">列表頭</th></tr>

不寫scope的屬性的話預設為行表頭

3、按鈕代碼：<input type="button" value="我是一個按鈕"/>

4、

<style>ul{list-style-type:circle}</style>
<ul>
<li>列表列表列表列表</li>
<li>列表列表列表列表</li>
<li>列表列表列表列表</li>
<li>列表列表列表列表</li>
<li>列表列表列表列表</li>

</ul>

list-style-type:square

list-style-type:none

5、重點

div+css布局

區塊層級元素特點：1、塊元素裡面的內容預設是在塊的左上方 2、塊元素獨佔一行，存在於文檔流中，

有哪些元素是塊元素：1.div 2.p 3.h1~h6 4.ol li ul li (列表）5.body 6.table 7.pre 8.form

行內元素特點：1、height width 不起作用 2、不會單獨佔滿一行

有哪些是行內元素：1.a 2.span 3.input 4,label 5.img 6.textarea 7.select

6、將區塊層級元素變行內元素：display:inline

 將行內元素變區塊層級元素：display:block

既有行內元素又有區塊層級元素特點的：display:inline-block

7、重點

浮動 float 浮動之後要清除浮動才能不影響後面的div布局

clear:left/right/both(清除左、右、左右的浮動)

8、重點

盒子模型（針對區塊層級元素）

內間距：padding:10px 以內容為中心、上下左右都撐開10px;

              padding:10px 20px;上下撐開10.左右撐開20

              padding:10px 2px 2px;上撐開10px，左右撐開2px；下撐開2px

              padding:10px 2px 2px 10px;上撐開10px，右撐開2px；下撐開2px 左撐開10px（順時針）撐開代表div的高度或寬度增加了

9、外間距和內間距方位一樣，屬性名稱為：margin

10、由於瀏覽器安全色性問題，導致div上和左與瀏覽器有縫隙，所以定義一個全域通用的效果

*{padding:0;margin:0;}

11、學會調試（審查元素找問題、分析、思考！！！）

12、行內元素同樣對padding、margin也有作用

css第二課時筆記