內核

內核	瀏覽器	前綴
webkit	Safari（蘋果）	webkit
webkit/Blink	Chrome （谷歌）	webkit
Gecko	firefox (火狐)	moz
presto/webkit/Blink	Opera（歐朋）	o
Trident	IE瀏覽器的內核	ms

html

<!DOCTYPE html>

<!-- 不是標記，是宣告

宣告當前檔案的型別及版本

作用：告訴瀏覽器該檔案的型別，讓瀏覽器決議的時候以正確的規范來決議檔案

doc = document 檔案

type = 型別

html = 超文本標記語言(網頁) 版本型別 html5

-->

<head>

<!-- 提供一些對機器可讀的資訊

charset 字符設定統一設定網頁的字符編碼格式 utf-8 定義的是萬國碼

-->

</head>

<body>

</body>

</html>

html標記的屬性

n 屬性總是在開始標記中，以名值對形式出現: name="value"

n 屬性值始終被引號引起來，標簽的屬性推薦使用雙引號（相同引號不能相互包含）

n 屬性和屬性值對大小寫不敏感，推薦小寫

文本格式

<strong> 加粗，強調，著重有語意的標記 </strong>

<b>加粗的效果,bold 無語意的標記</b>

<em>傾斜，強調，著重有語意的標記</em>

<i> 傾斜的效果，italic 無語意的標記</i>

顯示中文拼音

<ruby>

饕<rt>tāo</rt>

</ruby>

<ruby>

餮<rt>tiè</rt>

</ruby>

路徑

相對路徑：從當前檔案路徑與要參考的檔案或檔案夾的路徑關系

/ 下一級

./ 當前目錄

../ 上一級目錄

../../ 上上級目錄

絕對路徑：從盤符開始，服務器端

鏈接

href 路徑

target _self (默認)當前視窗打開

_blank 新視窗打開

title 滑鼠懸停的提示

盒模型

內容 - content

包含width和height

max-width和max-height

設定元素的最大寬度和最大高度

min-width和min-height

設定元素的最小寬度和最小高度

box-sizing

box-sizing:content-box | border-box;

標準盒模型的計算方式：

盒子的總寬度= width + padding + border + margin

怪異盒模型(IE盒模型)

盒子的總寬度= width(包含padding+border) + margin

表格

單元格間距單元格padding

rowspan 縱合并 colspan 橫合并

css屬性：

border-collapse: collapse;

權值

1.層疊性

2.繼承性

繼承屬性： font- line- color text- ，除text-decoration

3.優先級

！important 1000 > id 100 > class 10 > 標簽 1 > 通配符 * 0

！important高于行間樣式，但沒有自己本身樣式優先級高

font | text

font-weight:normal | bold 粗體 | bolder 更粗

100-500不加粗 600以上加粗 700=bold 900=bolder

font-style : normal | italic

line-height : normal| length | number 數字會與字體大小相乘，倍數行距

font:font-style font-weight font-size/line-height font-family;

必須同時有font-size和font-family;順序不能更換

text-align || text-align-last 最后一行對齊方式，一行

justify 兩端對齊

行內元素無效，

text-decoration : none || underline 下劃 || overline 上劃 || line-through 洗掉線

單位

em 相對單位 | 相對當前元素的font-size屬性

rem 相對單位 |（html）的font-size計算

fr相對單位 | 0.3fr 表示占剩余空間的0.3倍

margin傳遞與塌陷

父子關系

現象：給子標簽設定上外邊距時，會和父盒子的外邊距重合，最終表現其中較大值的外邊距，

原因：父子盒子公用了一個上外邊距的區域

解決方法：

1. 給父級盒子設定邊框或者是內邊距

2. 給父標簽設定overflow:hidden;屬性,觸發BFC規則（塊級格式背景關系），把父元素渲染成一個獨立的區域，

兄弟關系

現象：上一個盒子設定下外邊距，下一個盒子設定上外邊距，最侄訓顯示其中較大值的外邊距，

原因：上下兩個兄弟關系的盒子共用了一個外邊距區域

解決方法：

1. 給兩個盒子各套一個父盒子，父盒子添加overflow:hidden;屬性

