當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

webapp入门到实战_web前端入门到实战：前端高手在CSS 开发效率的必备片段

發布時間：2024/7/23 HTML 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 webapp入门到实战_web前端入门到实战：前端高手在CSS 开发效率的必备片段小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

這篇文章會記錄我們平時常用到的 CSS 片段，使用這些 CSS 可以幫助我們解決許多實際項目問題中遇到的，墻裂建議點贊收藏再看，方便日后查找

清除浮動

浮動給我們的代碼帶來的麻煩，想必不需要多說，我們會用很多方式來避免這種麻煩，其中我覺得最方便也是兼容性最好的一種是，在同級目錄下再創建一個

// 清除浮動

.clearfix:after {

content: "\00A0";

display: block;

visibility: hidden;

width: 0;

height: 0;

clear: both;

font-size: 0;

line-height: 0;

overflow: hidden;

}

.clearfix {

zoom: 1;

}

垂直水平居中

在 css 的世界里水平居中比垂直居中來的簡單一些，經過了多年的演化，依然沒有好的方式來讓元素垂直居中(各種方式各有優缺點，但都不能達到兼容性好，破壞力小的目標)，以下是幾種常見的實現方式

絕對定位方式且已知寬高

position: absolute;

top: 50%;

left: 50%;

margin-top: -3em;

margin-left: -7em;

width: 14em;

height: 6em;

絕對定位＋未知寬高＋ translate

position: absolute;

left: 50%;

top: 50%;

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

//需要補充瀏覽器前綴

flex 輕松搞定水平垂直居中(未知寬高)

display: flex;

align-items: center;

justify-content: center;

文本末尾添加省略號

當文本的內容超出容器的寬度的時候，我們希望在其默認添加省略號以達到提示用戶內容省略顯示的效果。

寬度固定，適合單行顯示...

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

寬度不固定，適合多行以及移動端顯示

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;

制造文本的模糊效果

當我們希望給文本制造一種模糊效果感覺的時候，可以這樣做

color: transparent;

text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);

動畫實現簡潔 loading 效果

我們來實現一個非常簡潔的 loading 效果

.loading:after {

display: inline-block;

overflow: hidden;

vertical-align: bottom;

content: "\2026";

-webkit-animation: ellipsis 2s infinite;

}

// 動畫部分

