目錄
居中
input
background
box-shadow
font
user-modify
visibility
flex
其他
首頁 web前端 js教程 css常用樣式總結

css常用樣式總結

May 24, 2018 pm 03:28 PM
css 總結

這次帶給大家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中文網其它相關文章!

推薦閱讀:

react實作選取li高亮步驟詳解

EasyCanvas繪圖庫在Pixeler專案開發中使用實戰總結

以上是css常用樣式總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1666
14
CakePHP 教程
1425
52
Laravel 教程
1324
25
PHP教程
1272
29
C# 教程
1251
24
vue中怎麼用bootstrap vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟:安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選:自定義樣式。可選:使用插件。

了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML,CSS和JavaScript的角色:核心職責 HTML,CSS和JavaScript的角色:核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

bootstrap怎麼插入圖片 bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法:直接插入圖片,使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件,可以提供響應式圖片和更多樣式。設置圖片大小,使用 img-fluid 類可以使圖片自適應。設置邊框,使用 img-bordered 類。設置圓角,使用 img-rounded 類。設置陰影,使用 shadow 類。調整圖片大小和位置,使用 CSS 樣式。使用背景圖片,使用 background-image CSS 屬性。

bootstrap怎麼寫分割線 bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法:使用 標籤,可創建水平分割線。使用 CSS border 屬性,可創建自定義樣式的分割線。

bootstrap怎麼設置框架 bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架,需要按照以下步驟:1. 通過 CDN 引用 Bootstrap 文件;2. 下載文件並將其託管在自己的服務器上;3. 在 HTML 中包含 Bootstrap 文件;4. 根據需要編譯 Sass/Less;5. 導入定製文件(可選)。設置完成後,即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

bootstrap怎麼調整大小 bootstrap怎麼調整大小 Apr 07, 2025 pm 03:18 PM

要調整 Bootstrap 中元素大小,可以使用尺寸類,具體包括:調整寬度:.col-、.w-、.mw-調整高度:.h-、.min-h-、.max-h-

bootstrap按鈕怎麼用 bootstrap按鈕怎麼用 Apr 07, 2025 pm 03:09 PM

如何使用 Bootstrap 按鈕?引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本

See all articles