面試題整理—CSS部分

NO IMAGE
目錄

HTML與css面試題梳理

使用css使元素上下居中的方法

不脫離文檔流方式

1.左右居中:加寬度,使用margin:0 auto;

上下居中:子元素的line-height與父元素height相等

2.左右居中:加寬度,使用margin:0 auto;

上下居中:給子元素加margin-bottom(避免使用margin-top,存在margin-top傳遞問題,如果使用,需要給父元素加overflow:hidden)

3.如果子元素內是文字直接使用text-align:center與line-height=height

4.水平居中:子元素margin:0 auto

垂直居中:給父元素加display: table-cell; vertical-align:

脫離文檔流方式

5.絕對定位。

父級元素position:relative;
子級元素position: absolute;
        top: 50%;
        left: 50%;
        margin-top:-1/2子級高度;
    margin-left:-1/2子級寬度;

6.絕對定位。

父元素position:relative;
子元素position:absolute;
 top:50%; left:50%;
transform: translate(-50%,-50%);(指定元素在x軸y軸的平移)

7.彈性盒模型。

給父元素加display:flex;justify-content:center(實現水平居中效果),align-items:center(實現垂直居中效果)

css選擇器有哪些?

1.標籤選擇器 div{ }
2.類選擇器  .class{ }
3.ID選擇器  #id{ }
4.通配符選擇器  *{ }
5.後代選擇器  ul li { }
6.子代選擇器 ul>li{ }(必須是緊鄰的父子關係)
7.屬性選擇器 (不常用) [標籤屬性名]{ }
8.分組選擇器  h1,div,p,a{ }
9.交集選擇器  div.div1{ }
                 div[title]{ }
10.偽類選擇器    :link 默認的狀態
                      :hover  鼠標經過的狀態
                      :active  點擊時的狀態
                      :visited  點擊後的狀態
    奇偶行 奇數:odd    li:nth-child(2n+1)
               偶數:even   li:nth-child(2n)
    第一和最後  :last-child    :first-child
同類型中第n個兄弟 :nth-of-type(n)

css3新增偽類有哪些?

面試題整理—CSS部分

請給出【Sausage】的字體顏色值

 <ul class='shopping-list' id='shop'> 
   <li><span>Milk</span></li>
   <li class='favorite' id='must-buy'>
   <span class='highlight'>Sausage</span></li>
</ul>
<style>
body{    color:grey;}
#shop .favorite:not(#shop).highlight{    color:red;}
#shop .highlight:nth-of-type(1):nth-last-of-type(1){    color:blue;}
</style>

為什麼要遵循標籤語義化:

利於SEO優化(也就是搜索引擎的抓取,搜索引擎的爬蟲也依賴於標記來確定上下文和各個關鍵字的權重);
在樣式丟失的時候,還是可以比較好的呈現結構;
更好的支持各種終端,例如無障礙閱讀和有聲小說等;
利於團隊開發和維護,W3C給我們定了一個標準,那麼團隊中都遵循這個標準,那麼代碼的差異就會縮小,
在開發和維護的時候就可以提高效率;
日常工作中怎樣遵循標籤語義化:儘量減少使用無意義標籤,例如span和div;
儘量不使用標籤本身的css屬性,例如b、font、s等標籤,如果需要這些樣式,那麼使用css樣式來進行添加;
在需要強調的部分,使用strong、em,但是樣式儘量使用css樣式來描述;
表格搭建時,使用表格頭部 表格身體 表格尾部;
列表搭建時,使用<ul>無序列表</ul> <ol>有序列表</ol> <dl>定義列表

簡述對css盒子模型的理解

盒子模型示意圖

一、簡述

圖中最內部的框是元素的實際內容,也就是元素框,
緊挨著元素框外部的是內邊距padding,
其次是邊框(border),
然後最外層是外邊距(margin),整個構成了框模型。
通常我們設置的背景顯示區域,就是內容、內邊距、邊框這一塊範圍。
而外邊距margin是透明的,不會遮擋周邊的其他元素。
那麼,元素框的總寬度 = 元素(element)的width + padding的左邊距和右邊距的值 + margin的左邊距和右邊距的值 + border的左右寬度;
元素框的總高度 = 元素(element)的height + padding的上下邊距的值 + margin的上下邊距的值 + border的上下寬度。

合併問題

兩個上下方向相鄰的元素框垂直相遇時,

外邊距會合並,
合併後的外邊距的高度等於
兩個發生合併的外邊距中較高的那個邊距值