@-webkit-keyframes ellipsis {

from {

width: 2px;

}

to {

width: 15px;

}

自定義文本選中樣式

默認情況下，我們在網頁上選中文字的時候，會給選中的部分一個深藍色背景顏色(可以自己拿起鼠標試試)，如果我們想自己定制被選中的部分的樣式呢？

// 注意只能修改這兩個屬性字體顏色選中背景顏色

element::selection {

color: green;

background-color: pink;

}

element::-moz-selection {

color: green;

background-color: pink;

}

頂角貼紙效果

有時候我們會有這樣的需求，在一個列表展示頁面，有一些列表項是新添加的、或者熱度比較高的，就會要求在其上面添加一個貼紙效果的小條就像 hexo 默認博客的 fork me on github 那個效果一樣。

接下來我們開始一步步完成最左邊的這個效果

html

Fork me on GitHub

css

/* 外層容器幾本設置 */

.wrap {

width: 160px;

height: 160px;

overflow: hidden;

position: relative;

background-color: #f3f3f3;

}

.ribbon {

background-color: #a00;

overflow: hidden;

white-space: nowrap;

position: absolute;

/* shadom */

-webkit-box-shadow: 0 0 10px #888;

-moz-box-shadow: 0 0 10px #888;

box-shadow: 0 0 10px #888;

/* rotate */

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform: rotate(-45deg);

/* position */

left: -50px;

top: 40px;

}

.ribbon a {

border: 1px solid #faa;

color: #fff;

display: block;

font: bold 81.25% "Helvetica Neue", Helvetica, Arial, sans-serif;

margin: 1px 0;

padding: 10px 50px;

text-align: center;

text-decoration: none;

/* shadow */

text-shadow: 0 0 5px #444;

}

input 占位符

當我們給部分 input 類型的設置 placeholder 屬性的時候，有的時候需要修改其默認的樣式。

input::-webkit-input-placeholder {

color: green;

background-color: #f9f7f7;

font-size: 14px;

}

input::-moz-input-placeholder {

color: green;

background-color: #f9f7f7;

font-size: 14px;

}

input::-ms-input-placeholder {

color: green;

background-color: #f9f7f7;

font-size: 14px;

}

移動端可點擊元素去處默認邊框

在移動端瀏覽器上，當你點擊一個鏈接或者通過 Javascript 定義的可點擊元素的時候，會出現藍色邊框，說實話，這是很惡心的，怎么去掉呢?

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

首字下沉

要實現類似 word 中首字下沉的效果可以使用以下代碼

element:first-letter {

float: left;

color: green;

font-size: 30px;

}

小三角

在很多地方我們可以用得上小三角，接下來我們畫一下四個方向的三角形

.triangle {

/* 基礎樣式 */

border: solid 10px transparent;

}

/*下*/

.triangle.bottom {

border-top-color: green;

}

/*上*/

.triangle.top {

border-bottom-color: green;

}

/*左*/

.triangle.top {

border-right-color: green;

}

/*右*/

.triangle.top {

border-left-color: green;

}

可以看出畫一個小三角非常簡單，只要兩行樣式就可以搞定，對于方向只要想著畫哪個方向則設置反方向的樣式屬性就可以

鼠標手型

一般情況下，我們希望在以下元素身上添加鼠標手型a

submit

input[type="iamge"]

input[type="button"]

button

label

select

a[href],

input[type="submit"],

input[type="image"],

input[type="button"],

label[for],

select,

button {

cursor: pointer;

}

屏蔽 Webkit 移動瀏覽器中元素高亮效果

在訪問移動網站時，你會發現，在選中的元素周圍會出現一些灰色的框框，使用以下代碼屏蔽這種樣式

-webkit-touch-callout: none;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

移除常用標簽的瀏覽器默認的 margin 和 padding

pre、code、legend、fieldset、blockquote … 等標簽不是很常用，所以就不一一列舉，如果項目中使用到，可以自己單獨寫

body,

h1,

h2,

h3,

h4,

h5,

h6,

dl,

dd,

ul,

ol,

th,

td,

button,

figure,

input,

textarea,

form {

margin: 0;

padding: 0;

}

統一 input、select、textarea 寬度

不同瀏覽器的 input、select、textarea 的盒子模型寬度計算方式不同，統一為最常見的 content-box

input,

select,

textarea {

-webkit-box-sizing: content-box;

-moz-box-sizing: content-box;

box-sizing: content-box;

}

table {

/*table 相鄰單元格的邊框間的距離設置為 0*/

border-spacing: 0;

/*默認情況下給 tr 設置 border 沒有效果，如果 table 設置了邊框為合并模式：「border-collapse: collapse;」就可以了*/

border-collapse: collapse;

}

移除瀏覽器部分元素的默認邊框

acronym、fieldset … 等其他標簽不是很常用，就不會一一列舉；如果項目中用到，可以自己單獨寫

img,

input,

button,

textarea {

border: none;

-webkit-appearance: none;

}

input {

/*由于 input 默認不繼承父元素的居中樣式，所以設置：「text-align: inherit」*/

text-align: inherit;

}

textarea {

/*textarea 默認不可以放縮*/

resize: none;

}

取消元素 outline 樣式

由于以下元素的部分屬性沒有繼承父節點樣式，所以聲明這些元素的這些屬性為父元素的屬性

h1,

h2,

h3,

h4,

h5,

h6,

input,

select,

button,

option,

textarea,

optgroup {

font-family: inherit;

font-size: inherit;

font-weight: inherit;

font-style: inherit;

line-height: inherit;

color: inherit;

outline: none;

}

取消超鏈接元素的默認文字裝飾

另外 del、ins 標簽的中劃線、下劃線還是挺好的，就不去掉

a {

text-decoration: none;

}

ol,

ul {

/*開發中 UI 設計的列表都是和原生的樣式差太多，所以直接給取消 ol，ul 默認列表樣式*/

list-style: none;

}

button,

input[type="submit"],

input[type="button"] {

/*鼠標經過是「小手」形狀表示可點擊*/

cursor: pointer;

}

input::-moz-focus-inner {

/*取消火狐瀏覽器部分版本 input 聚焦時默認的「padding、border」*/

padding: 0;

border: 0;

}

取消部分瀏覽器數字輸入控件的操作按鈕

input[type="number"] {

-moz-appearance: textfield;

}

input[type="number"]::-webkit-inner-spin-button,

input[type="number"]::-webkit-outer-spin-button {

margin: 0;

-webkit-appearance: none;

}

輸入控件 placeholder 色設置 #999

input::-webkit-input-placeholder,

textarea::-webkit-input-placeholder {

color: #999;

}

input:-moz-placeholder,

textarea:-moz-placeholder {

color: #999;

}

input::-moz-placeholder,

textarea::-moz-placeholder {

color: #999;

}

input:-ms-input-placeholder,

textarea:-ms-input-placeholder {

color: #999;

}

template {

/*由于部分瀏覽 template 會顯示出來，所以要隱*/

display: none;

}

position: fixed 的縮寫

.pf {

position: fixed;

/*chrome 內核瀏覽器 position: fixed 防止抖動*/

-webkit-transform: translateZ(0);

}

利用絕對定位寬高拉升原理，中心居中元素

.middle {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

}

利用相對定位于 CSS3 使元素垂直居中

.v-middle {

position: relative;

top: 50%;

-webkit-transform: -webkit-translateY(-50%);

-moz-transform: -moz-translateY(-50%);

-o-transform: -o-translateY(-50%);

transform: translateY(-50%);

}

元素計算寬高的盒子模型以 border 為外界限「bb ==> border-box」

.bb {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

單行文本溢出顯示省略號「to ==> text-overflow」

.to {

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

}

初始化樣式

不同的瀏覽器對各個標簽默認的樣式是不一樣的，而且有時候我們也不想使用瀏覽器給出的默認樣式，我們就可以用 reset.css 去掉其默認樣式

body,

h1,

h2,

h3,

h4,

h5,

h6,

hr,

blockquote,

dl,

dt,

dd,

ul,

ol,

li,

pre,

form,

fieldset,

legend,

button,

input,

textarea,

th,

td {

margin: 0;

padding: 0;

}

body,

button,

input,

select,

textarea {

font: 12px/1.5 tahoma, arial, \5b8b\4f53;

}

h1,

h2,

h3,

h4,

h5,

h6 {

font-size: 100%;

}

address,

cite,

dfn,

em,

var {

font-style: normal;

}

code,

kbd,

pre,

samp {

font-family: couriernew, courier, monospace;

}

small {

font-size: 12px;

}

ul,

ol {

list-style: none;

}

a {

text-decoration: none;

}

a:hover {

text-decoration: underline;

}

sup {

vertical-align: text-top;

}

sub {

vertical-align: text-bottom;

}

legend {

color: #000;

}

fieldset,

img {

border: 0;

}

button,

input,

select,

textarea {

font-size: 100%;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

強制換行/自動換行/強制不換行

/* 強制不換行 */

div {

white-space: nowrap;

}

/* 自動換行 */

div {

word-wrap: break-word;

word-break: normal;

}

/* 強制英文單詞斷行 */

div {

word-break: break-all;

}

table 邊界的樣式

table {

border: 1px solid #000;

padding: 0;

border-collapse: collapse;

table-layout: fixed;

margin-top: 10px;

}

table td {

height: 30px;

border: 1px solid #000;

background: #fff;

font-size: 15px;

padding: 3px 3px 3px 8px;

color: #000;

width: 160px;

}

絕對定位與 margin

當我們提前知道要居中元素的長度和寬度時，可以使用這種方式：

.container {

position: relative;

width: 300px;

height: 200px;

border: 1px solid #333333;

}

.content {

background-color: #ccc;

width: 160px;

height: 100px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -80px; /* 寬度的一半 */

margin-top: -50px; /* 高度的一半 */

}

絕對定位與 transform

當要居中的元素不定寬和定高時，我們可以使用 transform 來讓元素進行偏移。

.container {

position: relative;

width: 300px;

height: 200px;

border: 1px solid #333333;

}

.content {

background-color: #ccc;

position: absolute;

top: 50%;

left: 50%;

transform: translate3d(-50%, -50%, 0);

text-align: center;

}

line-height

line-height其實是行高，我們可以用行高來調整布局！

不過這個方案有一個比較大的缺點是：文案必須是單行的，多行的話，設置的行高就會有問題。

.container {

width: 300px;

height: 200px;

border: 1px solid #333333;

}

.content {

line-height: 200px;

}

table 布局

給容器元素設置display: table，當前元素設置display: table-cell：

.container {

width: 300px;

height: 200px;

border: 1px solid #333333;

display: table;

}

.content {

display: table-cell;

vertical-align: middle;

text-align: center;

}

flex 布局

我們可以給父級元素設置為display: flex，利用 flex 中的align-items和justify-content設置垂直方向和水平方向的居中。這種方式也不限制中間元素的寬度和高度。

同時，flex 布局也能替換line-height方案在某些 Android 機型中文字不居中的問題。

.container {

width: 300px;

height: 200px;

border: 1px solid #333333;

display: flex;

align-items: center;

justify-content: center;

}

.content {

background-color: #ccc;

text-align: center;

}

圖片上下左右居中

一種常用的方式是把外層的 div 設置為 table-cell；然后讓內部的元素上下左右居中。當然也還有一種方式，就是把 img 當做 div，參考 6 中的代碼進行設置。

CSS 代碼如下：

.content {

width: 400px;

height: 400px;

border: 1px solid #ccc;

text-align: center;

display: table-cell;

vertical-align: middle;

}

html 代碼如下：

標題兩邊的小橫杠

我們經常會遇到這樣的 UI 需求，就是標題兩邊有兩個小橫崗，之前是怎么實現的呢？比如用個border-top屬性，然后再把中間的文字進行絕對定位，同時給這個文字一個背景顏色，把中間的這部分蓋住。

現在我們可以使用偽元素來實現！

標題

title {

color: #e1767c;

font-size: 0.3rem;

position: relative;

&:before,

&:after {

content: "";

position: absolute;

display: block;

left: 50%;

top: 50%;

-webkit-transform: translate3d(-50%, -50%, 0);

transform: translate3d(-50%, -50%, 0);

border-top: 0.02rem solid #e1767c;

width: 0.4rem;

}

&:before {

margin-left: -1.2rem;

}

&:after {

margin-left: 1.2rem;

}

用 border 屬性繪制元素

border 除了作為簡單的繪制邊框以外，還可以繪制三角形，梯形，星形等任意的多邊形，以下為繪制的兩個三角形和梯形

.triangle1 {

/*銳角三角形*/

width: 0;

height: 0;

border-top: 50px solid transparent;

border-bottom: 100px solid #249ff1;

border-left: 30px solid transparent;

border-right: 100px solid transparent;

}

.triangle2 {

/*直角三角形*/

width: 0;

height: 0;

border-top: 80px solid transparent;

border-bottom: 80px solid #ff5b01;

border-left: 50px solid #ff5b01;

border-right: 50px solid transparent;

}

.trapezoid {

/*梯形*/

width: 0;

height: 0;

border-top: none;

border-right: 80px solid transparent;

border-bottom: 60px solid #13dbed;

border-left: 80px solid #13dbed;

}

用 border-radius 繪制元素

border-radius主要用于繪制圓點、圓形、橢圓、圓角矩形等形狀，以下為簡單繪制的兩個圖形。

.circle,

.ellipse {

width: 100px;

height: 100px;

background: #249ff1;

border-radius: 50%;

}

.ellipse {

width: 150px;

background: #ff9e01;

}

但border-radius屬性實際上可以設置最多 8 個值，通過改變 8 個值可以得到許多意想不到的圖像

用 box-shadow 繪制元素

對于box-shadow，其完整的聲明為box-shadow: h-shadow v-shadow blur spread color inset,各個值表示的意義分別為：s 水平方向的偏移，垂直方向的便宜，模糊的距離(羽化值)，陰影的大小(不設置或為 0 時陰影與主體的大小一致)，陰影的顏色和是否使用內陰影。實際應用時可以接收 3-6 個值，對應分別如下：3 個值： h-shadow v-shadow color

4 個值： h-shadow v-shadow blur color

5 個值： h-shadow v-shadow blur spread color

6 個值： h-shadow v-shadow blur spread color inset

同時，border-shadow接受由多個以上各種值組成的以逗號分隔的值，通過這一特性，我們可以實現如多重邊框的等效果。以下我們用該屬性來實現一個單標簽且不借助偽元素的添加圖標和代表目標的的圖標。

.plus {

width: 30px;

height: 30px;

margin-left: 50px; /*由于box-shadow不占空間，常常需要添加margin來校正位置*/

background: #000;

box-shadow: 0 -30px 0 red, 0 30px 0 red, -30px 0 0 red, 30px 0 0 red;

}

.target {

width: 30px;

height: 30px;

background: red;

border-radius: 50%;

margin-left: 50px;

box-shadow: 0 0 0 10px #fff, 0 0 0 20px red, 0 0 0 30px #fff, 0 0 0 40px red;

}

使用 CSS 漸變來繪制圖標

CSS3 的漸變屬性十分強大，理論上通過漸變可以繪制出任何的圖形，漸變的特性和使用足足可以寫一篇長文，以下為一個例子

.gradient {

position: relative;

width: 300px;

height: 300px;

border-radius: 50%;

background-color: silver;

linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(

335deg,

#b00 23px,

transparent 23px

), linear-gradient(155deg, #d00 23px, transparent 23px);

background-size: 58px 58px;

background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;

}杯子

.cup {

display: inline-block;

width: 0.9em;

height: 0.4em;

border: 0.25em solid;

border-bottom: 1.1em solid;

border-radius: 0 0 0.25em 0.25em;

}

cup:before {

position: absolute;

right: -0.6em;

top: 0;

width: 0.3em;

height: 0.8em;

border: 0.25em solid;

border-left: none;

border-radius: 0 0.25em 0.25em 0;

content: "";

}心形

.heart {

display: inline-block;

margin-top: 1.5em;

width: 50px;

height: 50px;

background: green;

}

.heart:before,

.heart:after {

position: absolute;

width: 1em;

height: 1.6em;

background: #000;

border-radius: 50% 50% 0 0;

content: "";

bottom: 0;

}

.heart:before {

-webkit-transform: rotate(45deg);

-webkit-transform-origin: 100% 100%;

right: 0;

background: red;

opacity: 0.5;

z-index: 5;

}

.:after {

-webkit-transform: rotate(-45deg);

-webkit-transform-origin: 0 100%;

left: 0;

opacity: 0.8;

}相機

.camera {

display: inline-block;

border-style: solid;

border-width: 0.65em 0.9em;

border-radius: 0.1em;

}

.camera:before {

position: absolute;

top: -0.3em;

left: -0.3em;

width: 0.4em;

height: 0.4em;

border-radius: 50%;

border: 0.1em solid #fff;

box-shadow: 0 0 0 0.08em, 0 0 0 0.16em #fff;

content: "";

}

.camera:after {

position: absolute;

top: -0.5em;

left: 0.5em;

width: 0.2em;

border-top: 0.125em solid #fff;

content: "";

}月亮

.moon {

display: inline-block;

height: 1.5em;

width: 1.5em;

box-shadow: inset -0.4em 0 0;

border-radius: 2em;

transform: rotate(20deg);

}

浮動類

常規浮動 list 浮動 image 浮動

.float-left {

float: left;

}

.float-right {

float: right;

}

.float-li li,/*定義到li父元素或祖先元素上*/ li.float-li {

float: left;

}

.float-img img,/*定義到img父元素或祖先元素上*/ img.float-li {

float: left;

}

.float-span span,/*定義到span父元素或祖先元素上*/ span.float-span {

float: right;

}

背景圖片嵌入與定位

.bg-img {