其實(shí)應(yīng)該跟HTML5一起說(shuō)的,但是想著更好的整理資料,所以兩邊都會(huì)更新,最近慢慢把自己的筆記從本子上搬上來(lái)著實(shí)心累!以前都是習(xí)慣性的記在我的筆記本上,因?yàn)檫€可以練練字哈哈哈(很丑),但是放到社區(qū)上,就會(huì)有種想要寫(xiě)好一點(diǎn),自己再去看多幾遍,萬(wàn)一有人看了,以免誤導(dǎo)別人,有錯(cuò)誤的話一定要指出來(lái)噢,共勉!
有部分資料參考自Github上點(diǎn)擊查看
CSS中使用列布局是什么?
看看樣子先
再看看代碼,就知道是什么了
<style type="text/css">
.magazine{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:200px; /* Firefox */
-webkit-column-gap:200px; /* Safari and Chrome */
column-gap:200px;
-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:6px outset #ff00ff;
}
</style>
1.要?jiǎng)澐侄嗌倭?對(duì)于Chrome和firefox分別需要”webkit”和“moz-column”
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
2.兩列之間需要多少差距
-moz-column-gap:200px; /* Firefox */
-webkit-column-gap:200px; /* Safari and Chrome */
column-gap:200px;
3.想要在這列之間畫(huà)一條線的話,要多寬
-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:6px outset #ff00ff;
然后就給盒子賦上class就行啦
說(shuō)一些CSS3中的文本效果
- text-shadow: y-shadow,x-shadow,blur,color;
y-shadow:必需,水平陰影的位置,允許負(fù)值
x-shadow:必需,水平陰影的位置,允許負(fù)值
blur:可選,模糊的距離
color:可選,陰影的顏色
<style type="text/css">
.special{
text-shadow: 10px 5px 5px navy;
}
</style>
看看效果
2.word-wrap的自動(dòng)換行功能,有兩個(gè)值
normal:只在允許的斷字點(diǎn)換行(瀏覽器保持默認(rèn)處理)
break-word:在長(zhǎng)單詞或 URL 地址內(nèi)部進(jìn)行換行
看看效果
我能想到的比較長(zhǎng)的單詞了......
頁(yè)面導(dǎo)入樣式時(shí)娇未，使用link和@import有什么區(qū)別法挨？
1.link屬于XHTML標(biāo)簽,除了加載CSS外,還能用于定義RSS, 定義rel連接屬性等作用,而@import是CSS提供的,只能用于加載CSS
2.頁(yè)面被加載時(shí),會(huì)同時(shí)加載link,而@import引入的CSS要等到頁(yè)面家灣在之后才加載
3.import是CSS2.1 提出的,只在IE5以上才能被識(shí)別,而link是XHTML標(biāo)簽,無(wú)兼容問(wèn)題
visibility中的collapse
collapse的作用跟hidden一樣,但是很有意思的是,collapse與hidden不同的是,在chrome和Firefox下展示是不一樣的.
<body>
<table cellspacing="0" class="table">
<tr>
<th>Fruits</th>
<th>Vegetables</th>
<th>Rocks</th>
</tr>
<tr>
<td>Apple</td>
<td>Celery</td>
<td>Granite</td>
</tr>
<tr>
<td>Orange</td>
<td>Cabbage</td>
<td>Flint</td>
</tr>
</table>
<p><button>collapse行1</button></p>
<p><button>hide行1</button></p>
<p><button>重置</button></p>
<script type="text/javascript">
var btns = document.getElementsByTagName('button'),
rows = document.getElementsByTagName('tr');
btns[0].addEventListener('click', function () {
rows[1].className = 'vc';
}, false);
btns[1].addEventListener('click', function () {
rows[1].className = 'vh';
}, false);
btns[2].addEventListener('click', function () {
rows[1].className = '';
}, false);
</script>
</body>
這里說(shuō)一下addEventListener里的false,默認(rèn)false,在冒泡階段執(zhí)行事件,如果設(shè)置為true是在捕獲階段執(zhí)行事件
看看運(yùn)行效果
在chrome下,我點(diǎn)擊collapse行1的時(shí)候是跟hidden效果一樣的!!
但是再Firefox下運(yùn)行是這樣的,效果跟display:none效果是一樣的
那么在Firefox下點(diǎn)擊hidden呢?效果也是想在chrome下一樣的!
這就是collapse和hidden的區(qū)別
盒模型
首先,盒模型有兩種,IE盒模型和標(biāo)準(zhǔn)盒模型
盒模型包括:content+padding+margin+border
我們先看看標(biāo)準(zhǔn)盒模型:
再看看IE盒模型
由此可以看出,標(biāo)準(zhǔn)盒模型的content是不包括其他部分的,但是IE盒模型的content包括padding和border的
下面安利一個(gè)很好用的畫(huà)流程圖畫(huà)什么鬼圖都好用的plugin
chrome的plugin---Gliffy Diagrams
長(zhǎng)這樣的↓
CSS中有哪些可以inherit的attribute
常用的可inherit的有:
(1)font-size
(2)color
(3)font-family
...好了還有很多,常用的也就這幾個(gè)吧我覺(jué)得
看看不能inherit的有哪些
(1)width
(2)height
(3)border
(4)padding
(5)margin
CSS中優(yōu)先級(jí)是如何計(jì)算的?
我們先看看按照選擇器權(quán)重來(lái)排序的選擇器鏈?zhǔn)窃趺礃拥?/p>
!important>行內(nèi)樣式>ID>Class>標(biāo)簽選擇器>通配符選擇器(*)>繼承
那么現(xiàn)在再來(lái)看優(yōu)先級(jí)如何計(jì)算的
去掉第一個(gè)最牛逼!important,剩下的看下面
- 行內(nèi)元素=1,0,0,0
- ID=0,1,0,0
- Class=0,0,1,0
- 標(biāo)簽選擇器=0,0,0,1
這時(shí)候應(yīng)該明白什么意思了,舉個(gè)栗子??
body div #box{color:hotpink;}
上面有兩個(gè)標(biāo)簽選擇器,有一個(gè)ID選擇器,那么優(yōu)先級(jí)運(yùn)算是這樣的
0,1,0,2
好了,這么算應(yīng)該都明白了.我們都是讀過(guò)小學(xué)的
用css實(shí)現(xiàn)小三角
.triangle{
width:0;
height:0;
border-wdth:20px;
border-style:solid;
border-color:red transparent transparent transparent;
}
這樣子
解決border的問(wèn)題
方法一:
用outline代替border;outline的邊框是在元素內(nèi)繪制,border的邊框是在元素外繪制.
但是outline不能像border一樣指定上下左右(border-left...),outline是設(shè)置四個(gè)邊的
方法二:
設(shè)置box-sizing:border-box;
border-box是在寬高內(nèi)進(jìn)行繪制邊框,還解決了padding自適應(yīng)問(wèn)題.
還有一個(gè)值是content-box,這是在寬高之外繪制邊框
