0.1、css引入界面的方式:
內聯式:通過標簽的style屬性，在標簽上直接寫樣式。
<div style="width:100px; height:100px; background:red "></div>
嵌入式:通過style標簽，在網頁上創建嵌入的樣式表。
<style type="text/css">
div{ width:100px; height:100px; background:red }
</style>
外鏈式:通過link標簽，鏈接外部樣式文件到頁面中。
<link rel="stylesheet" type="text/css" href="css/main.css">
0.2、css選擇器:
標簽選擇器
類選擇器
層級選擇器
?
0.3、 屬性(常用):
布局常用:
width,height,background,border,solid(實線),padding,
margin,float,opacity:0.3(元素透明度),z-index:1(表示層疊,值越大越上面)
?
文本常用樣式屬性;
color,font-size ,font-family ,font-weight ,line-height,
text-decoration(去下劃線),text-align(文字對齊方式),text-indent(文字首行縮進)
0.4、元素溢出:
overflow:visible(默認值)不會被修剪
hidden:被修剪,其余內容不可見
scroll:被修剪,但是瀏覽器會有一個滾動條看其余內容
auto:如果被修剪就會有滾動條
?
0.5、分欄:
<p>這一段文字用來測試分欄。這一段文字用來測試分欄。這一段文字用來測試分欄。</p>
?
p {
width: 200px; /* 把段落的寬度設短一點，便于效果的展現 */
column-count: 3; /* 設定需要分幾欄 */
column-gap: 20px; /* 設定兩欄間隔 */
}
1.1、盒模型:
包括:內容(content),填充(padding),邊框(border),邊距(margin).
我們給元素設置的高度,是內容(content)的高度,再給元素添加填充(padding),
這樣的話會讓原本的元素看起來更高,因為會撐起
1.2、無語義:沒有任何樣式的元素(就是沒有行高,間距,顏色之類的東西),比如div
1.2 以邊框為界的盒模型:
<box-sizing:border-box></box-sizing:border-box>
有些時候,我們不希望給元素填充(padding)時,元素高度改變,不利于我們布局,就可以
使用上面的方法,在IE的怪異模式下,使用了這種模式
...
<div class="box-model">box-model</div>
...
<typle>
.box-model {
box-sizing: border-box; /* 設置成以邊框為界的盒模型 */
border: 1px solid red;
height: 80px;
padding: 10px;
}
</typle>
?
1.3、行內元素(inline),塊元素(block)
布局一般都用塊元素:
1.3.1 塊元素可以設置寬高,默認占據一行,行內元素不能設置寬高,寬度由其內容決定
1.3.2 塊元素默認沒有高度,有內容才會有高度.
行內元素默認沒高度和寬度,有內容才會有,行內元素雖然不能設置寬高,但是設置
成絕對定位(absolute)后,可以設置寬高.
1.3.3 塊元素:
<div></div>
<p></p>
<ul></ul>
<li></li>
<table></table>
<form></form>
<header></header>
<section>
<option></option>
</section>
<footer></footer>
<dl></dl>
<dd></dd>
?
行內元素:
<a href=""></a>
<font></font>
<em></em>
<strong></strong>
<i></i>
<img src="" alt="">
<span></span>
空元素:
<br>
<hr>
<img>
<input type="text">
<link rel="stylesheet" href="">
<meta>
1.3.4 一行只有一個塊元素,但是行內元素可以有很多個,空的元素將在布局的時候消失
1.3.5 行內塊元素:
inline-block
三個li并列，都設置成inline-block。當對最左邊的元素設置display:none;時，
其他兩個li會下沉到容器的底部。此時，需要對這兩個li設置頂部對齊（vertical-align:top;）
<ul class="nav" id="nav">
<li class="left"><div class="hidden">首頁</div></li>
<li class="center"><div>文章</div></li>
<li class="right"><div>留言</div></li>
</ul>
.hidden {display: none;}
.left {height: 50px;}
.center,.right {vertical-align: top;}
1.3.6 隱藏元素:
visibility:hidden;
display:none; //隱藏元素并且會清除原本占用的布局空間
?
1.4、位置(position):
1.4.1 絕對(absolute),相對(relative),固定(fixed)
移動:left,right,top,bottom
清除布局空間的定位(absolute fixed)
1.4.2 固定定位（fixed）不會隨著鼠標的滾動而改變位置。
他真的是固定屏幕的某一個位置的，比較常見的是網頁右下角的廣告
?
絕對定位（absolute）的定位原點是非默認定位（static）的父節點。
可以是absolute fixed relative，如果父節點沒有這些，那定位原點就是body了。
使用了這兩種定位中的一種，元素原本占用的布局空間將會消失（脫離文檔流)
?
1.4.5 相對定位(relative):
相對原有位置定位。
使用這種方法，元素原本占用的布局會保留。
父級采用relative，子代采用absolute。則子代的定位原點變為父級元素的左上角
默認定位:static
浮動(float):
居中一個浮動元素:
Width:500px ; height:300px;//高度可以不設
Margin: -150px 0 0 -250px;
居中一個普通元素:
margin:0 auto;
清除浮動(overflow:hidden;):
使用這種方法意味著，浮動元素得有一個父元素，并給父元素添加overflow:hidden;屬性。
.nav {
overflow: hidden;
}
清除浮動(.clear):
這種方法需要在浮動元素后面添加一個空的節點，然后寫上clear屬性。兼容IE6需要添加zoom:1;。
<div class="clear"></div> <!--用來清楚浮動的空元素-->
css選擇符有哪些:
id選擇器（ # myid）
類選擇器（.myclassname）
標簽選擇器（div, h1, p）
相鄰選擇器（h1 p）
子選擇器（ul < li）
后代選擇器（li a）
通配符選擇器（ * ）
屬性選擇器（a[rel = “external”]）
偽類選擇器（a: hover, li: nth - child）
1.5、 display的值
block 象塊類型元素一樣顯示。
none 缺省值。向行內元素類型一樣顯示。
inline-block 象行內元素一樣顯示，但其內容象塊類型元素一樣顯示。
list-item 象塊類型元素一樣顯示，并添加樣式列表標記。
1.6、 權重:
標簽:權重為:1
類選擇器:權重為:10
id選擇器:權重為100
權重可以相加的:如#id div的權重就是101
內嵌在標簽里面的style屬性的權重為1000
權重相同時,最后定義的樣式會起作用,一般都要盡量避免這樣的情況
1.7、 優雅降級:
web站點在所有新式瀏覽器中都能正常工作,如果是老式瀏覽器,就會檢查是否能正常工作,
如果不能支持功能就為那些瀏覽器增加候選方案,使之在舊式瀏覽器上能以某種形式降級體驗
,但是卻不至于完全失效.
漸進增強:
從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,
向頁面增加無害于基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現出來并發揮作用。
?
本文轉載于:猿2048?https://www.mk2048.com/blog/blog.php?id=jakhaib&title=前端html,css基礎總結