2. 給其中某一個盒子設定外邊距

BFC

什么是BFC？

一個瀏覽器渲染元素的規則（塊格式背景關系）

如何觸發元素的BFC規則？

元素浮動元素絕對定位元素型別為inline-block等 overflow不等于默認值visible

BFC規則具體表現：

父元素的上下邊距不再合并父元素的高度會將浮動元素計算在內

浮動

父元素設定高度（比較死板）

父元素overflow:hidden | scroll | auto

最后加一個空的塊標簽，該標簽設定clear : left | right | both

偽元素創建

.clearfix:after{

content: '';

display: block;

clear: both;

}

.clearfix{ /* 用來解決ie7及以下版本不兼容偽元素問題 */

*zoom: 1;

}

定位

position:static | relative | absolute | fixed;

static （定位的不定位）默認值

z-index定位才有效

定位浮動區別

float 脫離檔案流，不脫離文本流

position 脫離檔案流，也脫離文本流

脫標后，margin:auto;無效

vertical-align

vertical-align : baseline 基線對齊 | top | middle 居中 |bottom 底端對齊

只作用display：inline-block屬性；用來做垂直對齊方式的

去掉img下方3px間隙

父元素

font-size:0px;

line-height:0px;

img

display:block;

img

vertical-align，除baseline以外的值

顯示隱藏

隱藏：

1. display:none; 隱藏

2. visibility:hidden; 隱藏，所占的空間保留

顯示：

1. display:block; 轉塊顯示

2. visibility:visible; 顯示

overflow屬性

overflow

overflow-x 只包括水平方向

overflow-y 只包括垂直方向

visible 默認值，顯示，不裁剪

hidden 內容直接被裁剪隱藏

scroll 內容會被隱藏，但是瀏覽器可以顯示上下和左右滾動條顯示隱藏的內容

auto 內容會被隱藏，瀏覽器會根據具體的情況顯示上下或者左右滾動條顯示內容

透明

opacity :0-1之間 ie8- 不兼容

rgba() 透明背景顏色，元素不透明ie8- 不兼容

filter:Alpha(opacity=x) IE 透明背景及內容僅支持ie6，7，8，9；IE10被廢除

meta標簽

author 作者

keywords 定義關鍵字

description 定義描述

viewport 手機瀏覽器的視窗大小，

device-width 瀏覽器視窗的寬度與手機寬度保持一致

initial-scale=0.5' 讓網頁縮放為原來的0.5倍

user-scalable=no 不允許用戶縮放

每30秒鐘重繪當前頁面:

網頁圖示

css的書寫順序

布局定位屬性 - 自身屬性 - 文本屬性 - 其他屬性

float/position/display || 盒模型 + background || 文本屬性：text- font- line- list- color

表單

button : submit || reset || button

name選項中，分組的作用

input ： text || password || radio || checkbox ||

file || image || button || submit || reset || hidden ||

url || email || search || number || color

tel 電話號碼

range 滑動條

date 日期年月日日歷表

datetime 日期時間 UTC

datetime-local 本地日期時間年月日時分日歷表

month 月份年月日歷表

time 時間時分時鐘

week 周

input屬性

value 初始值

placeholder 提示資訊

checked 默認選中，選中單選按鈕和復選框

multiple 可以選擇多個檔案

size 下拉串列可見數

maxlength 最大長度值

readonly 只讀狀態，只讀不可以寫入

disabled 禁用，不可讀，不可寫

selected 默認選中下拉串列中的項

pattern 驗證input的模式，pattern的值是正則運算式

autocomplete：自動填充 on 打開 off 關閉

autofocus 自動獲得焦點

required 必填欄位（不能為空）

<select> 默認選中

</select>

textarea{

resize:none; /*重置元素大小*/

}

css屬性

outline: none;

去除選中邊框

resize: none;

- none 無法調整元素的尺寸

- both 可調整元素的寬度和高度

- vertical 可調整元素的高度

- horizontal 可調整元素的寬度

input[type = "checkbox"]:checked{/* 被選中的多選框 */

appearance: none;/* 外觀：無 */

}

