css

時間 2019-11-12

標籤 css 欄目 CSS 简体版

原文原文鏈接

css筆記
1.CSS全稱爲"層疊樣式表(Cascading Style Sheets)"
2.CSS樣式的語法: 選擇符{屬性:值}
3.CSS樣式代碼插入的三種形式:內聯/嵌入/外部
內聯式:就是把代碼寫在html標籤的行間樣式(不建議用這種)
嵌入式:就是把樣式寫在<style>css樣式</style>裏的
外部式:就是把css代碼寫在一個單獨的外部文件中,用<link href="css地址" rel="stylesheet" type="text/css">
4.CSS選擇器:
標籤選擇器,如 p{}
類選擇器,如 .class{}
ID選擇器,如 #id{}
子選擇器,如 .class>li{} //僅僅li的代碼有樣式
後代選擇器 .class li{} //所有li下的代碼都有樣式
通用選擇器 *{}
僞類選擇器 a:hover{color:red;} //css3新增容許給html不存在的標籤設置樣式
分組選擇器 h1,span{}
5.元素分類
塊級元素:div,p,h1...h6,ol,ul,table,address,blockquote,form //{display:block}
行內元素:a,span,b,strong,i,em,label //{display:inline}
6.css佈局模型:
基本文檔流
浮動佈局
絕對佈局 position:absolute絕對 relative相對 fixed固定
絕對定位:相對於父級
相對定位:相對於之前的定位
固定定位:相對於窗口
7.居中
水平居中
text-align:center //對父元素進行設置
margin:0 auto //對子元素進行設置
8.清除浮動有哪些方式？比較好的方式是哪種？
（1）父級div定義height。
（2）結尾處加空div標籤clear:both。
（3）父級div定義僞類:after和zoom。
（4）父級div定義overflow:hidden。
（5）父級div定義overflow:auto。
（6）父級div也浮動，須要定義寬度。
（7）父級div定義display:table。
（8）結尾處加br標籤clear:both。
比較好的是第3種方式，好多網站都這麼用。css

清除浮動：html

方法1：給父div添加overflow：hidden；

這種方式就是讓瀏覽器檢查父div有沒有height，若是沒有由子div的高度給它撐開。overflow的底層原理還有待研究。css3

缺點：不能和position一塊兒用，當給一個元素定位的時候，超出父div的部分會被隱藏。瀏覽器

方法3：在父div中定義一個clearFix僞類，設置::after屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .div1{
            width:400px;
            background:pink;
        }
        .div2{
            width:100px;
            height:100px;
            background:orange;
            float:left;
        }
        .clearFix::after{
            content: "";
            height: 0;
            visibility: hidden;
            clear:both;
            display: block;     /*before和after默認狀況下添加的是行內類型的元素，而這裏須要添加塊級元素。*/
            zoom:1;            /*解決ie6的兼容性，ie6瀏覽器不認識僞元素*/
        }
    </style>
</head>
<body>
    <div class="div1 clearFix">  
        <div class="div2"></div>
    </div>
</body>
</html>

其實這種方式和方法2原理同樣都是在父div裏面添加一個空div。可是這種方法比較靈活，能夠將clearFix的css屬性代碼放在css初始化的文件裏，哪裏須要清除浮動就在父級上添加一個clearFix的僞類便可。目前好多大型網站都在使用這種方式（網易、騰訊、新浪等等）。佈局

1. CSS——CSS樣式
2. 【CSS】理解CSS
3. CSS Tools: Reset CSS
4. CSS——CSS基礎
5. CSS之CSS hack
6. CSS：關於CSS Hack
7. CSS animation & CSS animation 101
8. CSS+DIV-CSS與Javascript
9. css樣式 --- CSS hack
10. CSS 框架 Blueprint CSS
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
• 適用於PHP初學者的學習線路和建議

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。