為何要樣式初始化？
1.瀏覽器相容性（不同的瀏覽器給標籤的預設樣式有細微的區別）
2.頁面會出現差異/錯亂
>
body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd
/*div,li預設無marging和padding，ul的padding-left預設有40px,把ul中的padding去掉，也就沒有了，但其list-style仍然在
body標籤預設有margin:8px;
p標籤預設有margin:16px 0 16px 0;
h1-h6預設有著不同的margin（上下）
ul預設有margin:16px 0 16px 0;
padding-left:40px;
ol與ul一樣
dl預設預設有magin：16px 0 16px 0;
dt預設無margin和padding
dd有margin-left:40px;
*/ul,ol
astyle
>
>
>
charset
="utf-8"
>
name
="keywords"
content
="html+css"
>
name
="description"
content="
">
>
title
>
>
body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd
ul,ol
adiv
/* text-overflow:
clip --不顯示省略號標記
ellipsis ---文字溢位顯示省略號
把 文字限制在一行( white-space:nowrap; ) 這一行是有限制寬度(width),並且溢位部分
要隱藏起來 ( overflow: hidden; ) 然後出現省略號 ( text-overflow:ellipsis; )
*/style
>
head
>
>
>
阿三大啊颯颯的打撒颯颯大蘇打大大大啊啊啊啊啊啊呃呃呃呃呃呃呃呃呃呃呃呃嗯嗯嗯嗯嗯嗯分四十三的手動定
div>
body
>
html
>
>
/* id > class > 標籤選擇器
id數: id數越多 權重越大
id數一樣: 看class數 越多 權重越大
class數一樣 : 標籤選擇器 越多 權重越大
*/style
>
1.相鄰：誰的外邊距大就顯示誰的外邊距值，一樣就合併（就僅顯示乙個值）
解決方法：中間加乙個元素設定border:1px solid transparent;
然後就各顯各的
>
>
charset
="utf-8"
>
name
="keywords"
content
="html+css"
>
name
="description"
content="
">
>
title
>
>
body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd
ul,ol
a.stu
.stu1
pstyle
>
head
>
>
class
="stu"
>
坤div
>
class
="stu1"
>
div>
>
菜十二p
>
body
>
解決問題方案:
1.給父親新增邊框線 : border:1px solid red;
2. 給父親新增padding；
3.給父親新增 overflow:hidden;
然後就各顯示各的
>
>
charset
="utf-8"
>
name
="keywords"
content
="html+css"
>
name
="description"
content="
">
>
title
>
>
body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd
ul,ol
a.stu
pstyle
>
head
>
>
class
="stu"
>
>
菜十二p
>
div>
body
>
html
>
>
>
charset
="utf-8"
>
name
="keywords"
content
="html+css"
>
name
="description"
content="
">
>
title
>
>
body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd
ul,ol
abody
/* 瀏覽器預設字型大小 -- 16px
瀏覽器預設字型最小的大小--12px
行高: 一行文字的最小高度
line-height
目的: 設定文字 行與行 之間的距離
行間距: 兩行文字之間的距離
半行間距:1/2的 行間距(行間距的一半)
如何計算: 行高 = 字型大小 + 行間距
***行高--整體設定---統一
在需要修改行高的地方單獨設定行高
怎麼重置行高?
整行文字的高度(新的行高) = 字型大小 * 行高倍數值
文字垂直居中
行高的大小和我們的盒子高度一致
*/.stu1
.stu2
divstyle
>
head
>
>
class
="stu1"
>
南相p>
class
="stu2"
>
白菜p>
>
一行文字的高度div
>
body
>
html
>
css 樣式文字溢位顯示省略號
在table中使用溢位樣式，table樣式要設定為 table layout fixed 即，溢位樣式才有效果 table tbody tr td 注釋 white space nowrap 表示文字不會換行，在同一行繼續，知道遇到 標籤為止 overflow hidden 不顯示超過物件尺寸的內容...
簡單的css樣式 新增省略號
多餘字用省略號表示 width 200px overflow hidden text overflow ellipsis 文字溢位的部分隱藏並用省略號代替 white space nowrap 文字不自動換行 用了一段時間，才又發現，有些時候不起作用，這是還要加上一句 display block 多...
樣式初始化
樣式初始化 reset body,h1,h2,h3,h4,h5,h6,p,dl,dd ul,ol a liimg css reset 原則 但凡是瀏覽預設的樣式，都不要使用。父級 後代 後代選擇器 標籤的兩大陣營 塊級標籤 特徵 預設寬度100 div 內聯標籤 特徵 內容撐開寬度 span 塊級標...