成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

前端面試CSS

light / 2575人閱讀

摘要：需要注意的是通用選擇器子選擇器和相鄰?fù)x擇器并不在這四個等級中，所以他們的權(quán)值都為。權(quán)重值大的選擇器其優(yōu)先級也高，相同權(quán)重的優(yōu)先級又遵循后定義覆蓋前面定義的情況。導(dǎo)致這一現(xiàn)象的最根本原因在于被設(shè)置了的元素會脫離文檔流。

選擇器的權(quán)重和優(yōu)先級

選擇器的類型：

id選擇器(#myid)

類選擇器(.myclassname)

標(biāo)簽選擇器(div, h1, p)

相鄰選擇器(h1 + p)

子選擇器（ul > li）

后代選擇器（li a）

通配符選擇器（*）

屬性選擇器（a[rel="external"]）

偽類選擇器（a:hover, li:nth-child）

權(quán)重分為四級：

代表內(nèi)聯(lián)樣式，如style="xxx"，權(quán)值為 1000；
代表 ID 選擇器，如#content，權(quán)值為 100；
代表類、偽類和屬性選擇器，如.content、:hover、[attribute]，權(quán)值為 10；
代表元素選擇器和偽元素選擇器，如div、p，權(quán)值為 1。

需要注意的是：通用選擇器（*）、子選擇器（>）和相鄰?fù)x擇器（+）并不在這四個等級中，所以他們的權(quán)值都為 0。 權(quán)重值大的選擇器其優(yōu)先級也高，相同權(quán)重的優(yōu)先級又遵循后定義覆蓋前面定義的情況。

盒模型

標(biāo)準(zhǔn)盒子模型：寬度=內(nèi)容的寬度（content）+ border + padding + margin

低版本IE盒子模型：寬度=內(nèi)容寬度（content+border+padding）+ margin

box-sizing屬性：

content-box：一個標(biāo)準(zhǔn)模式下的盒模型的計算方式

border-box：一個怪異模式下的盒模型的計算方式

div設(shè)置了box-sizing:border-box之后，width的寬度是內(nèi)容 + padding + 邊框的寬度（不包括margin），這樣就比較符合我們的實際要求了。

浮動float

float被設(shè)計出來的初衷是用于文字環(huán)繞效果，即一個圖片一段文字，圖片float:left之后，文字會環(huán)繞圖片.
float 的破壞性 —— float 破壞了父標(biāo)簽的原本結(jié)構(gòu)，使得父標(biāo)簽出現(xiàn)了坍塌現(xiàn)象。導(dǎo)致這一現(xiàn)象的最根本原因在于：被設(shè)置了 float 的元素會脫離文檔流。其根本原因在于 float 的設(shè)計初衷是解決文字環(huán)繞圖片的問題。大家要記住 float 的這個影響。

清除浮動 
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
.clearfix {
    *zoom: 1; /* 兼容 IE 低版本 */
}
如何實現(xiàn)水平居中

inline元素使用

text-align: center

block元素使用

margin: auto

絕對定位元素可結(jié)合left和margin實現(xiàn)，但是必須知道寬度。

.item {
    width: 300px;
    height: 100px;
    position: absolute;
    left: 50%;
    margin: -150px;
}
如何實現(xiàn)垂直居中

inline 元素可設(shè)置line-height的值等于height值，如單行文字垂直居中：

.container {
   height: 50px;
   line-height: 50px;
}

絕對定位元素，可結(jié)合left和margin實現(xiàn)，但是必須知道尺寸。

優(yōu)點：兼容性好

缺點：需要提前知道尺寸

.container {
    position: relative;
    height: 200px;
}
.item {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -20px;
    margin-left: -40px;
}

絕對定位可結(jié)合transform實現(xiàn)居中。

優(yōu)點：不需要提前知道尺寸

缺點：兼容性不好

.container {
    position: relative;
    height: 200px;
}
.item {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: blue;
}

絕對定位結(jié)合margin: auto，不需要提前知道尺寸，兼容性好

