常用css總結

2021-10-10 04:27:06 字數 2825 閱讀 4440

塊級元素

a解決外邊框合併問題

border:1px solid red; 加邊框

padding:20px; 加內邊距

★★★*清空缺省內外邊距

★★ul 取消列表自帶的小點

★★.two #two tab鍵 生成div標籤

a[ title ]屬性選擇器

★★★★★★★*ul

.clearfix:before,.clearfix:after

.clearfix:after

.clearfix

css基本必寫部分

定位屬性包括定位模式和邊偏移兩部分

子絕父相

邊偏移屬性 top bottom left right

定位模式 position屬性 預設的是自動定位

static自動定位 對邊偏移無效

relative相對定位 自戀型(相對於自己來移動位置 不脫標)

absolute絕對定位 拼爹型 脫標不占有位置

父元素沒有定位,孩子將以瀏覽器為準對齊

fixed 固定定位

z-index:1;預設屬性值是0,取值越大,定位元素越居上

元素新增了絕對定位和固定定位後,元素變為行內塊模式

★★★★★★display:none; 隱藏元素 ,不占有位置

visibility:hidden;隱藏元素,占有位置 visible顯示

overflow:auto; 自動 超出就顯示滾動條

overflow:scroll; 一直顯示滾動條

★★★overflow:hidden; 溢位隱藏

text-overflow:ellipsis;超出部分隱藏 省略號代替

white-space: nowrap; /不換行/

滑鼠樣式

cursor:default; 小白

cursor:pointer; 小手

cursor:text;文字

cursor:move;移動

outline:0;取消文字框輪廓線

textarea

vertical-align:baseline; 預設基線對齊

★★★vertical-align:middle; 中線對齊

vertical-align:top; 向上對齊

精靈技術本質

css精靈是一種處理網頁背景影象的方式,

他將乙個頁面涉及到的所有零星背景圖都集中到一張大圖中,

滑動門

>

href

="#"

>

>

導航欄內容span

>

a>

li>

偽元素 ::before

div:hover::before

偽元素選擇器

過度屬性 寫在div裡面

transition:要過度的屬性 花費時間 運動曲線 何時開始;

all 0.5s;

運動曲線

ease(預設的)

2d變形

移動transform:translate(50px,50px);

transform:translatex(y,z)

transform:translate(50%);是自己盒子的一半

transform:translate3d(x,y,z);

定位盒子居中

position:absolute;

left:50%;

right:50%;

transform:translate(-50%,-50%);

縮放transform:scale(1.5,2);縮放倍數

旋轉transform: rotate (90deg);deg是度數

transform-origin:center center;(預設)調整旋轉中心點

傾斜transform:skew(30deg,0deg);

3d變形

perspective:500px; 眼睛到螢幕的距離 給父級

transform-style: preserve-3d; 子元素開啟立體空間

display:flex; 伸縮布局模式

flex-direction:column;垂直排列 row水平(預設)

min-width:300px; 最小值不縮放

max-width:300px; 最大值不縮放

flex:1; 剩餘空間分配份數

flex-direction 設定主軸的方向

justify-content 設定主軸上的子元素排列方式

預設的是 flex-start 從左到右排列

center 主軸居中對齊

space-between先兩邊貼邊 再平分剩餘空間**重要點

flex-wrap 設定子元素是否換行

nowrap不換行預設

wrap換行

align-content 設定側軸上的子元素的排列方式 多行 只能用於換行才能使用

flex-start預設值 在側軸的頭部開始排列

flex-end 在側軸尾部開始排列

center 在側軸中間顯示

space-around子項在側軸平分剩餘空間

space-between 子項在側軸先分布在兩頭 再平分剩餘空間

stretch 設定子項元素高度平方父元素高度

align-items設定側軸上的子元素的排列方式 單行

flex-flow 復合屬性 相當於同時設定flex-direction 和flew-wrap

align-self 對子項設定

order:-1 預設是0可以設定子項順序

opacity: .5; 盒子顏色半透明

常用css總結

1 只有下劃線的文字框 input style border 0 border bottom 1 solid black background 2 軟體序列號式的輸入框 script for t event onkeyup if value.length 3 document.all event.s...

css 常用總結

設定width,height是設定內容寬高,並非實際寬高及盒子模型寬高。if ie 除ie外都可識別 2.所有的ie可識別 3.只有ie5.0可以識別 4.僅ie5.0與ie5.5可以識別 5.ie5.0以及ie5.0以上版本都可以識別 6.僅ie6可識別 7.ie6以及ie6以下版本可識別 8.i...

css常用簡寫總結

css的簡寫使 精簡,而且書寫方便,常用的屬性包括以下 示例 border width 1px border style solid border color f00 簡寫為 border 1px solid f00 說明 border還可以單獨設定top,right,bottom,left每條邊的...