說說box-sizing

概念

box-sizing屬性是用戶界面屬性裡的一種,這個屬性跟盒子模型有關,而且在css reset中有可能會用到它。
box-sizing : content-box|border-box|inherit;
(1) content-box ,默認值,可以使設置的寬度和高度值應用到元素的內容框。盒子的width只包含內容
即總寬度=margin+border+padding+width
(2) border-box , 設置的width值其實是除margin外的border+padding+element的總寬度。盒子的width包含border+padding+內容
    即總寬度=margin+width
很多CSS框架,都會對盒子模型的計算方法進行簡化。
(3) inherit , 規定應從父元素繼承 box-sizing 屬性的值

關於border-box的使用:

1 一個box寬度為100%,又想要兩邊有內間距,這時候用就比較好
2 全局設置 border-box 很好,首先它符合直覺,其次它可以省去一次又一次的加加減減,它還有一個關鍵作用——讓有邊框的盒子正常使用百分比寬度。

如何用css繪製一個實心三角

 .triangle {
	        width : 0;
	        height: 0;
	        border : 100px solid transparent;
	        border-top : 100px solid blue; /*這裡可以設置border的top、bottom、left、right四個方向的三角*/        }

用css繪製空心三角

思路:繪製一個大的實心黑色三角和一個小的白色實心三角,讓小白三角覆蓋在大的黑三角上即可

用css畫對號

.duihao {position: absolute;
display: none;right:
 .2rem;top: 40%;}


.duihao::before {content: '';
position: absolute;
width: 5px;
height: 15px;
color: #00CC9A;
border-bottom: 2px solid;
border-right: 2px solid;
top: 50%;
transform-origin: center;  
transform: translate(-50%, -30%) rotate(45deg); 
-webkit-transform: translate(-50%, -30%) rotate(45deg);}

如何用css畫空心圓

    div{
          width:100px;
          height:100px;
          border:2px solid #000;
          border-radius:50%;
  }

用css畫左右箭頭

 .u-icon-left{position:absolute;
              top:50%;
              right:0px;
              width:8px;
              height:8px;
              margin-top:-2px;
              border-style:solid;
              border-width:0px 0px 2px 2px;
              border-color:#ababab;
              -webkit-transform-origin: 75% 25%; 
              -webkit-transform: rotateZ(45deg);
              -webkit-transition: 100ms ease-in .1s;
              transition: 100ms ease-in .1s;}


.u-icon-arr{position:absolute;
            top:50%;
            right:0px;
            width:8px;
            height:8px;
            margin-top:-2px;
            border-style:solid;
            border-width:2px 2px 0 0;
            border-color:#ababab;
            -webkit-transform-origin: 75% 25%; 
            -webkit-transform: rotateZ(45deg);
            -webkit-transition: 100ms ease-in .1s;
            transition: 100ms ease-in .1s;}

