css常用樣式總結

php中世界最好的语言原創: 2018-05-24 15:28:241541瀏覽

這次帶給大家css常用樣式總結，使用Css常用樣式的注意事項有哪些，以下就是實戰案例，一起來看一下。

居中

佈局中居中是很重要的技術，掌握居中的技巧，對佈局相當重要，

input

1.去除外邊框：outline : none
2.去除內邊距：padding : 0
3.移除type="number"類型的上下自旋按鈕：

input::-webkit-outer-spin-button {-webkit-appearance: none; }
input::-webkit-inner-spin-button {-webkit-appearance: none; }
input[type="number"]{-moz-appearance:textfield;}
注意：使用 number 时，安卓下可以调出数字键盘，并且只能输入数字，苹果手机不可以。

4. type="search" : 調出手機軟鍵盤搜索，在蘋果手機中需要使用from標籤，

input::-webkit-search-cancel-button {display:none} 去除小差号
-webkit-appearance: textfield; 去除默认样式

background

1.background-image : 後面必須跟隨圖片路徑，如，background-image:url(xxx.jpg),url(xxx.png),...
2.background-position : 使用時需要與對應路徑的圖片保持一致，如，background-position:0 0,100px 100px,...
3.background-repeat : 使用規則與background-position 相同
4.background-color : 設定背景色
注意：使用background 時，如果不是使用多背景，可以使用複合寫法。如果不是，分開寫避免背景顯示有誤。需要強調如果使用了 background-image, 他的後面只能跟 url。
需要設定位置使用 background-position，是否重複使用 background-repeat，否則會出錯。

box-shadow

box-shadow: h-shadow v-shadow blur spread color inset;
1.h-shadow : 必要。水平陰影的位置。允許負值。 [ 相對於最近邊界的位置 ]
2.v-shadow : 必需。垂直陰影的位置。允許負值。 [ 相對於最近邊界的位置 ]
3.blur : 可選。模糊長度 [ 實際長度是給定長度的一半 ]
4.spread : 可選。陰影的尺寸。 [ 可以為負值 ]
5.color : 可選。陰影的顏色。請參閱 CSS 顏色值。
6.inset : 可選。將外部陰影 (outset) 改為內部陰影。

說明：
1.h-shadow 與v-shadow 都為0 時表示不偏移，表示四周擴散
2.blur : 表示模糊長度，實際模糊距離是設定值的一半
3.設定指定邊，主要控制水平和垂直陰影的位置，可以分別指定沒有個方向的陰影位置如分別指定四邊：
.box{ box-shadow: 0 -2px 0 0 red, 2px 0 0 0 red, 0 2px 0 0 red, -2px 0 0 0 red;}
4.可以使用該屬性取代border 的邊框屬性，好處是陰影不佔空間，動效不會出現移動
如：
box{background:green;width:200px;height:200px;}
// 做了位置處理，否則會對佈局造成影響
.box1:hover{border:2px solid # ffffff;box-sizing:border-box;position:relative;top:-2px;left:-2px; }
.box2:hover{box-shadow:0 0 0 0 2px #ffffff;}

font

1.font-size-adjust ：設定字體在小字體時更易讀，
例如，設定字體為100px，那麼設定值為0.58，也就是小尺寸時是58px，這樣顯示比較易讀。詳情

2.-webkit-text-size-adjust手機預設為 auto, 自動調整字體大小，一般情況需要關閉該功能，設定 none 或 100% 值，否則可能會導致樣式出問題。

user-modify

user-modify有三個屬性值：write-only(只寫)、read-write(讀寫)、read-only(唯讀)，用於普通元素的可編輯性和concenteditable屬性功能類似。使用時需要加瀏覽器前綴。測試發現火狐並不支援

visibility

與opacity區別在於，當使用時屬性設定為hidden，佔據空間，但不會影響事件的觸發。例如一個使用了hidden屬性的元素完全遮蓋了另外的元素，被遮蓋的元素事件依然正常觸發。且自己本身的事件不會觸發。透過設定visible屬性顯示元素

flex

理解 flex 佈局首先明白抓住2點

第一：父盒子屬性。在父親盒子中理解 2 個軸。

水平方向

flex-direction : 属性决定主轴的方向（即项目的排列方向）
    row : 横向，按元素顺序，居左[主轴为水平方向，起点在左端]
    row-reverse ：横向，倒序，居右[主轴为水平方向，起点在右端]
    column ：纵向，按元素顺序，[主轴为垂直方向，起点在上沿]
    column-reverse : 纵向，倒序[主轴为垂直方向，起点在下沿]
flex-wrap : 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行
    nowrap : （默认）不换行，盒子会自适应
    wrap : 换行，第一行在上方
    wrap-reverse : 换行，第一行在下方
flex-flow ：<flex-direction> || <flex-wrap> 合并写法
justify-content : 属性定义了项目在主轴上的对齐方式，控制水平方向
flex-start : 左对齐
flex-end : 右对齐
center : 水平居中
space-between : 子元素间隔相等并自适应
space-around : 子元素两端间隔自适应

垂直方向

align-items : 属性定义项目在交叉轴上如何对齐，控制垂直方向
    flex-start : 上对齐
    flex-end : 下对齐
    center : 垂直居中
    baseline : 文字低端对齐
    stretch : 如果项目未设置高度或设为auto，将占满整个容器的高度( 默认值 )
align-content ：属性定义了多根轴线的对齐方式。
 如果项目只有一根轴线，该属性不起作用。( 多个轴 )，控制垂直方向
    flex-start : 多轴上对齐
    flex-end : 多轴上下对齐
    center : 多轴居中
    space-between ： 两端对齐，均分剩余空间

第二：子盒子屬性

order : 指定元素权重，默认为 0，权重越大，对应的元素越靠后。在使用时注意 flex-direction 的属性值
flex-grow ：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
        分配空间的权重，按权重比均分剩余空间(注意是宽度，不包含 padding 和 margin )
flex-shrink : 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
        值为 0 ：不缩小
flex-basis ：定义了在分配多余空间之前，项目占据的主轴空间（main size）。
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
flex : 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self : 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。[注意换行]
    auto ：默认值
    flex-start ：上对齐
    flex-end ：下对齐
    center : 垂直居中
    baseline : 文本基线对齐(设置所有的item)

其他

 1. 去除苹果点击事件的灰色阴影:-webkit-tap-highlight-color: rgba(0,0,0,0);有些元素需要设置背景色。
 2. 溢出出现省略号 : white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
 3. 指定宽度数字不换行，需要指定换行属性：overflow:hidden; word-wrap:break-word;
 4. 文字平滑：-webkit-font-smoothing：none: 无抗锯齿；subpixel-antialiased (default): 次像素平滑 常见于Mac OS和MacType For Windows；antialiased: 灰度平滑 常用于Android和iOS等移动设备的

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！