css學習筆記

標籤：

label標籤不會向使用者呈現任何特殊效果，它的作用是為滑鼠使用者改進了可用性。如果你在 label 標籤內點擊文本，就會觸發此控制項。就是說，當使用者單擊選中該label標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制項上（就自動選中和該label標籤相關連的表單控制項上）

<input type="radio" name="">如果是單選框那麼name屬性的值都要相同

1、ID選取器只能在文檔中使用一次。與類別選取器不同，在一個HTML文檔中，ID選取器只能使用一次，而且僅一次。而類別選取器可以使用多次。

這是正確的
.stress{    color:red;}.bigsize{    font-size:25px;}<p>到了<span class="stress bigsize">三年級</span>下學期時，我們班上了一節公開課...</p>

下面的代碼是不正確的(完整代碼見右側代碼編輯器)#stressid{    color:red;}#bigsizeid{    font-size:25px;}<p>到了<span id="stressid bigsizeid">三年級</span>下學期時，我們班上了一節公開課...</p>

.first>span{border:1px solid red;}子選取器

包含(後代)選取器

包含選取器，即加入空格,用於選擇指定標籤元素下的後輩元素。如右側代碼編輯器中的代碼：

.first span{color:red}

請注意這個選取器與子選取器的區別，子選取器（child selector）僅是指它的直接後代，或者你可以理解為作用於子項目的第一代後代。而後代選取器是作用於所有子後代元素。後代選取器通過空格來進行選擇，而子選取器是通過“>”進行選擇。

我們在做網頁代碼的時，有些特殊的情況需要為某些樣式設定具有最高權值，怎麼辦？這時候我們可以使用!important來解決。

設定刪除線{text-decoration:line-through;}
設定行高{line-height:2em;} 2em的意思就是文字的2倍大小。
如果想在網頁排版中設定文字間隔或者字母間隔就可以使用    letter-spacing來實現，如果想在網頁排版中設定文字間隔或者字母間隔就可以使用    letter-spacing來實現
在CSS中，html中的標籤元素大體被分為三種不同的類型：塊狀元素、內嵌元素(又叫行內元素)和內聯塊狀元素。

常用的塊狀元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的內嵌元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的內聯塊狀元素有：

<img>、<input>

display:inline將元素設定為內嵌元素

內嵌元素特點：

1、和其他元素都在一行上；

2、元素的高度、寬度、行高及頂部和底部邊距不可設定；

3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。

display:inline-block就是將元素設定為內聯塊狀元素，<img>、<input>標籤就是這種內聯塊狀標籤。

inline-block元素特點：

1、和其他元素都在一行上；

2、元素的高度、寬度、行高以及頂和底邊距都可設定。預設的順序是上右下左

在網頁中，元素有三種布局模型：
1、流動模型（Flow）
2、浮動模型 (Float)
3、層模型（Layer）

第一點，塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在預設狀態下，塊狀元素的寬度都為100%。實際上，塊狀元素都會以行的形式佔據位置。如右側代碼編輯器中三個塊狀元素標籤(div，h1，p)寬度顯示為100%。

第二點，在流動模型下，內嵌元素都會在所處的包含元素內從左至右水平分布顯示。（內嵌元素可不像塊狀元素這麼霸道獨佔一行.a、span、em、strong都是內嵌元素。

層模型有三種形式：

1、絕對位置(position: absolute)

2、相對定位(position: relative)

3、固定定位(position: fixed)

如果想為元素設定層模型中的絕對位置，需要設定position:absolute(表示絕對位置)，這條語句的作用將元素從文檔流中拖出來，然後使用left、right、top、bottom屬性相對於其最接近的一個具有定位屬性的父包含塊進行絕對位置。如果不存在這樣的包含塊，則相對於body元素，即相對於瀏覽器視窗。

 

如果想為元素設定層模型中的相對定位，需要設定position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文檔流中的位移位置。相對定位完成的過程是首先按static(float)方式產生一個元素(並且元素像層一樣浮動了起來)，然後相對於以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，位移前的位置保留不動

fixed：表示固定定位，與absolute定位類型類似，但它的相對移動的座標是視圖（螢幕內的網頁視窗）本身。由於視圖本身是固定的，它不會隨瀏覽器視窗的捲軸滾動而變化，除非你在螢幕中行動瀏覽器視窗的螢幕位置，或改變瀏覽器視窗的顯示大小，因此固定定位的元素會始終位於瀏覽器視窗內視圖的某個位置，不會受文檔流動影響，這與background-attachment:fixed?屬性功能相同。

Relative與Absolute組合使用小夥伴們學習了12-6小節的絕對位置的方法：使用position:absolute可以實現被設定元素相對於瀏覽器（body）設定定位以後，大家有沒有想過可不可以相對於其它元素進行定位呢？答案是肯定的，當然可以。使用position:relative來幫忙，但是必須遵守下面規範：1、參照定位的元素必須是相對定位元素的前輩元素：<div id="box1"><!--參照定位的元素-->    <div id="box2">相對參照元素進行定位</div><!--相對定位元素--></div>從上面代碼可以看出box1是box2的父元素（父元素當然也是前輩元素了）。2、參照定位的元素必須加入position:relative;#box1{    width:200px;    height:200px;    position:relative;        }3、定位元素加入position:absolute，便可以使用top、bottom、left、right來進行位移定位了。#box2{    position:absolute;    top:20px;    left:30px;         }這樣box2就可以相對於父元素box1定位了（這裡注意參照物就可以不是瀏覽器了，而可以自由設定了）。

通常有下面三種縮寫方法:1、如果top、right、bottom、left的值相同，如下面代碼：margin:10px 10px 10px 10px;可縮寫為：margin:10px;2、如果top和bottom值相同、left和 right的值相同，如下面代碼：margin:10px 20px 10px 20px;可縮寫為：margin:10px 20px;3、如果left和right的值相同，如下面代碼：margin:10px 20px 30px 20px;可縮寫為：margin:10px 20px 30px;注意：padding、border的縮寫方法和margin是一致的。

 

 

css學習筆記