国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS知識點及技巧整理

EasonTyler / 1381人閱讀

摘要:當元素在容器中被滾動超過指定的偏移值時,元素在容器內固定在指定位置。詳見浮動與清除浮動浮動相關知識屬性的取值元素向左浮動。是相對長度單位,相對于當前對象內文本的字體尺寸。

這些個知識點是我個人認為的,下面我們就來看看這些個知識點。

1.怎么讓一個不定寬高的 DIV,垂直水平居中?

使用Flex

只需要在父盒子設置:display: flex; justify-content: center;align-items: center;

使用 CSS3 transform

父盒子設置:display:relative

Div 設置: transform: translate(-50%,-50%);position: absolute;top: 50%;left: 50%;

使用 display:table-cell 方法

父盒子設置:display:table-cell; text-align:center;vertical-align:middle;

Div 設置: display:inline-block;vertical-align:middle;

2.position 幾個屬性的作用 2.1 relative,absolute,fixed,static

position 的常見四個屬性值: relative,absolute,fixed,static。一般都要配合"left"、"top"、"right" 以及 "bottom" 屬性使用。

static:默認位置。 在一般情況下,我們不需要特別的去聲明它,但有時候遇到繼承的情況,我們不愿意見到元素所繼承的屬性影響本身,從而可以用Position:static取消繼承,即還原元素定位的默認值。設置為 static 的元素,它始終會處于頁面流給予的位置(static 元素會忽略任何 top、 bottom、left 或 right 聲明)。一般不常用。

relative:相對定位。 相對定位是相對于元素默認的位置的定位,它偏移的 top,right,bottom,left 的值都以它原來的位置為基準偏移,而不管其他元素會怎么 樣。注意 relative 移動后的元素在原來的位置仍占據空間。

absolute:絕對定位。 設置為 absolute 的元素,如果它的 父容器設置了 position 屬性,并且 position 的屬性值為 absolute 或者 relative,那么就會依據父容器進行偏移。如果其父容器沒有設置 position 屬性,那么偏移是以 body 為依據。注意設置 absolute 屬性的元素在標準流中不占位置。

fixed:固定定位。 位置被設置為 fixed 的元素,可定位于相對于瀏覽器窗口的指定坐標。不論窗口滾動與否,元素都會留在那個位置。它始終是以 body 為依據的。 注意設置 fixed 屬性的元素在標準流中不占位置。

2.2 sticky

position新增的屬性“sticky”:
設置了sticky的元素,在屏幕范圍(viewport)時該元素的位置并不受到定位影響(設置是top、left等屬性無效),當該元素的位置將要移出偏移范圍時,定位又會變成fixed,根據設置的left、top等屬性成固定位置的效果。

sticky屬性有以下幾個特點:

該元素并不脫離文檔流,仍然保留元素原本在文檔流中的位置。

當元素在容器中被滾動超過指定的偏移值時,元素在容器內固定在指定位置。亦即如果你設置了top: 50px,那么在sticky元素到達距離相對定位的元素頂部50px的位置時固定,不再向上移動。

比較蛋疼的是這個屬性的兼容性還不是很好,目前仍是一個試驗性的屬性,并不是W3C推薦的標準。它之所以會出現,也是因為監聽scroll事件來實現粘性布局使瀏覽器進入慢滾動的模式,這與瀏覽器想要通過硬件加速來提升滾動的體驗是相悖的。

詳見:https://blog.csdn.net/sinat_37390744/article/details/77479239
3.浮動與清除浮動 3.1 浮動相關知識

float屬性的取值:

left:元素向左浮動。

right:元素向右浮動。

none:默認值。元素不浮動,并會顯示在其在文本中出現的位置。

浮動的特性:

浮動元素會從普通文檔流中脫離,但浮動元素影響的不僅是自己,它會影響周圍的元素對齊進行環繞。

不管一個元素是行內元素還是塊級元素,如果被設置了浮動,那浮動元素會生成一個塊級框,可以設置它的width和height,因此float常常用于制作橫向配列的菜單,可以設置大小并且橫向排列。

浮動元素的展示在不同情況下會有不同的規則:

浮動元素在浮動的時候,其margin不會超過包含塊的padding。PS:如果想要元素超出,可以設置margin屬性

如果兩個元素一個向左浮動,一個向右浮動,左浮動元素的marginRight不會和右浮動元素的marginLeft相鄰。

如果有多個浮動元素,浮動元素會按順序排下來而不會發生重疊的現象。

