浮動

時間 2019-11-25

標籤浮動简体版

原文原文鏈接

目錄css

11.3 浮動

11.3 浮動

內容回顧

1.div和span標籤在網頁中的做用

div:將網站分割成獨立的邏輯區域 division 分割html

span: 小區域標籤,在不影響文本正常顯示的狀況下，單獨設置對應的樣式佈局

<style>
    span.active{
        font-weight:bold;
    }
</style>
<p>
    <span class='active'>央視網消息</span>（新聞聯播）：28日上午在北京人民大會堂親切會見出席第九屆世界華僑華人社團聯誼大會和中華海外聯誼會五屆一次理事大會的全體表明，表明黨中央、國務院向你們表示熱烈歡迎和衷心祝賀，向世界各地華僑華人致以誠摯問候。
</p>

2.css基礎選擇器和高級選擇器有哪些？

選擇器的做用：選中標籤字體

基礎選擇器

id選擇器特定屬性的元素（標籤）
類選擇器 class = 'active' .active 類是能夠重複，而且能夠設置多個
標籤選擇器

高級選擇器

後代子子孫孫
子代只包括兒子
組合 html,body,div,p,ul....
交集 span.active

3.盒子模型的屬性有哪些？並說明屬性的含義，畫出盒子模型圖

width:內容的寬度
height:內容的高度
border:邊框
padding:內邊距
margin: 外邊距

4.如何讓文本垂直和水平居中？

<style>
    div{
        width:200px;
        height: 60px;
        background-color: red;
        text-align:center;
        line-height: 60px;
    }
</style>
<div>
 wusir
</div>

讓行高等於盒模型的高度實現垂直居中網站

使用text-align:center；實現文本水平居中spa

5.如何清除a標籤的下劃線？

text-decoration: none;

none;無線
underline:下劃線
overline:上劃線
line-through:刪除線

6.如何重置網頁樣式？

reset.csscode

html,body,p,ul,ol{
    margin: 0;
    padding: 0;
}
/*通配符選擇器 */
*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}
input,textarea{
    border: none;
    outline: none;
}

7.如何清除input和textarea標籤的默認邊框和外線？

8.在css中哪些屬性是能夠繼承下來的？

color,text-xxx,font-xxx,line-height,letter-spacing,word-spacing

9.如何正確比較css中的權重？

若是選中了標籤
    數選擇器的數量  id  class 標籤 誰大優先級越高 若是同樣大，後面優先級越大
    若是沒有選中標籤，當前屬性是被繼承下來，他們的權重爲0，與選中的標籤沒有可比性
    都是繼承來的，誰描述的近，就顯示誰的屬性（就近（選中的標籤越近）原則），若是描述的同樣近，繼續數選擇器的數量。
    !important 它設置當前屬性的權重爲無限大，大不過行內樣式的優先級

10.塊級標籤和行內標籤

塊級標籤

1.能夠設置高度，若是不設置寬度，默認是父標籤的100%的寬度
2.獨佔一行

p
div
ul
ol
li
h1~h6
table
tr
form

行內標籤

1.不能夠設置寬高
2.在一行內顯示
a 
span
b
strong
em
i

行內塊標籤

1.能夠設置寬高
2.在一行內顯示

input
img

今日內容

僞類選擇器

對於a標籤，若是想設置a標籤的樣式，要做用於a標籤上，對於繼承性來講，a標籤不起做用的orm

「愛恨準則」htm

LoVe HAte繼承

/*LoVe HAte*/
/*a標籤沒有被訪問時候設置的屬性*/
a:link{
    /*color: red;*/
}
/*a標籤被訪問時候設置的屬性*/
a:visited{
    color:yellow;
}
/*a標籤懸浮時設置的屬性*/
a:hover{
    color: deeppink;
}
/*a標籤被摁住的時候設置的屬性*/
a:active{
    color: deepskyblue;
}

屬性選擇器

input[type='text']{
    background-color: red;
}
input[type='checkbox']{

}
input[type='submit']{

}

僞元素選擇器

p::first-letter{
    color: red;
    font-size: 20px;
    font-weight: bold;
}
p::before{
    content:'@';
}
/*解決浮動佈局經常使用的一種方法*/
p::after{
    /*經過僞元素添加的內容爲行內元素*/
    content:'$';
}