用css繪製加減號

 .deleteicon{width: 2.13rem;
             height: 2.13rem; 
             background: #fff;
             border-radius: 100%; 
             position: absolute;
             border: 1px solid #cbcbcc;}
.deleteicon:before{position: absolute;
            content:'';
            width:1.6rem ;
            height: .15rem;
            background:#cbcbcc;
            transform:rotate(0deg);
            top:.975rem;
            left: .265rem;}
.addicon{width: 2.13rem;
        height: 2.13rem;
        background: #00cc9a;
        border-radius: 100%; 
        position: absolute;}
.addicon:before{position: absolute;
                content:'';
                width:1.6rem;
                height: 0.15rem;
                background:white;
                transform:rotate(0deg);
                top:.975rem;left: 0.265rem;}

.addicon:after{content:'';
                position: absolute;
                width: 1.6rem;
                height:0.15rem;
                background:white;
                transform:rotate(-90deg);
                top: 0.975rem;
                left: .265rem;}

用css繪製叉號

.info-close {position: fixed;
            right: calc(50% - 10px);
            width: 30px;
            height: 30px;
            background:#000;
            opacity:.6;
            border-radius: 25px;
            cursor: pointer;
            z-index: 2002;}
.info-close:before {position: absolute;
                    content:'';
                    width: 20px;
                    height: 2px;
                    background: white;
                    transform: rotate(45deg);
                    top: 14px; 
                    left: 5px;}
.info-close:after{content: '';
                  position: absolute;
                  width: 20px;
                  height: 2px;
                  background: white;
                  transform: rotate(-45deg);
                  top: 14px;left: 5px;}

什麼時候需要清除浮動,清除浮動都有哪些方法?

浮動引起了父級元素高度塌陷。

張鑫旭大神觀點:撇開浮動的“破壞性”,浮動就是個帶有方位的display:inline-block屬性。
如果我們給方塊設置display:inline-block也能達到讓它們並排顯示的效果。並且父元素的高度也不會塌陷。只不過無法控制是居左還是居右,display:inline-block只能從左往右。

清除浮動的方法:

1.給父級元素添加高度(不常用)
2.給父級元素添加overflow:hidden 屬性
   把元素拉回文檔流
3.在一組浮動元素的最後一個浮動元素後面加一段代碼
   

(不常用)
4.利用偽元素   給所有使用浮動的元素加一個clear類名

	     .cklear:after{
	                  display:block;
	                  content:"";
	                  clear:both;}

讓元素在一行顯示有幾種方式?

1.float:left(或right)

2.display:inline(或inline-block)
3.定位
無論是float浮動還是display實現並排顯示,要想並排顯示首先總寬度要小於或等於對象上級寬度,這樣才能並排顯示實現橫向排列排版佈局。

讓元素隱藏有幾種方法,及display:none 和 visibility: hidden區別 ?

這個問題引用了其他大神的文章,原鏈接不記得了,如需刪掉請告知。
1.display:none
設置元素的display為none是最常用的隱藏元素的方法。
將元素設置為display:none後,元素在頁面上將徹底消失,元素本來佔有的空間就會被其他元素佔有,也就是說它會導致瀏覽器的重排和重繪。
2.visibility:hidden
設置元素的visibility為hidden也是一種常用的隱藏元素的方法,和display:none的區別在於,元素在頁面消失後,其佔據的空間依舊會保留著,所以它只會導致瀏覽器重繪而不會重排。
visibility:hidden適用於那些元素隱藏後不希望頁面佈局會發生變化的場景
3.opacity:0
opacity屬性我相信大家都知道表示元素的透明度,而將元素的透明度設置為0後,在我們用戶眼中,元素也是隱藏的,這算是一種隱藏元素的方法。
這種方法和visibility:hidden的一個共同點是元素隱藏後依舊佔據著空間,但我們都知道,設置透明度為0後,元素只是隱身了,它依舊存在頁面中。
4.設置height,width等盒模型屬性及font-size為0
這是我總結的一種比較奇葩的技巧,簡單說就是將元素的margin,border,padding,height和width等影響元素盒模型的屬性設置成0,
如果元素內有子元素或內容,還應該設置其overflow:hidden來隱藏其子元素,這算是一種奇技淫巧。
這種方式既不實用,也可能存在著著一些問題。但平時我們用到的一些頁面效果可能就是採用這種方式來完成的,比如jquery的slideUp動畫,
它就是設置元素的overflow:hidden後,接著通過定時器,不斷地設置元素的height,margin-top,margin-bottom,border-top,
border-bottom,padding-top,padding-bottom為0,從而達到slideUp的效果。

H5新增標籤

canvas 新元素

canvas標籤定義圖形,比如圖表和其他圖像。該標籤基於 JavaScript 的繪圖 API

新多媒體元素

audio定義音頻內容
video定義視頻(video 或者 movie)
source定義多媒體資源 video和 audio
embed定義嵌入的內容,比如插件
track為諸如 video 和 audio 元素之類的媒介規定外部文本軌道。

新表單元素

datalist 定義選項列表。請與 input 元素配合使用該元素,來定義 input 可能的值。
keygen 規定用於表單的密鑰對生成器字段。
output 定義不同類型的輸出,比如腳本的輸出。

新的語義和結構元素

header 定義了文檔的頭部區域
footer 定義 section 或 document 的頁腳。
nav 定義導航鏈接的部分。
section 定義文檔中的節(section、區段)。
article 定義頁面獨立的內容區域。
figure 規定獨立的流內容(圖像、圖表、照片、代碼等等)。
figcaption 定義figure元素的標題
aside 定義頁面的側邊欄內容。
time 定義日期或時間。
command 定義命令按鈕,比如單選按鈕、複選框或按鈕
details 用於描述文檔或文檔某個部分的細節
dialog 定義對話框,比如提示框
summary 標籤包含 details 元素的標題
mark 定義帶有記號的文本。
meter 定義度量衡。僅用於已知最大和最小值的度量。
progress 定義任何類型的任務的進度。
bdi 允許您設置一段文本,使其脫離其父元素的文本方向設置。
ruby 定義 ruby 註釋(中文注音或字符)。
rt 定義字符(中文注音或字符)的解釋或發音。
rp 在 ruby 註釋中使用,定義不支持 ruby 元素的瀏覽器所顯示的內容。
wbr 規定在文本中的何處適合添加換行符。

css3新增屬性

border-radius 圓角
border-shadow 盒子陰影
background-size 背景尺寸
background-clip 背景裁剪
background-origin 背景顯示原點
text-shadow 文字陰影
text-overflow 文字隱藏的方式 裁剪/省略號
box-sizing
transform 變換 轉換
animation 動畫
transition 過渡動畫
媒體查詢 @media

px,em,rem的區別?

px像素(Pixel)。

相對長度單位。像素px是相對於顯示器屏幕分辨率而言的。(引自CSS2.0手冊)
PX特點

  1. IE無法調整那些使用px作為單位的字體大小;
  2. 國外的大部分網站能夠調整的原因在於其使用了em或rem作為字體單位;
  3. Firefox能夠調整px和em,rem。

em是相對長度單位。

相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置,則相對於瀏覽器的默認字體尺寸。(引自CSS2.0手冊)
  任意瀏覽器的默認字體高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。
那麼12px=0.75em,10px=0.625em。為了簡化font-size的換算,需要在css中的body選擇器中聲明Font-size=62.5%,
這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em,
也就是說只需要將你的原來的px數值除以10,然後換上em作為單位就行了。

em特點

  1. em的值並不是固定的;
  2. em會繼承父級元素的字體大小。
    所以我們在寫CSS的時候,需要注意兩點:
  3. body選擇器中聲明Font-size=62.5%;
  4. 將你的原來的px數值除以10,然後換上em作為單位;
  5. 重新計算那些被放大的字體的em數值。避免字體大小的重複聲明。
    也就是避免1.2 * 1.2= 1.44的現象。比如說你在#content中聲明瞭字體大小為1.2em,
    那麼在聲明p的字體大小時就只能是1em,而不是1.2em, 因為此em非彼em,
    它因繼承#content的字體高而變為了1em=12px。

rem特點

rem是CSS3新增的一個相對單位(root em,根em),這個單位引起了廣泛關注。
這個單位與em的區別在於使用rem為元素設定字體大小時,仍然是相對大小,但相對的只是HTML根元素。
這個單位可謂集相對大小和絕對大小的優點於一身,通過它既可以做到只修改根元素就成比例地調整所有字體大小,又可以避免字體大小逐層複合的連鎖反應。
目前,除了IE8及更早版本外,所有瀏覽器均已支持rem。
對於不支持它的瀏覽器,應對方法也很簡單,就是多寫一個絕對單位的聲明。
這些瀏覽器會忽略用rem設定的字體大小。

display:inline-block什麼時候會出現間隙?及解決辦法。

出現情況

<style>
*{margin:0;padding:0;}
.box{overflow-x:auto;background:#fff;white-space:nowrap;}
.box span{display:inline-block;width:100px;height:30px;line-height:30px;text-align:center;background:#f00;color:#fff;}
</style>
</head>
<body>
<div class="box">
	<span>111</span>
	<span>111</span>
	<span>111</span>
	<span>111</span>
</div>
</body>

換行造成的空白符導致的

解決辦法

方法一:
元素之間不換行,代碼如下:

  111111111111

方法二:
給其父元素設置font-size:0;給其自身設置實際需要的字號大小。
方法三:
負margin方法,需要注意的是這個間隙跟字號大小有關係的,所以間隙不是個確定值。

常見的瀏覽器及其內核

我們把瀏覽器中識別代碼繪製頁面的東西稱為瀏覽器的內核或者渲染引擎。

谷歌 chorme:webkit(v8引擎)國內大部分,安卓和IOS等等
火狐 firfow:Gecke
歐朋 Opera:presto 14代改為webkit
IE:tirdent
瀏覽器兼容:
1.W3C發佈的規範都是開發者們不斷嘗試總結下來的產物
2.每個瀏覽器為了彰顯自己的不一樣,不按照標準來,但是把標準中規定的效果用另外一種方式實現了。(寫同一個效果寫兩套代碼)

=========================================================
歡迎批評指正!

相關文章

基本數據結構梳理

android圖片裁剪拼接實現(一):Matrix基本使用

關於我對於寫博客寫文章的理解

藉助系統自帶圖片裁剪集成圖片選擇以及7.0適配