-
@media 媒體類(lèi)型and （媒體特性）{你的樣式}
(max-width: 480px)
@media screen and (max-width:480px){
.ads {
?? display:none;
? }
}
@media screen and (min-width:600px) and (max-width:900px){
? body {background-color:#f5f5f5;}
}
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />
@media not print and (max-width: 1200px){樣式代碼}
<linkrel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />
查看全部 -
通過(guò)link標(biāo)簽中的media屬性來(lái)指定不同的媒體類(lèi)型
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
@importurl(reset.css) screen;??
@importurl(print.css) print;
<head>
<style type="text/css">
??? @importurl(style.css) all;
</style>
</head>
@media screen {
?? 選擇器{/*你的樣式代碼寫(xiě)在這里…*/}
}<head>
<style type="text/css">
??? @importurl(style.css) all;
</style>
</head>
@media screen {
?? 選擇器{/*你的樣式代碼寫(xiě)在這里…*/}
}查看全部 -
flex項(xiàng)目稱(chēng)動(dòng)到左邊或右邊也取決于主軸的方向。如果flex-direction設(shè)置為row，設(shè)置justify-content控制方向；如果設(shè)置為column，設(shè)置align-items控制方向。
.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
查看全部 -
CSS中每一個(gè)元素都是一個(gè)盒模型，包括html和body標(biāo)簽元素。在盒模型中主要包括width、height、border、background、padding和margin這些屬性
從圖中可以看出padding屬性和content屬性層疊background-image屬性，層疊background-color屬性，這個(gè)是存在的，它們四者之間構(gòu)成了Ｚ軸（垂直屏幕的坐標(biāo)）多重層疊關(guān)系。但是border屬性與margin屬性、padding屬性三者之間應(yīng)該是平面上的并級(jí)關(guān)系，并不能構(gòu)成Ｚ軸的層疊關(guān)系。
box-sizing：
w3c
外盒尺寸計(jì)算（元素空間尺寸）
element空間高度＝內(nèi)容高度＋內(nèi)距＋邊框＋外距
element空間寬度＝內(nèi)容寬度＋內(nèi)距＋邊框＋外距
內(nèi)盒尺寸計(jì)算（元素大?。?br />
element高度＝內(nèi)容高度＋內(nèi)距＋邊框（height為內(nèi)容高度）
element寬度＝內(nèi)容寬度＋內(nèi)距＋邊框（width為內(nèi)容寬度）
2.IE傳統(tǒng)下盒模型（IE6以下，不包含IE6版本或”QuirksMode下IE5.5+”）
外盒尺寸計(jì)算（元素空間尺寸）
element空間高度＝內(nèi)容高度＋外距（height包含了元素內(nèi)容寬度、邊框、內(nèi)距）
element寬間寬度＝內(nèi)容寬度＋外距（width包含了元素內(nèi)容寬度、邊框、內(nèi)距）
內(nèi)盒尺寸計(jì)算（元素大?。?br />
element高度＝內(nèi)容高度（height包含了元素內(nèi)容寬度、邊框、內(nèi)距）
element寬度＝內(nèi)容寬度（width包含了元素內(nèi)容寬度、邊框、內(nèi)距）查看全部 -
column-span主要用來(lái)定義一個(gè)分列元素中的子元素能跨列多少。
column-span:all;
none
此值為column-span的默認(rèn)值，表示不跨越任何列。
all
這個(gè)值跟none值剛好相反，表示的是元素跨越所有列，并定位在列的Ｚ軸之上。查看全部 -
column-rule主要是用來(lái)定義列與列之間的邊框?qū)挾?、邊框樣式和邊框顏色column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>屬性值
屬性值說(shuō)明
column-rule-width
類(lèi)似于border-width屬性，主要用來(lái)定義列邊框的寬度，其默認(rèn)值為“medium”，column-rule-width屬性接受任意浮點(diǎn)數(shù)，但不接收負(fù)值。但也像border-width屬性一樣，可以使用關(guān)鍵詞：medium、thick和thin。
column-rule-style
類(lèi)似于border-style屬性，主要用來(lái)定義列邊框樣式，其默認(rèn)值為“none”，包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。
column-rule-color
類(lèi)似于border-color屬性，主要用來(lái)定義列邊框顏色，其默認(rèn)值為前景色color的值，使用時(shí)相當(dāng)于border-color。column-rule-color接受所有的顏色。如果不希望顯示顏色，也可以將其設(shè)置為transparent(透明色)查看全部 -
column-count: 3;
column-gap: 2em;
normal
默認(rèn)值，默值為1em（如果你的字號(hào)是px，其默認(rèn)值為你的font-size值）。
<length>
此值用來(lái)設(shè)置列與列之間的距離，其可以使用px,em單位的任何整數(shù)值，但不能是負(fù)值。查看全部 -
column-count：auto | <integer>
auto
此值為column-count的默認(rèn)值，表示元素只有一列，其主要依靠瀏覽器計(jì)算自動(dòng)設(shè)置。
<integer>
此值為正整數(shù)值，主要用來(lái)定義元素的列數(shù)，取值為大于0的整數(shù)，負(fù)值無(wú)效。查看全部 -
column-width: auto | <length>
auto
如果column-width設(shè)置值為auto或者沒(méi)有顯式的設(shè)置值時(shí)，元素多列的列寬將由其他屬性來(lái)決定，比如前面的示例就是由列數(shù)column-count來(lái)決定。
<length>
使用固定值來(lái)設(shè)置元素列的寬度，其主要是由數(shù)值和長(zhǎng)度單位組成，不過(guò)其值只能是正值，不能為負(fù)值。查看全部 -
多列布局columns屬性參數(shù)主要就兩個(gè)屬性參數(shù)：列寬和列數(shù)。
columns：<column-width> || <column-count>columns: 200px 2;查看全部 -
animation-play-state屬性主要用來(lái)控制元素動(dòng)畫(huà)的播放狀態(tài)。
參數(shù)：
其主要有兩個(gè)值：running和paused。
其中running是其默認(rèn)值，主要作用就是類(lèi)似于音樂(lè)播放器一樣，可以通過(guò)paused將正在播放的動(dòng)畫(huà)停下來(lái)，也可以通過(guò)running將暫停的動(dòng)畫(huà)重新播放，這里的重新播放不一定是從元素動(dòng)畫(huà)的開(kāi)始播放，而是從暫停的那個(gè)位置開(kāi)始播放。另外如果暫停了動(dòng)畫(huà)的播放，元素的樣式將回到最原始設(shè)置狀態(tài)。查看全部 -
animation-direction:normal | alternate [, normal | alternate]*
1、normal是默認(rèn)值，如果設(shè)置為normal時(shí)，動(dòng)畫(huà)的每次循環(huán)都是向前播放；
2、另一個(gè)值是alternate，他的作用是，動(dòng)畫(huà)播放在第偶數(shù)次向前播放，第奇數(shù)次向反方向播放。查看全部 -
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*查看全部
-
transition-duration屬性主要用來(lái)設(shè)置一個(gè)屬性過(guò)渡到另一個(gè)屬性所需的時(shí)間，也就是從舊屬性過(guò)渡到新屬性花費(fèi)的時(shí)間長(zhǎng)度，俗稱(chēng)持續(xù)時(shí)間transition-timing-function屬性指的是過(guò)渡的“緩動(dòng)函數(shù)”。主要用來(lái)指定瀏覽器的過(guò)渡速度，以及過(guò)渡期間的操作進(jìn)展情況查看全部
-
在CSS中創(chuàng)建簡(jiǎn)單的過(guò)渡效果可以從以下幾個(gè)步驟來(lái)實(shí)現(xiàn)：
第一，在默認(rèn)樣式中聲明元素的初始狀態(tài)樣式；
第二，聲明過(guò)渡元素最終狀態(tài)樣式，比如懸浮狀態(tài)；
第三，在默認(rèn)樣式中通過(guò)添加過(guò)渡函數(shù)，添加一些不同的樣式。
transition-delay:指定開(kāi)始出現(xiàn)的延遲時(shí)間
transition-timing-function:指定過(guò)渡函數(shù)
transition-duration:指定完成過(guò)渡所需的時(shí)間
transition-property:指定過(guò)渡或動(dòng)態(tài)模擬的CSS屬性查看全部
舉報(bào)
0/150
提交
取消