datalist

<input type="text" list="car"> 獲取焦點自動顯示選項car

</datalist>

<form id="login"> 提交系結 login 提交

</form>

文本溢位隱藏

單行溢位隱藏

.box{

/* 1.設定元素的寬度 */

width:400px;

/* 2.不換行 */

white-space: nowrap;

/* 3.超出的內容溢位隱藏 */

overflow: hidden;

/* 4.以省略號顯示隱藏的內容 */

/* text-overflow: clip; 直接裁剪 */

text-overflow:ellipsis; /*以省略號顯示隱藏的內容*/

}

多行溢位隱藏-webkit-內核

只有內核是-webkit-的瀏覽器

.box1{

/* 1.設定元素的寬度 */

width:400px;

/* 改變元素為box彈性盒子 */

display: -webkit-box;

/* 限定行數不是一個規范的屬性，沒有在css規范草案中 */

-webkit-line-clamp: 2;

/* 檢索伸縮盒子物件的子元素的排列方式 */

-webkit-box-orient: vertical;

/* 設定溢位隱藏 */

overflow: hidden;

/* 隱藏的文本以省略號顯示 */

text-overflow: ellipsis;

}

多行溢位隱藏兼容較好

.box2{

/* 1.限定寬度 */

width:400px;

border: solid;

margin: auto;

/* 2.限定高度以及行高，并且行高與高度要成比例 */

height: 60px;

line-height: 30px;

position: relative;

overflow: hidden;

}

.box2:after{

content:'...';

position: absolute;

right:0px;

bottom:0px;

background: #fff;

padding-left:4px;

}

多欄布局

兩欄布局

兩欄自適應:兩列布局，左側固定寬度，右側盒子自適應

? 1.左右兩個盒子，左邊固定寬度，右邊設定100%

? 2.給左側盒子設定position:absolute

? 3.右側盒子內部添加一個子盒子，給子盒子設定padding-left，值為左側盒子的寬度

.left{

width:200px;

height:100px;

background: pink;

position: absolute;

}

.right{

width:100%;

height: 100px;

background: greenyellow;

}

.inner{

padding-left:200px;

background: red;

}

<div >

<div >right</div>

</div>

圣杯布局

1. 三個盒子都浮動,并且設定一個position:relative;

2. 中間盒子的寬度設定100%占滿

3. 要把左邊盒子拉倒最左邊，通過使用margin-left:-100%;

4. 左邊盒子上去之后會覆寫中間的一部分內容，要把中間的內容拉出來，在外圍的wrap盒子設定padding-left,值為左邊盒子的寬度

5. 中間盒子的內容被拉回來，但是左邊盒子也回來了，給左邊設定定位并且設定偏移量屬性left，值為盒子寬度的負值，還原盒子的位置

6. 右邊同理左邊

.wrap{

padding-left:200px;

padding-right:200px;

}

.left,.right,.center{

float: left;

position: relative;

}

.left,.right{

width:200px;

height:100px;

}

.left{

background: greenyellow;

margin-left:-100%;

left:-200px;

}

.right{

background: pink;

margin-left:-200px;

right:-200px;

}

.center{

width:100%;

height: 100px;

background: yellow;

}

<div >

<div >center</div>

<div >right</div>

</div>

雙飛翼布局

雙飛翼布局：左右兩欄固定寬度，中間盒子自適應(中間盒子必須放在最前面)

?1.html結構中，中間的盒子必須放在最前面

?2.將三個盒子都浮動

?3.中間盒子main占滿100%

?4.將左邊盒子拉倒最左邊，margin-left:-100%;右邊盒子放到最右邊

?5.中間盒子的內容被左右盒子覆寫了，在中間盒子內部添加一個子元素，給子元素設定margin:0px 200px;

.left,.right,.main{

float: left;

}

.left,.right{

width:200px;

height:100px;

opacity: 0.5;

}

.left{

background: yellowgreen;

margin-left: -100%;

}

.right{

background: pink;

margin-left:-200px;

}

.main{

width:100%;

height:100px;

background: yellow;

}

.inner{

background: red;

margin:0px 200px;

}

