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