塊級元素
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精靈是一種處理網頁背景影象的方式,
他將乙個頁面涉及到的所有零星背景圖都集中到一張大圖中,
滑動門
>偽元素 ::beforehref
="#"
>
>
導航欄內容span
>
a>
li>
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每條邊的...