<div >

<div >center</div>

</div>

<div >right</div>

等高布局

等高布局：多列子元素在父元素中實作等高視覺效果的布局技巧

? 多個列需要自己的背景顏色

? 一列變高，其他列的高度都要變化

利用內外邊距抵消法

- 優點：結構簡單，兼容所有瀏覽器，比較容易理解

- 缺點：偽等高，需要合理的控制margin和padding的值

.box{

width:900px;

margin: auto;

overflow: hidden;

}

.box:after{

content:'';

clear: both;

display: block;

}

.box div{

width:300px;

float: left;

padding-bottom: 999px;

margin-bottom: -999px;

}

.col1{

background: pink;

}

.col2{

background: greenyellow;

}

.col3{

background: yellow;

}

.test{

height: 100px;

background: #000;

}

/* 利用內外邊距抵消法 */

<div >

<div >等高布局：多列子元素在父元素中實作</div>

</div>

嵌套法

給每一個盒子嵌套一個背景，通過內容撐開父元素的高度的原理

- 優點：兼容各種瀏覽器，方便擴展創建任意列數

- 缺點：結構嵌套復雜，難以理解

.wrap{

width:900px;

margin:auto;

overflow: hidden;

}

.bg1{

background: pink;

}

.bg2{

background: yellowgreen;

position: relative;

left: 300px;

}

.bg3{

background: yellow;

position: relative;

left:300px;

}

.bg3:after{

content: '';

clear: both;

display: block;

}

.bg3 div{

width:300px;

float: left;

position: relative;

}

.bg3 .col1{

margin-left:-600px;

}

.bg3 .col2{

margin-left:-300px;

}

<div >

<div >第一列給每一個盒子嵌套一個背景給每一個盒子嵌套一個背景給每一個盒子嵌套一個背景給每一個盒子嵌套一個背景給每一個盒子嵌套一個背景</div>

</div>

多列布局

被分隔的列數

column-count:number | auto;

元素的列寬

column-width:auto | length;

列寬

column-gap:length | normal;

邊框線樣式，是一個簡寫：column-rule-*: color width style;

column-rule:width color style;

H5布局標簽

header footer nav

article 定義一段獨立的檔案區域

section 章節，標題和段落組成

aside 側邊欄

hgroup 標題和子標題進行分組

</hgroup>

其他的標簽

figure 定義了圖片的文本內容

<figcaption> 定義figure的標題 </figcaption>

</figure>

注意：一個figure里面只能有一個figcaption

mark 標記標簽

time 標記定義日期或時間

標簽的兼容

1、利用JavaScript新增元素的方式

js代碼通過js創建的元素是行內元素

document.createElement('header');

js創建的元素是行內元素，需要使用display:block; 轉塊級元素

2、使用封裝好的插件，引入js檔案（html5shive.js）

<!--[if lt ie 9]>

<![endif]-->

多媒體

視頻<video>

- src 規定要播放的視頻的路徑

- controls 播放控制元件

- loop 回圈播放

- muted 靜音播放

- autoplay 自動播放（靜音屬性才有效）

- poster 預覽圖

- width 寬度

- height 高度

音頻<audio>

- src 規定要播放的音頻的路徑

- controls 播放控制元件

- loop 回圈

- muted 靜音播放

資源標簽

<video>

</video>

autoprefixer自動生成前綴

1. 在擴展 - 搜索”autoprefixer“ - 安裝

2. 在“管理” - “安裝另外一個版本” 2.2.0

3. 在css檔案中，按“f1"，選擇 “autoprefixer CSS”

選擇器

? attr 選擇屬性

? attr=value 選擇屬性匹配屬性值

? attr ~= value 選擇器屬性匹配屬性值詞組

? attr ^= value 選擇屬性匹配屬性值以value開頭

? attr $ = value 選擇屬性匹配屬性值以value結束

? attr *= value 選擇屬性匹配屬性值包含value

結構偽類

:first-child 選取屬于父元素的首個子元素

:last-child 選取屬于父元素的最后一個子元素

:nth-child(n) 選取屬于父元素的第n個子元素