如果有多個浮動元素,后面的元素高度不會超過前面的元素,并且不會超過包含塊。

如果有非浮動元素和浮動元素同時存在,并且非浮動元素在前,則浮動元素不會高于非浮動元素

浮動元素會盡可能地向頂端對齊、向左或向右對齊

重疊問題

行內元素與浮動元素發生重疊,其邊框,背景和內容都會顯示在浮動元素之上

塊級元素與浮動元素發生重疊時,邊框和背景會顯示在浮動元素之下,內容會顯示在浮動元素之上

clear屬性
clear屬性:確保當前元素的左右兩側不會有浮動元素。clear只對元素本身的布局起作用。
取值:left、right、both

3.2 父元素高度塌陷問題

為什么要清除浮動,父元素高度塌陷
解決父元素高度塌陷問題:一個塊級元素如果沒有設置height,其height是由子元素撐開的。對子元素使用了浮動之后,子元素會脫離標準文檔流,也就是說,父級元素中沒有內容可以撐開其高度,這樣父級元素的height就會被忽略,這就是所謂的高度塌陷。

3.3 清除浮動的方法

方法1:給父級div定義 高度
原理:給父級DIV定義固定高度(height),能解決父級DIV 無法獲取高度得問題。
優點:代碼簡潔
缺點:高度被固定死了,是適合內容固定不變的模塊。(不推薦使用)

方法二:使用空元素,如

(.clear{clear:both})
原理:添加一對空的DIV標簽,利用css的clear:both屬性清除浮動,讓父級DIV能夠獲取高度。
優點:瀏覽器支持好
缺點:多出了很多空的DIV標簽,如果頁面中浮動模塊多的話,就會出現很多的空置DIV了,這樣感覺視乎不是太令人滿意。(不推薦使用)

方法三:讓父級div 也一并浮起來
這樣做可以初步解決當前的浮動問題。但是也讓父級浮動起來了,又會產生新的浮動問題。 不推薦使用

方法四:父級div定義 display:table
原理:將div屬性強制變成表格
優點:不解
缺點:會產生新的未知問題。(不推薦使用)

方法五:父元素設置 overflow:hidden、auto;
原理:這個方法的關鍵在于觸發了BFC。在IE6中還需要觸發 hasLayout(zoom:1)
優點:代碼簡介,不存在結構和語義化問題
缺點:無法顯示需要溢出的元素(亦不太推薦使用)

方法六:父級div定義 偽類:after 和 zoom

.clearfix:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility: hidden;
}
.clearfix {zoom:1;}

原理:IE8以上和非IE瀏覽器才支持:after,原理和方法2有點類似,zoom(IE轉有屬性)可解決ie6,ie7浮動問題
優點:結構和語義化完全正確,代碼量也適中,可重復利用率(建議定義公共類)
缺點:代碼不是非常簡潔(極力推薦使用)

經益求精寫法

.clearfix:after {
    content:”200B”; 
    display:block; 
    height:0; 
    clear:both;
 }