.container {
    position: relative;
    height: 300px;
}
.item {
    width: 100px;
    height: 50px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
移動端的布局用過媒體查詢嗎?

里邊

CSS : @media only screen and (max-device-width:480px) {/css樣式/}

css動畫

首先，使用@keyframes定義一個動畫，名稱為testAnimation，如下代碼，通過百分比來設(shè)置不同的 CSS 樣式，規(guī)定動畫的變化。所有的動畫變化都可以這么定義出來。

@keyframes myfirst
{
    0%   {background: red; left:0; top:0;}
    25%  {background: yellow; left:200px; top:0;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0; top:200px;}
    100% {background: red; left:0; top:0;}
}

然后，針對一個 CSS 選擇器來設(shè)置動畫，例如針對div元素設(shè)置動畫，如下：

div {
    width: 100px;
    height: 50px;
    position: absolute;

    animation-name: myfirst;
    animation-duration: 5s;
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/117446.html

相關(guān)文章

  • 前端 CSS 面試大綱

    摘要：比如說預(yù)處理器，組件化，工程化，兼容性處理等方面，這些主要是基于自己的開發(fā)經(jīng)驗業(yè)界流行技術(shù)方案進(jìn)行準(zhǔn)備。但是在開始談面試前我想先提出一個概念學(xué)霸面試模型學(xué)校的學(xué)習(xí)和公司的工作有很多相似的地方。所以對于面試，請參考上學(xué)那會兒你們班學(xué)霸的姿勢。 背景 參加完 廈門第四屆CSS Conf 后，讓我對 CSS 產(chǎn)生了新的思考。CSS 是前端必須熟練掌握并保持持續(xù)關(guān)注的技術(shù)，但是我又不想在 CS...

    mating 評論0 收藏0

  • 前端最強面經(jīng)匯總

    摘要：獲取的對象范圍方法獲取的是最終應(yīng)用在元素上的所有屬性對象即使沒有代碼，也會把默認(rèn)的祖宗八代都顯示出來而只能獲取元素屬性中的樣式。因此對于一個光禿禿的元素，方法返回對象中屬性值如果有就是據(jù)我測試不同環(huán)境結(jié)果可能有差異而就是。 花了很長時間整理的前端面試資源，喜歡請大家不要吝嗇star~ 別只收藏，點個贊，點個star再走哈~ 持續(xù)更新中……，可以關(guān)注下github 項目地址 https:...

    wangjuntytl 評論0 收藏0

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

    摘要：特意對前端學(xué)習(xí)資源做一個匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對前端學(xué)習(xí)資源做一個匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會及時更新，平時業(yè)務(wù)工作時也會不定期更...

    princekin 評論0 收藏0

  • 前端開發(fā)-從入門到Offer - 收藏集 - 掘金

    摘要：一些知識點有哪些方法方法前端從入門菜鳥到實踐老司機所需要的資料與指南合集前端掘金前端從入門菜鳥到實踐老司機所需要的資料與指南合集歸屬于筆者的前端入門與最佳實踐。 工欲善其事必先利其器-前端實習(xí)簡歷篇 - 掘金 有幸認(rèn)識很多在大廠工作的學(xué)長，在春招正式開始前為我提供很多內(nèi)部推薦的機會，非常感謝他們對我的幫助。現(xiàn)在就要去北京了，對第一份正式的實習(xí)工作也充滿期待，也希望把自己遇到的一些問題和...

    sf_wangchong 評論0 收藏0

  • 前端面試題-CSS選擇器

    摘要：一選擇器作用選擇器用于定位我們想要給予樣式的元素，但不只是在中，對的選擇器也是支持的，比如。在選被元素后插入內(nèi)容其用法和特性與相似。所有偽元素選擇器在前端面試題偽類和偽元素擴展閱讀前端面試題清除浮動前端面試題塊格式化上下文 一、CSS選擇器作用 CSS 選擇器用于定位我們想要給予樣式的 HTML 元素，但不只是在 CSS 中，JavaScript 對 CSS 的選擇器也是支持的，比如 ...

    leanote 評論0 收藏0

  • 前端面試題-CSS選擇器

    摘要：一選擇器作用選擇器用于定位我們想要給予樣式的元素，但不只是在中，對的選擇器也是支持的，比如。在選被元素后插入內(nèi)容其用法和特性與相似。所有偽元素選擇器在前端面試題偽類和偽元素擴展閱讀前端面試題清除浮動前端面試題塊格式化上下文 一、CSS選擇器作用 CSS 選擇器用于定位我們想要給予樣式的 HTML 元素，但不只是在 CSS 中，JavaScript 對 CSS 的選擇器也是支持的，比如 ...

    h9911 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<