:nth-last-child(n) 選取屬于父元素的第n個子元素，從最后一個子元素開始計數

:nth-of-type(n) 選取屬于父元素的特定型別的第n個子元素

:nth-last-of-type(n) 選取屬于父元素的特定型別的第n個子元素，從最后一個子元素開始

狀態偽類

a:link 正常的，未訪問過的

a:visitied 訪問過后的

a:active 激活中

a:hover 滑鼠懸停

注意：a:hover必須放在a:link和a:visitied之后，才有效

：checked 被選中的元素

：enabled 可用的狀態元素

：disabled 禁用狀態的元素

陰影

text-shadow:x y blur color;

box-shadow:x y blur spreed color inset;

水平垂直模糊度尺寸顏色內陰影，默認的是外陰影

background

background-image:url(),url()....;

background-size:length | % | cover | contain ;

cover:把背景圖片擴至足夠大，以使背景影像完全覆寫背景區域，

contain：把影像擴展至最大尺寸，以使其寬度和高度完全適應內容區域，

background-origin:content-box | padding-box | border-box;

content-box 背景圖片相對于內容框來定義

padding-box 背景圖片相對于內邊距框來定義

border-box 背景圖片相對于邊框線來定義

background-clip:content-box | padding-box | border-box;

content-box 背景裁剪到內容框

padding-box 背景裁剪到內邊距框

border-box 背景裁剪到邊框線

resize

resize:none | both | horizontal | vertical;

注意：如果其他元素希望該屬性生效，需要設定元素的overflow的屬性，值除了visible以外

- none 無法調整元素的尺寸

- both 可以調整元素的寬度和高度

- vertical 可以調整元素的高度

- horizontal 可以調整元素的寬度

漸變

background:linear-gradient(角度，顏色);

關鍵字：left right top bottom

? 角度值：角度的單位 deg

重復線性漸變

background:repeating-linear-gradient(角度,顏色顏色的起始位置)

漸變的值可以設定一個或多個，多個值串列之間用【逗號】隔開

徑向漸變

background:radial-gradient(中心點,顏色);

中心點取值：

關鍵字：center

background-image: radial-gradient(circle, red, yellow, green);

不同尺寸大小關鍵字的使用:

background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);

background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);

重復徑向漸變

background:repeating-radial-gradient(中心點,顏色顏色的起始位置)

兼容問題

圖片的邊框

圖片添加鏈接在IE中會出現邊框線：給圖片標簽設定

border:none;

IE 低版本的兼容

小高度（IE6-）

.box{

...

font-size:0px;

line-height:0px;

}

IE7- 子標簽相對定位時，父標簽的overflow:hidden屬性失效

/*給父元素添加position:relative;*/

IE6- 浮動時會產生雙倍邊距的bug

IE7- 塊轉行內塊不會在一行上顯示

div{

display:inline-block;

*display:inline;

*zoom:1;

}

IE7- 當li中出現兩個或以上的浮動時，li之間會產生空白間隙

li{

vertical-align:top/bottom/middle;

}

cssHack

條件Hack

<!--[if ie]>

<style>

選擇器{宣告;}

</style>

<![endif]-->

用于選擇瀏覽器及瀏覽器版本

gt 大于

gte 大于等于

lt 小于

lte 小于等于

! 非指定版本

屬性Hack

IE6- 屬性前

IE7- 屬性前

IE8-9 屬性值后

選擇符Hack

IE6-

.box{

background:yellow;

}

IE7-

.box{

background:green;

}

影片

過渡

transition：property duration timing-function delya;

property 過渡的屬性多個屬性之間用逗號隔開 none沒有過渡屬性 all所有的

duration：過渡時間 s / ms

timing-function： linear勻速 ease

delay 延遲時間

影片

1.創建影片程序 @keyframes

2.呼叫影片

animation:name duration timing-function delay iteration-count direction;

name 影片名稱，系結到 @keyframes

duration 完成影片的時間

timing-function 曲線速度 linear

delay 延遲時間

iteration-count 影片播放次數number infinite無限

direction 是否輪流反向 alternate

變換

transform:

translate(x,y) 平移

rotate(deg) 旋轉