.clearfix { *zoom:1; } 照顧IE6,IE7就可以了
詳細關于浮動的知識請參看這篇文章:[
http://luopq.com/2015/11/08/C...](http://luopq.com/2015/11/08/C...
4.BFC相關知識

定義:BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域,只有 Block-level box 參 與, 它規定了內部的 Block-level Box 如何布局,并且與這個區域外部毫不相干。

BFC布局規則
BFC 就是頁面上的一個隔離的獨立容器,容器里面的子元素不會影響到外面的元素。反之也如此。

BFC這個元素的垂直方向的邊距會發生重疊,垂直方向的距離由margin決定,取最大值

BFC 的區域不會與浮動盒子重疊(清除浮動原理)。

計算 BFC 的高度時,浮動元素也參與計算。

哪些元素會生成 BFC

根元素

float 屬性不為 none

position 為 absolute 或 fixed

display 為 inline-block, table-cell, table-caption, flex, inline-flex

overflow 不為 visible

5.box-sizing是什么

設置CSS盒模型為標準模型或IE模型。標準模型的寬度只包括content,二IE模型包括borderpadding
box-sizing屬性可以為三個值之一:

content-box,默認值,只計算內容的寬度,border和padding不計算入width之內

padding-box,padding計算入寬度內

border-box,border和padding計算入寬度之內

6.px,em,rem 的區別

px 像素(Pixel)。絕對單位。像素 px 是相對于顯示器屏幕分辨率而言的,是一個虛擬長度單位,是計算 機系統的數字化圖像長度單位,如果 px 要換算成物理長度,需要指定精度 DPI。
em 是相對長度單位,相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置, 則相對于瀏覽器的默認字體尺寸。它會繼承父級元素的字體大小,因此并不是一個固定的值。
rem 是 CSS3 新增的一個相對單位(root em,根 em),使用 rem 為元素設定字體大小時,仍然是相對大小, 但相對的只是 HTML 根元素

7.CSS 引入的方式有哪些? link 和@import 的區別是?

有四種:內聯(元素上的style屬性)、內嵌(style標簽)、外鏈(link)、導入(@import)
link和@import的區別:

link是XHTML標簽,除了加載CSS外,還可以定義RSS等其他事務;@import屬于CSS范疇,只能加載CSS

link引用CSS時,在頁面載入時同時加載@import需要頁面網頁完全載入以后加載

link是XHTML標簽,無兼容問題@import是在CSS2.1提出的,低版本的瀏覽器不支持

link支持使用Javascript控制DOM去改變樣式;而@import不支持。

8.流式布局與響應式布局的區別

流式布局
使用非固定像素來定義網頁內容,也就是百分比布局,通過盒子的寬度設置成百分比來根據屏幕的寬度來進
行伸縮,不受固定像素的限制,內容向兩側填充。

響應式開發
利用CSS3 中的 Media Query(媒介查詢),通過查詢 screen 的寬度來指定某個寬度區間的網頁布局。

超小屏幕(移動設備) 768px 以下

小屏設備 768px-992px

中等屏幕 992px-1200px

寬屏設備 1200px 以上

由于響應式開發顯得繁瑣些,一般使用第三方響應式框架來完成,比如 bootstrap 來完成一部分工作,當然也 可以自己寫響應式。

區別

- 流式布局 響應式開發
開發方式 移動Web開發+PC開發 響應式開發
應用場景 一般在已經有PC端網站,開發移動的的時候只需要多帶帶開發移動端 針對一些新建的網站,現在要求適配移動端,所以就一套頁面兼容各種終端
開發 正對性強,開發效率高 兼容各種終端,效率低
適配 只適配移動設備,pad上體驗相對較差 可以適配各種終端
效率 代碼簡潔,加載快 代碼相對復雜,加載慢
9.漸進增強和優雅降級

關鍵的區別是他們所側重的內容,以及這種不同造成的工作流程的差異

優雅降級一開始就構建完整的功能,然后再針對低版本瀏覽器進行兼容。。

漸進增強針對低版本瀏覽器進行構建頁面,保證最基本的功能,然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

區別:

優雅降級是從復雜的現狀開始,并試圖減少用戶體驗的供給

漸進增強則是從一個非常基礎的,能夠起作用的版本開始,并不斷擴充,以適應未來環境的需要

降級(功能衰減)意味著往回看;而漸進增強則意味著朝前看,同時保證其根基處于安全地帶

10.CSS隱藏元素的幾種方式及區別

display:none

元素在頁面上將徹底消失,元素本來占有的空間就會被其他元素占有,也就是說它會導致瀏覽器的重排和重繪。

不會觸發其點擊事件

visibility:hidden

display:none的區別在于,元素在頁面消失后,其占據的空間依舊會保留著,所以它只會導致瀏覽器重繪而不會重排。

無法觸發其點擊事件

適用于那些元素隱藏后不希望頁面布局會發生變化的場景

opacity:0

將元素的透明度設置為0后,在我們用戶眼中,元素也是隱藏的,這算是一種隱藏元素的方法。

visibility:hidden的一個共同點是元素隱藏后依舊占據著空間,但我們都知道,設置透明度為0后,元素只是隱身了,它依舊存在頁面中。

可以觸發點擊事件

設置height,width等盒模型屬性為0

簡單說就是將元素的marginborderpaddingheightwidth等影響元素盒模型的屬性設置成0,如果元素內有子元素或內容,還應該設置其overflow:hidden來隱藏其子元素,這算是一種奇技淫巧。

如果元素設置了border,padding等屬性不為0,很顯然,頁面上還是能看到這個元素的,觸發元素的點擊事件完全沒有問題。如果全部屬性都設置為0,很顯然,這個元素相當于消失了,即無法觸發點擊事件。

這種方式既不實用,也可能存在著著一些問題。但平時我們用到的一些頁面效果可能就是采用這種方式來完成的,比如jquery的slideUp動畫,它就是設置元素的overflow:hidden后,接著通過定時器,不斷地設置元素的height,margin-top,margin-bottom,border-top,border-bottom,padding-top,padding-bottom為0,從而達到slideUp的效果。

其他腦洞方法

設置元素的position與left,top,bottom,right等,將元素移出至屏幕外

設置元素的position與z-index,將z-index設置成盡量小的負數

11.消除圖片底部間隙的方法

圖片塊狀化 - 無基線對齊:img { display: block; }

圖片底線對齊:img { vertical-align: bottom; }

行高足夠小 - 基線位置上移:.box { line-height: 0; }

12."nth-child"和"nth-of-type"的區別

“nth-child”選擇的是父元素的子元素,這個子元素并沒有指定確切類型,同時滿足兩個條件時方能有效果:其一是子元素,其二是子元素剛好處在那個位置;“nth-of-type”選擇的是某父元素的子元素,而且這個子元素是指定類型。參考

13.CSS中的顏色體系有哪些?


參考

14. CSS流體布局下的寬度分離原則

所謂“寬度分離”原則,就是CSS中的width屬性不與影響寬度的 pading/border(有時候包括margin)屬性共存,width 獨立占用一層標簽,而padding、border、margin 利用流動性在內部自適應呈現。

舉例:元素邊框內有20px的留白問題

.father { width:102px; }
.son {
    border:1px solid;
    padding:20px;
}
15. !important問題

超越!important:max-width會覆蓋width,而且這種覆蓋是超級覆蓋,比!important的權重還要高

超越最大:min-width覆蓋max-width,此規則發生在min-width和max-width沖突的時候,如下:

.container{
    min-width:1400px;
    max-width:1200px;
}
16. 任意高度元素的展開收起動畫

使用 height + overflow:hidden 實現會比較生硬。好的方式是使用max-height

.element{
    max-height:0;
    overflow:hidden;
    transition: height .25s;
}
.element.active {
    max-height: 666px; /* 一個足夠大的最大高度值 */
}
17. 基于偽元素的圖片內容生成技術

需求:圖片還沒加載時就把 alt 信息呈現出來。

實現:圖片沒有 src ,因此,::before::after 可以生效,我們可以通過 content 屬性呈現 alt 屬性值。

img::after{
    /* 生成 alt 信息 */
    content: attr(alt);
    /* 尺寸和定位 */
    postion:absolute; bottom: 0;
    width:100%;
    background-color:rgba(0,0,0,.5);
    transform: translateY(100%);
    transition: transform .2s;
}
img:hover::after{
    transform: translateY(0);
}    

當我們給圖片添加src 屬性時圖片從普通元素變成替換元素,原本還支持的::before::after 此時全部無效,此時再hover圖片,是不會有任何信息出現的。

18. 輕松實現hover圖片變成另外一張圖片
img:hover{
    content: url(laugh-tear.png);
}

content 改變的僅僅是視覺呈現,當我們鼠標右鍵或其他形式保存這張圖片時,所保存的還是原來 src 對應的圖片。這種方法還可以用在官網標志上。

由于使用 conetnt 生成圖片無法設置圖片的尺寸,要想在移動端使用該技術,建議使用SVG圖片。

19. content屬性的特點

我們使用 content生成的文本是無法選中、無法復制的,好像設置了user-select:none聲明一般,而普通元素的文本可以被輕松選中。content生成的文本無法被屏幕閱讀設備讀取,也無法被搜索引擎抓取,因此,千萬不要自以為是地把重要的文本信息使用 content屬性生成, 因為這對可訪問性和SEO都不友好,content屬性只能用來生成一些無關緊要的內容,如裝飾性圖形或者序號之類;同樣,也不要擔心原本重要的文字信息會被 content替換,替換的僅僅是視覺層。

content 動態生成值無法獲取。content是一個非常強大的CSS屬性,其中一個強大之處就是計數器效果,可以自動累加數值。如:

.total::after{
    content: counter(icecream);
}

示例:https://jsrun.net/6VyKp

20. content換行符與打點loading效果
正在加載中...
dot {
    display: inline-block; 
    height: 1em;
    line-height: 1;
    text-align: left;
    vertical-align: -.25em;
    overflow: hidden;
}

dot::before {
    display: block;
    content: "...A..A.";
    white-space: pre-wrap;
    animation: dot 3s infinite step-start both;
}
@keyframes dot {
    33% { transform: translateY(-2em); }
    66% { transform: translateY(-1em); }
}

在線demo

21. margin:auto的應用

margin:auto的填充規則:

如果一側定值,一側auto,則 auto 為剩余空間大小

如果兩側均是 auto,則平分剩余空間

塊級元素垂直方向居中:
使用 writing-mode 改變文檔流方向

.father{
    height200px;
    writing-mode:vertical-lr;
}
.son{
    height:100px;
    margin:auto;
}

絕對定位下的margin:auto居中

.father{
    width:300px; height150px;
    position: relative;
}
.son{
    position:absolute;
    top:0; right:0; bottom:0; left:0;
    width:200px; height:100px;
    margin:auto;
}

在線效果:https://demo.cssworld.cn/4/3-5.php

22. border-width支持的關鍵字

thin:薄薄的,等同于1px

medium:(默認值)薄厚均勻,等同于3px

thick:厚厚的,等同于4px

23. border-color和color

border-color 默認顏色就是color色值,就是當沒有指定border-color顏色值的時候,會使用當前元素的color計算值作為邊框色,如:

.box{
    border: 10px solid;
    color: red;
}

此時,.box 元素的 10px 邊框顏色就是紅色。

(持續更新)

歡迎在留言區補充或提出不同的見解


延伸閱讀

你必須知道的HTTP基本概念

JavaScript ES5+ES6繼承總結

JavaScript面向對象核心知識歸納

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/51889.html

相關文章

  • 前端識點整理

    摘要:難怪超過三分之一的開發人員工作需要一些知識。但是隨著行業的飽和,初中級前端就業形勢不容樂觀。整個系列的文章大概有篇左右,從我是如何成為一個前端工程師,到各種前端框架的知識。 為什么 call 比 apply 快? 這是一個非常有意思的問題。 作者會在參數為3個(包含3)以內時,優先使用 call 方法進行事件的處理。而當參數過多(多余3個)時,才考慮使用 apply 方法。 這個的原因...

    Lowky 評論0 收藏0
  • 前端識點整理

    摘要:難怪超過三分之一的開發人員工作需要一些知識。但是隨著行業的飽和,初中級前端就業形勢不容樂觀。整個系列的文章大概有篇左右,從我是如何成為一個前端工程師,到各種前端框架的知識。 為什么 call 比 apply 快? 這是一個非常有意思的問題。 作者會在參數為3個(包含3)以內時,優先使用 call 方法進行事件的處理。而當參數過多(多余3個)時,才考慮使用 apply 方法。 這個的原因...

    snowLu 評論0 收藏0
  • CSS識點技巧整理

    摘要:當元素在容器中被滾動超過指定的偏移值時,元素在容器內固定在指定位置。詳見浮動與清除浮動浮動相關知識屬性的取值元素向左浮動。是相對長度單位,相對于當前對象內文本的字體尺寸。 這些個知識點是我個人認為的,下面我們就來看看這些個知識點。 1.怎么讓一個不定寬高的 DIV,垂直水平居中? 使用Flex 只需要在父盒子設置:display: flex; justify-content: cent...

    masturbator 評論0 收藏0
  • 面試寶典

    摘要:有談談面試與面試題對于前端面試的一些看法。動態規劃算法的思想及實現方法幫大家理清動態規劃的解決思路以及原理方法前端經典面試題從輸入到頁面加載發生了什么這是一篇開發的科普類文章,涉及到優化等多個方面。極客學院前端練習題道練習題,面試季練練手。 由數據綁定和排序引入的幾個 JavaScript 知識點 在 JavaScript 的數據綁定和做簡單的表格排序中遇到的幾個知識點 [[JS 基礎...

    neu 評論0 收藏0
  • CSS技巧 - 收藏集 - 掘金

    摘要:筆者作為一位,將工作以來用到的各種優秀資料神器及框架整理在此,畢竟好記性不如爛鍵盤,此前端知識點大百科全書前端掘金,,不定期更新技巧前端掘金技巧,偶爾更新。計算數組的極值技巧使你的更加專業前端掘金一個幫你提升技巧的收藏集。 CSS 樣式畫各種圖形 - 前端 - 掘金下面是一些我在 CSS 中經常用到的圖案,還有一些是在css-tricks看到的。記錄一下,以后會用到。會持續更新… 一、...

    Jonathan Shieber 評論0 收藏0

發表評論

0條評論

EasonTyler

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<