前端开发笔记（2）css基础（上）
CSS介紹
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。
<style type="text/css">span{color:red;font-size:14px;} </style> <body><span>css介紹</span> </body>上面就是一個典型的css樣式，給span標簽中的文本添加樣式。
在我們學習css之前先來思考一個問題，為什么html標簽上不直接改變樣式，而要將文檔結構和樣式分離，分別用html和css來表示呢？
其實這樣分離帶來的好處顯而易見，我總結了幾點：
1. 可以實現樣式重用，提高了工作效率。
2. 可以更加細致的分工開發。
3. 使文件結構更加清晰。
CSS常見的屬性
字符顏色 color:red;
字號大小 font-size:40px;
背景顏色 background-color:blue;
加粗 font-weight:bold;
不加粗 font-weight:normal;
斜體 font-style:italic;
不斜體 font-style:normal;
下劃線 text-decoration:underline;
沒有下劃線 text-decoration:normal;
基礎選擇器
標簽選擇器
<style> div{width:200px;height:200px;border:1px solid red; } </style> <body><div> </div> </body>瀏覽器顯示結果：
id選擇器
<style>#outdiv{width:200px;height:200px;background-color:green;} </style> <body><div id="outdiv"></div> </body>瀏覽器顯示結果：
類選擇器
<style type="text/css">div{border:1px solid red;}span{margin-left: 20px;border:1px solid blue;}.padding50{padding: 50px;}.floatleft{float:left;} </style> <body><div class="padding50 floatleft"></div><span class="padding50 floatleft">類選擇器</span> </body>瀏覽器顯示結果：
后迭代選擇器
特點：向后面迭代選擇（向子標簽)
<style type="text/css">.outdiv span{color:red;} </style> <body><div class="outdiv"><div><span>子標簽（孫子）</span></div></div> </body>交集選擇器
交集選擇器一般是以標簽選擇開頭，類選擇器結尾
<style type="text/css">div span.redspan{color:red;} </style> <body><div><span>span1</span><span class="redspan">sapn2</span><span>span3</span></div> </body>并集選擇器
<style type="text/css">li,span{color:red;} </style> <body><ul><li>item1</li><li>item2</li><li>item3</li></ul><span>span</span> </body>通配符選擇器
通配符使用星號*表示，意思是“所有的”。
*{padding:0;margin:0; }這里是設置所有元素的外邊距margin和內邊距padding都為0。
不過，由于*會匹配所有的元素，這樣會影響網頁渲染的時間，因此很多人開始停止使用*通配符選擇器，取而代之的是，把所有需要統一設置的元素，放在一起，一塊設置。
CSS的繼承性和層疊性
繼承性
有一些屬性，當給自己設置的時候，自己的后代都繼承上了，這個就是繼承性。
哪些屬性能繼承？
color、 text-開頭的、line-開頭的、font-開頭的。
所以，如果我們的頁面的文字，都是灰色，都是14px。那么就可以利用繼承性：
body{color:gray;font-size:14px; }層疊性
CSS層疊性是指CSS樣式在針對同一元素配置同一屬性時，依據層疊規則（權重）來處理沖突，選擇應用權重高的CSS選擇器所指定的屬性，一般也被描述為權重高的覆蓋權重低的，因此也稱作層疊。每個CSS選擇器都會有一個權重，當兩個選擇器同時配置同一元素的同一屬性時（比如一個設置color：red，另一個color：black），就會產生沖突，而解決沖突的方案就是CSS選擇器的權重，權重高的來覆蓋權重低的。
層疊權重規則：
先看標簽有沒有被選中，如果選中了以id數、類數、標簽數來計算權重，如果權重一樣大，style樣式表后面的樣式覆蓋前面的。
如果都沒有選中，權重都是0，樣式就近原則。
為了說明這個權重規則我們下面以幾個案例來解釋一下：
案例1–看有沒有選中
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">/* 樣式1 */#div1 #div2{ /* 權重 2 0 0 */color:red;}/* 樣式2 */.outdiv div span{ /* 權重 1 0 2 */color:blue;}</style> </head> <body><div class="outdiv" id="div1"><div class="innerdiv" id="div2"><span>層疊規則<span></div></div> </body>本案例中樣式1的權重明顯比樣式2大，但是樣式2直接選中了標簽。所以如果只有一個樣式直接選中標簽就不用比較了。
案例2–同時選中比權重
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">/* 樣式1 */#div1 .innerdiv span{ /* 權重 1 1 1 */color:red;}/* 樣式2 */.outdiv .innerdiv span{ /* 權重 0 2 1*/color:blue;}</style> </head> <body><div class="outdiv" id="div1"><div class="innerdiv" id="div2"><span>層疊規則<span></div></div> </body>該例中樣式1和樣式2都直接選中了span標簽，所以需要比較權重。
案例3–權重一樣看誰在后面
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">/* 樣式1 */#div1 .innerdiv span{ /* 權重 1 1 1 */color:red;}/* 樣式2 */.outdiv #div2 span{ /* 權重 1 1 1 */color:blue;}</style> </head> <body><div class="outdiv" id="div1"><div class="innerdiv" id="div2"><span>層疊規則<span></div></div> </body>上面樣式1和樣式2的權重一樣大，樣式2在后面所以顯示藍色。
案例4—都沒選中看誰近
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">/* 樣式1 */#div1 #div2 { /* 權重 2 0 0 */color:red;}/* 樣式2 */.innerdiv{ /* 權重 0 1 0 */color:blue;}</style> </head> <body><div class="outdiv" id="div1"><div class="centerdiv" id="div2"><div class="innerdiv"><span>層疊規則<span><div></div></div> </body>上面樣式1和樣式2都沒有選中span標簽，雖然樣式1的權重大，但是此時不比較權重，看誰離span標簽近，如果一樣近才比較權重。
盒模型
一個盒子中主要的屬性就5個：width、height、padding、border、margin。
margin控制的是盒子與盒子之間的距離，padding存在于盒子的內部它不涉及與其他盒子之間的關系和相互影響問題。
這個盒子width:200px; height:200px; 但是真實占有的寬高是302*302。 這是因為還要加上padding、border。
寬度和真實占有寬度，不是一個概念！！
真實占有寬度= 左border + 左padding + width + 右padding + 右border
小屬性可以疊掉大屬性
padding: 20px; padding-left: 30px; /* 將上面左邊padding覆蓋 */邊框的大屬性寫法
border-width:10px; /* 邊框寬度 */ border-style:solid; /* 線型 */ border-color:red; /* 顏色。*/border:10px solid red; /* 合在一起的寫法 */標準文檔流
標準流指的是在不使用其他的與排列和定位相關的特殊CSS規則時，各種元素的排列規則。
幾個標準流現象
空白折疊現象
<body><img src="img1.jpg"/><img src="img2.jpg"/> </body>
如果我們想讓img標簽之間沒有空隙，必須緊密連接,否則會出現一定的空隙。
底邊對齊現象
<body><span>底邊對齊現象</span><img src="img3.jpg"/><img src="img2.jpg"/> </body>自動換行，一行寫不滿后就會換行
塊級元素和行內元素
HTML文檔中的元素可以分為兩大類：行內元素和塊級元素。
行內元素不占據單獨的空間，依附于塊級元素，行內元素沒有自己的區域。它同樣是DOM樹中的一個節點，在這一點上行內元素和塊級元素是沒有區別的。
塊級元素總是以塊的形式表現出來，并且跟同級的兄弟塊依次豎直排列，左右自動伸展，直到包含它的元素的邊界，在水平方向不能并排。
常見的塊級標簽 : <div> 、h系列、<li>、<dt>、<dd>、<p>
常見的行內元素：<span>、<a>、<b>、<i>、<u>、<em>
塊級元素和行內元素可以相互轉換
display:inline; 和 display:block;標準流里面有很多限制，往往滿足不了我們對前端開發的需求，所以我們實際開發中經常需要脫離標準流限制，下一篇將介紹如何脫離標準流。
轉載于:https://www.cnblogs.com/lanzhi/p/6468411.html
總結
以上是生活随笔為你收集整理的前端开发笔记（2）css基础（上）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： js判断是否是ie浏览器
- 下一篇： 前端学HTTP之字符集