scale(x,y) 縮放 1默認值，比1大放大，比1小縮小

skew(x,y) 傾斜單位是角度deg

translateZ() z軸平移，前后移動

translate3d(x,y,z)

rotateX() 繞x軸旋轉前后翻轉

rotateY() 繞y軸旋轉左右翻轉

rotateZ() 繞z軸旋轉水平翻轉

rotate3d(x,y,z,deg) -1 0 1 0-360deg

scaleZ() 在z軸上縮放

scale3d(x,y,z)

視距 perspective

元素的中心點 transform-origin: length | 關鍵字 | %

保留子元素的3d位置： transform-style:flat | preserve-3d;

翻轉之后看不見盒子背面

backface-visibility: hidden;

彈性盒子

display:flex/inline-flex; IE11支持，IE10-不支持

容器屬性

排列方向

flex-direction:row / row-reverse / column / column-reverse ;

對齊方式(主軸)

justify-content: flex-start / flex-end / center /space-between /space-around / space-evenly

對齊方式(交叉軸)

align-items ： stretch 默認|| flex-start || flex-end || center || baseline

flex-wrap : nowrap || wrap || wrap-reverse

專案屬性

order : 0; 數值越小，排列越靠前

flex-grow: 0;放大

flex-shrink : 1; 默認縮小

flex-basis auto;分配多余空間前，專案占據的主軸空間，

flex：flex-grow flex-shrink flex-basis;

flex:0 1 auto; 放大縮小占據主軸空間

align-self : stretch 默認|| flex-start || flex-end || center || baseline

calc() 函式

calculate 計算的縮寫,是css3新增的計算功能，用來指定元素的長度

.box{

calc(運算式);

}

運算子前后保留一個空格

grid網格布局

display: grid;

/* 網格布局 */

grid-template-rows: 20% 10% 100px auto;

/* 四行 */

grid-template-columns: 100px auto 20%;

/* 三列 */

grid-template-rows:repeat(3 , 1fr);

/* fr表示占剩余空間的1倍 */

grid-template-columns: repeat(3 , 1fr);

/* repeat表示3列都是1fr */

grid-template-areas區域劃分

.box {

width: 500px;height: 500px;

border: 1px solid #000;

display: grid;

/* 網格布局 */

/* grid-template-rows: 20% 10% 100px auto; */

/* 四行 */

/* grid-template-columns: 100px auto 20%; */

/* 三列 */

/* grid-template-rows:repeat(3 , 1fr);

grid-template-columns: repeat(3 , 1fr); */

grid-template-areas:

"a1 a1 a1"

"a2 a2 a3"

"a2 a2 a3";

/* 給每個格子起一個名字 */

}

