前端html,css基礎總結

0.一、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.二、css選擇器:

標籤選擇器

類選擇器

層級選擇器

 

0.三、 屬性(經常使用):

佈局經常使用:

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.四、元素溢出:

overflow:visible(默認值)不會被修剪

hidden:被修剪,其他內容不可見

scroll:被修剪,可是瀏覽器會有一個滾動條看其他內容

auto:若是被修剪就會有滾動條

 

0.五、分欄:

<p>這一段文字用來測試分欄。這一段文字用來測試分欄。這一段文字用來測試分欄。</p>

 

p {

width: 200px; /* 把段落的寬度設短一點，便於效果的展示 */

column-count: 3; /* 設定須要分幾欄 */

column-gap: 20px; /* 設定兩欄間隔 */

}

1.一、盒模型:

包括:內容(content),填充(padding),邊框(border),邊距(margin).

咱們給元素設置的高度,是內容(content)的高度,再給元素添加填充(padding),

這樣的話會讓本來的元素看起來更高,由於會撐起

1.二、無語義:沒有任何樣式的元素(就是沒有行高,間距,顏色之類的東西),好比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.三、行內元素(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.四、位置(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.五、 display的值

block 象塊類型元素同樣顯示。

none 缺省值。向行內元素類型同樣顯示。

inline-block 象行內元素同樣顯示，但其內容象塊類型元素同樣顯示。

list-item 象塊類型元素同樣顯示，並添加樣式列表標記。

1.六、 權重:

標籤:權重爲:1

類選擇器:權重爲:10

id選擇器:權重爲100

權重能夠相加的:如#id div的權重就是101

內嵌在標籤裏面的style屬性的權重爲1000

權重相同時,最後定義的樣式會起做用,通常都要儘可能避免這樣的狀況

1.七、 優雅降級:

web站點在全部新式瀏覽器中都能正常工做,若是是老式瀏覽器,就會檢查是否能正常工做,

若是不能支持功能就爲那些瀏覽器增長候選方案,使之在舊式瀏覽器上能以某種形式降級體驗

,可是卻不至於徹底失效.

漸進加強:

從被全部瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,

向頁面增長無害於基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現出來併發揮做用。