1.電腦中的 1個像素的大小,相當於手機的4個像素的大小。也就是說,電腦中12px的長度,在手機中默認乘以4,爲48像素
1em = 1font-size , 1em 是相對於自身的字體大小來計算的。
顏色 rbg(255,255,255) rgb(100%,100%,100%) 值在 0-255之間,用十六進制表示: #紅色綠色藍色 #00FF00 #0F0
瀏覽器 中默認的字體大小 是 16px
字體分類(指一類字體的集合): font-family: arial, "微軟雅黑", serif;
font-style: normal; 以及斜體 font-style: italic;
font-weight: normal; 以及 font-weight: bold;
小寫字母變成 小型的大寫字母 font-variant: small-caps;
使用 (倒數第一是font-family,倒數第二是 font-size, 這裏兩個不可少),可以一次性解析,不用解析5次。
font: small-caps italic bold 24px "微軟雅黑";
2. line-height: 20px; 字體大小font-size: 10px; 則上下各留了 5px 的距離,所以行高爲10px。
可以得出結論: 行高 = line-height 減去 font-size
font-size: 20px;
line-height: 100%; /*相對於font-size, 值爲20 * 100% = 20px;*/
line-height: 1.5; /*相對於font-size, 值爲 20 * 1.5 = 30p;*/
注意:如果使用 font: 30px "微軟雅黑"; 時 line-height會被重置爲默認值,所以line-height不能寫在 font前面
line-height: 40px; /**此句將不起作用*/
font: 30px "微軟雅黑"; /**此處line-height 被重置了*/
應該這樣寫:
font: 30px "微軟雅黑"; /**此處line-height 被重置了*/
line-height: 40px; /**寫在後面,起作用*/
或者直接:
font: 30px/40px "微軟雅黑";
3. text-transform: capitalize; 每個單詞的首字母都大寫
a 標籤的 text-decoration 的默認值是 underline, 可以使用 text-decoration: none; 去除下劃線
word-spacing 其實就是延長空格的長度
一個字默認16px, 縮進2個漢字就是 text-indent: 32px; 但如果font-size 不是16px就不是兩個漢字,於是用
text-indent: 2em;
負值 表示首行向左移動 text-indent: -2em;
用處: text-intent: -99999px; 將這段話隱藏起來(不想讓用戶看到,但又想讓搜索引擎可以搜到)
4. 盒子模型(框模型)box model , 一直把 padding 和 margin 搞混( • ̀ω•́ )✧
邊框 3個屬性缺一不可:
border-width: 10px;
border-color: red;
border-style: solid;
其中 border-width: 10px 20px 30px 40px; 4個值: 上 右 下 左
border-width: 10px 20px 30px; 3個值: 上 右/左 下
border-width: 10px 20px; 2個值: 上/下 右/左 (可以使用 border-xxx-width 來分別設置)
border-color, border-style 也遵循上面的規律,也有 border-xxx-color; border-xxx-style.
瀏覽器默認的 border-color爲black, border-width: 3px; 但 border-style爲none,也就是如果僅僅只設置 border-style: solid; 也是能夠看到邊框的。
同時指定(沒有順序規定): border: 10px red solid; 可以 使用 border-xxx: 10px red solid; 分別指定。
假如我只要三邊,不要右邊:
border: 10px yellow dashed;
border-right: none;
5. 外邊距 margin
現在都是相對於 左,上 ,設置 margin-top , margin-left 會改變元素自身的位置
但設置 margin-right, margin-bottom 不會改變自身位置,但會改變相鄰的元素的位置。
margin 一般只給水平方向設置 auto , 左右方向設置爲auto會將外邊距設置爲最大值, 上下方向設置爲auto,則外邊距爲0
若 margin-right 和 margin-left 同時設置爲auto,則會將兩側外邊距設置爲相同的值。
兄弟元素外邊距重疊(選最大的),例如上一個元素的margin-bottom:100px; 下一個相鄰的元素的margin-top: 200px; 則這兩個元素之間的距離爲 200px;而不是 300px;
父子元素垂直外邊距 相鄰 ,子元素的外邊距會賦值給 父元素(垂直方向)。例如子元素的 margin-top: 100px; 但未給父元素設置margin-top,但此時父元素的 margin-top也變成了100px;
6. 瀏覽器 默認 的 <body></body> 有一個 8px 的 外邊距
去除瀏覽器默認樣式
*{
margin: 0;
padding: 0;
}
7. 對於內聯元素 來說: <span>我是內容我是內容</span>, 設置 width 和 height 是不起作用的
內聯元素支持 水平方向的 外邊距 margin-left 和 margin-right , 不支持垂直方向的外邊距 margin-top,margin-bottom
display: inline; /*內聯元素,不可設置width和height*/
display:block; /*塊級元素,獨佔一行*/
display: inline-block; /*既有內聯元素特點又有塊級元素特點,即支持width和height,但不獨佔一行*/
display: none; /*隱藏, 並且不佔位置*/
visibility: hidden; /*隱藏,但佔位置*/
visibility: visible; /*默認值,顯示*/
例如 <img src="" alt=""/> 就是 inline-block ,既可以設置 寬高,又不獨佔一行。
8. 如果子元素 的 高度 超出了 父元素的高度, 則 子元素會 溢出。 這裏的 overflow: visible; 默認值,表示不對溢出部分處理,元素會在父元素以外的位置顯示。 overflow: hidden; 會把溢出部分會被修剪,不會顯示
overflow: scroll; 爲父元素添加滾動條,拖動來查看完整內容。但這個存在缺點,不管子元素有沒有超出,水平和豎直方向都會有滾動條,所以可以使用 overflow: auto; 根據需求來添加滾動條,需要水平就添加水平,需要豎直就添加豎直,不需要就不加。
9. 文檔流 , 是網頁最底層的, 塊元素:默認寬度是父元素寬度的100%
float: none; float: left; float: right;
導航條 小練習:(這是我的一小步,更是人類的一大步(◕ᴗ◕✿))
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.nav{
list-style: none;
width: 1000px;
background-color: rgb(95,145,243);
margin: 50px auto;
overflow: hidden;
}
.nav li{
float: left;
width: 25%;
}
.nav a{
display: block;
width: 100%;
text-align: center;
padding: 5px 0;
text-decoration: none;
color: white;
font-weight: bold;
}
.nav a:hover{
background-color: #cc0000;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">首頁</a></li>
<li><a href="#">地址</a></li>
<li><a href="#">商品</a></li>
<li><a href="#">榜單</a></li>
</ul>
</body>
</html>
真的是很神奇啊,從變成 :
內聯元素 設置 width 和 height是沒有效果的,它只會被內容撐開 。
10. 清除浮動: clear: left; clear: right; clear: both; 清除對其影響最大的一邊的浮動
使用clear: both; 解決高度坍塌問題:
對於:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1{
border: 5px red solid;
}
.box2 {
width: 100px;
height: 100px;
background-color: yellowgreen;
float: left;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
給子元素添加 float: left; 造成高度坍塌
添加一個新的 <div class="clear">clear</div> , 並賦予樣式 clear: both;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1{
border: 5px red solid;
}
.box2 {
width: 100px;
height: 100px;
background-color: yellowgreen;
float: left;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="clear">clear</div>
</div>
</body>
</html>
它將父元素撐了起來:
如果 中間不加內容 <div class="clear"></div> , 成功解決高度坍塌問題。
但這種方法需要 添加格外的 html , 下面使用 僞類選擇器 :after 在父元素之後用css添加html,需滿足第一是 塊級元素,第二是 清除浮動,第三是沒有內容,給該class取名爲 clearfix, 可以複用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1{
border: 5px red solid;
}
.box2 {
width: 100px;
height: 100px;
background-color: yellowgreen;
float: left;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>
11. 定位
position: static; 默認值,元素沒有開啓定位 relative 相對定位 absolute 絕對定位 fixed 固定定位
position:relative; 內聯元素還是內聯元素
position:absolute; 相對於 開啓了定位的祖先元素,
一般情況是 子元素position: absolute; 此時 其祖先元素開啓了 position:relative
並且內聯元素會變成塊元素