.box div{background-color: red; border: 1px solid #000;}

.box div:nth-child(1){grid-area: a1;}

.box div:nth-child(2){grid-area: a2;}

.box div:nth-child(3){grid-area: a3;}

</style>

<body>

<div >

</div>

間距

grid-row-gap: 20px;

/* 每個網格橫向的間距 */

grid-column-gap: 10px;

/* 每個網格縱向的間距 */

復合寫法

grid-gap: 橫向縱向;

每個小格子里面的內容怎么排列

justify-items: stretch;

align-items: stretch;

復合寫法

place-items: 縱向橫向;

每個格子在大盒子的水平垂直排列類似display：flex

justify-content: start;

align-content: space-around;

復合寫法

place-content: 縱向橫向;

@media媒介查詢

@media screen and (max-width: 640px){

/* @media 媒介的意思 screen視窗的大小*/

/* 當 瀏覽器不超過640的時候使用以下樣式*/

}

@media not and (max-width: 640px){

與上面的相反大于640px才會觸發

@media screen and ( orientation: landscape)

在橫屏下觸發

@media screen and ( orientation: portrait) {

豎屏下觸發

小于400px才參考外部css

移動端樣式重置

移動端數字識別

format-detection 格式檢測

telephone 主要作用是是否設定自動將你的數字轉化為撥號連接

telephone=no 禁止把數字轉化為撥號鏈接

telephone=yes 開啟把數字轉化為撥號鏈接，默認開啟

email 告訴設備不識別郵箱，點擊之后不自動發送

email=no 禁止作為郵箱地址

email=yes 開啟把文字默認為郵箱地址，默認情況開啟

adress 跳轉至地圖功能

adress=no 禁止跳轉至地圖

adress=yes 開啟點擊地址直接跳轉至地圖的功能, 默認開啟

圓角bug：

部分Android手機圓角失效

Element{

background-clip: padding-box

}

IOS鏈接按鈕點擊時的灰色遮罩問題

button,a,textarea ,input {

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

}

IOS下按鈕和輸入框的默認樣式

button,input {

-webkit-appearance: none;

border-radius: 0;

}

禁止文本縮放

html {

-webkit-text-size-adjust: 100%;

}

禁止默認操作

body {

-webkit-user-select:none;

-webkit-touch-callout:none; /* 系統默認選單被禁用 */

}

修改placeholder樣式

input::-webkit-input-placeholder {

color:#000;

}

input:focus::-webkit-input-placeholder{

color: blue;

}

預處理

less

@import "reset.css"; /* 匯入css */

@w:1190px;/* 變數 */

使用

height:calc(@w - 1000px);

border-@{side}:10px solid @color + 200;

混入 @arguments

.boxShadow(@x,@y,@blur,@spreed,@color){

box-shadow: @arguments ;

}

.box1{

.public;

.boxShadow(0px, 0px,30px ,50px , @color)

}

繼承 :extend

.box3{

&:extend(.public);

margin:auto;

}

// 等同于

.box4:extend(.public){

margin: 50px auto;

background: green;

}

運算

.bottom{

width:(200px-20)*2;

}

scss

引入

@import "./sc/base";

變數

$yyy : 200px !default;// 默認變數只要有新值就會覆寫

#dix1{

$color : #ccc;// 區域變數

$color : #ccc !global;// 全域變數

}

#div2 {// 特殊變數 #{運算式/變數}

border-#{$zzz} : 1px solid black;

}

混入

@mixin box-shadow($shadows...) {

box-shadow: $shadows;

}

.shadows {

@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);

}

繼承 @extend

#div {

@extend .btn;// 繼承了.btn 與 .btn 下a的屬性

}

控制指令

判斷

$theme : dark;

body {

@if $theme == darl {

background-color: black;

}@else if $theme == light {

background-color: white;

}

回圈

$round : 12;

// 開始值結束值

@for $i from 1 through $round{

.col-#{$i}{

width: 100% / $round * $i;

}

$num : 5;

@while $num > 0 {

.item#{$num}{

width : $num * 2em;

}

$num : $num - 1;

}

$icons : success error waring;

@each $list in $icons {

.box-list{

background: url("#{$list}.png");

}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/280516.html

標籤：Html/Css

上一篇：TypeScript筑基筆記一：Visual Studio Code 創建Typescript檔案和實時監控

下一篇：CSS 還能這樣玩？奇思妙想漸變的藝術

HTML5+CSS3 筆記

內核

html

html標記的屬性

文本格式

路徑

鏈接

盒模型

box-sizing

表格

權值

font | text

單位

margin傳遞與塌陷

BFC

浮動

定位

定位浮動區別

vertical-align

去掉img下方3px間隙

顯示隱藏

overflow屬性

透明

meta標簽

css的書寫順序

表單

css屬性

datalist

文本溢位隱藏

單行溢位隱藏

多行溢位隱藏-webkit-內核

多行溢位隱藏 兼容較好

多欄布局

兩欄布局

圣杯布局

雙飛翼布局

等高布局

利用內外邊距抵消法

嵌套法

多列布局

H5布局標簽

多媒體

autoprefixer自動生成前綴

選擇器

陰影

background

resize

漸變

兼容問題

圖片的邊框

IE 低版本的兼容

cssHack

條件Hack

屬性Hack

選擇符Hack

影片

彈性盒子

calc() 函式

grid網格布局

grid-template-areas區域劃分

@media媒介查詢

移動端樣式重置

移動端數字識別

預處理

less

scss

多行溢位隱藏兼容較好