css常見問題有哪些

小編給大家分享一下css常見問題有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)建站主要為客戶提供服務(wù)項目涵蓋了網(wǎng)頁視覺設(shè)計、VI標(biāo)志設(shè)計、全網(wǎng)整合營銷推廣、網(wǎng)站程序開發(fā)、HTML5響應(yīng)式網(wǎng)站建設(shè)公司、成都做手機(jī)網(wǎng)站、微商城、網(wǎng)站托管及網(wǎng)站維護(hù)、WEB系統(tǒng)開發(fā)、域名注冊、國內(nèi)外服務(wù)器租用、視頻、平面設(shè)計、SEO優(yōu)化排名。設(shè)計、前端、后端三個建站步驟的完善服務(wù)體系。一人跟蹤測試的建站服務(wù)標(biāo)準(zhǔn)。已經(jīng)為成都高空作業(yè)車租賃行業(yè)客戶提供了網(wǎng)站營銷服務(wù)。

1. CSS 中 inline 元素可以設(shè)置 padding 和 margin 嗎？

行內(nèi)元素設(shè)置width,height無效。但是設(shè)置margin和padding是有效的。

行內(nèi)非替換元素的外邊距不會改變一個元素的行高

<!--  常見的塊級元素 -->div, form, table, header, aside, section, article,  figure, figcaption, h2~h7, nav, p, pre, blockqoute, canvas, ol, ul,  dl<!-- 常見的行內(nèi)元素 -->span, a, img, label, input, select, textarea,  br, i, em, strong, small, button, sub, sup, code

2. CSS box-sizing 的值有哪些？

允許您以特定的方式定義匹配某個區(qū)域的特定元素。

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

一般在做自適應(yīng)的網(wǎng)頁設(shè)計的時候用，用這個屬性網(wǎng)頁結(jié)構(gòu)才不會被破壞。

常用的值：

content-box，border和padding不計算入width之內(nèi)

padding-box，padding計算入width內(nèi)

border-box，border和padding計算入width之內(nèi)，其實就是怪異模式了~

兼容性

-webkit-box-sizing: 100px; // for ios-safari, android

-moz-box-sizing:100px; //for ff

box-sizing:100px; //for other

3. CSS BFC 原理？

BFC(block formatting context)塊級格式化上下文。是一個html盒子，里面的元素左對齊

定義：

float的值不為none

position的值不為static或者relative

display的值為 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一個

overflow的值不為visible

毗鄰塊盒子的垂直外邊距折疊只有他們是在同一BFC時才會發(fā)生。如果他們屬于不同的BFC，他們之間的外邊距將不會折疊

BFC的作用

1、 清除內(nèi)部浮動

我們在布局時經(jīng)常會遇到這個問題：對子元素設(shè)置浮動后，父元素會發(fā)生高度塌陷，也就是父元素的高度變?yōu)?。解決這個問題，只需要把把父元素變成一個BFC就行了。常用的辦法是給父元素設(shè)置overflow:hidden。

2、 垂直margin合并

在CSS當(dāng)中，相鄰的兩個盒子的外邊距可以結(jié)合成一個單獨(dú)的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結(jié)合成的外邊距稱為折疊外邊距。

折疊的結(jié)果：

兩個相鄰的外邊距都是正數(shù)時，折疊結(jié)果是它們兩者之間較大的值。

兩個相鄰的外邊距都是負(fù)數(shù)時，折疊結(jié)果是兩者絕對值的較大值。

兩個外邊距一正一負(fù)時，折疊結(jié)果是兩者的相加的和。

這個同樣可以利用BFC解決。關(guān)于原理在前文已經(jīng)講過了。

3、 創(chuàng)建自適應(yīng)兩欄布局

在很多網(wǎng)站中，我們?？吹竭@樣的一種結(jié)構(gòu)，左圖片+右文字的兩欄結(jié)構(gòu)。

在圖片和文字的樣式中都加入overflow:hidden使他變?yōu)閴K級格式化上下文。

3. HTML5 和 CSS3 新特性？

html5：語義化標(biāo)簽；增強(qiáng)型表單；視頻和音頻；canvas；svg繪圖；地理定位；拖放api；webworker；storage（sessionStorage和localStorage）；webSocket；

HTML5的十大新特性

css3:

（1） CSS3實現(xiàn)圓角（border-radius），陰影（box-shadow），邊框圖片border-image

（2） 對文字加特效（text-shadow、），強(qiáng)制文本換行（word-wrap），線性漸變（linear-gradient）

（3）旋轉(zhuǎn),縮放,定位,傾斜：transform:rotate(90deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);

（4） 增加了更多的CSS選擇器、多背景、rgba()；

（5）在CSS3中唯一引入的偽元素是 ::selection ；

（6） 媒體查詢(@media)，多欄布局（flex）

CSS 清除浮動的方法？

也就是防止元素高度塌陷

1、父元素變?yōu)锽FC塊級格式化上下文overflow:hidden;

缺點(diǎn)：元素溢出無法控制顯示，不要用

2、clear:{

clear:both;

}

3、偽元素after和before，clear:both

IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout

<style type="text/css">

.clearfix:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

} .clearfix { display: inline-block;

} /* for IE/Mac */ </style><!--[if IE]>

<style type="text/css">

.clearfix {

zoom: 1;/* triggers hasLayout */

display: block;/* resets display for IE/Win */

}

</style>

<![endif]-->

鑒于 IE/Mac的市場占有率極低,我們直接忽略掉,最后精簡的代碼如下:

.clearfix:after {

content:".";

display:block;

height:0;

visibility:hidden;

clear:both;

}

.clearfix {

*zoom:1;

}

1) display:block 使生成的元素以塊級元素顯示,占滿剩余空間;

2) height:0 避免生成內(nèi)容破壞原有布局的高度。

3) visibility:hidden 使生成的內(nèi)容不可見，并允許可能被生成內(nèi)容蓋住的內(nèi)容可以進(jìn)行點(diǎn)擊和交互;

4）通過  content:"."生成內(nèi)容作為最后一個元素，至于content里面是點(diǎn)還是其他都是可以的，,有些版本可能content  里面內(nèi)容為空,不推薦這樣做的,firefox直到7.0 content:”"  仍然會產(chǎn)生額外的空隙；after在元素之后插入content的內(nèi)容。

5）zoom：1 觸發(fā)IE hasLayout。

通過分析發(fā)現(xiàn)，除了clear：both用來閉合浮動的，其他代碼無非都是為了隱藏掉content生成的內(nèi)容，這也就是其他版本的閉合浮動為什么會有font-size：0，line-height：0。

4、CSS 實現(xiàn)左右垂直居中的方法？

CSS水平垂直居中常見方法總結(jié)

1、元素在文檔流里是緊密布局的，不能直接使用top left直接移動元素，容易造成混亂。

使用position:relative;元素在文檔流中位置不浮動來改變元素的居中。

content{

margin-top:-50% of height;<--偽代碼-->

position:relative;

top:50%;<--或者使用transform:translateY(50%);-->}

2、彈性布局flex

body {

display: flex;

align-items: center; /*定義body的元素垂直居中*/

justify-content: center; /*定義body的里的元素水平居中*/

}

.content {

width: 300px;

height: 300px;

background: orange;

}

3、將父容器設(shè)置為display:table

然后將子元素也就是要垂直居中顯示的元素設(shè)置為 display:table-cell 。

但是，這是不值得推薦的，因為會破壞整體的布局

用過哪種 CSS 預(yù)處理器，簡單介紹一下？

談?wù)凜SS預(yù)處理器

目前最主流的CSS預(yù)處理器是LESS、SASS和Stylus

5、介紹幾種 CSS 偽類？

添加一些選擇器的特殊效果。

格式是：選擇器：偽類

after 元素后插入內(nèi)容

before 元素之前插入內(nèi)容

empty 元素內(nèi)空的子元素

6、 CSS 選擇器優(yōu)先級？

精華帖CSS選擇器優(yōu)先級總結(jié)

id > 類選擇器 > 標(biāo)簽選擇器>

7、 使用過的 CSS 布局方式？

圣杯布局、雙飛翼布局、Flex布局和絕對定位布局

8、 CSS display 屬性的值及作用？

display 屬性規(guī)定元素應(yīng)該生成的框的類型。

其中常用的的有none、inline、block、inline-block。分別的意思是：

1) none： 元素不會顯示，而且改元素現(xiàn)實的空間也不會保留。但有另外一個 visibility: hidden， 是保留元素的空間的。

2)  inline：  display的默認(rèn)屬性。將元素顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。我們知道內(nèi)聯(lián)元素是無法設(shè)置寬高的，所以一旦將元素的display 屬性設(shè)為  inline， 設(shè)置屬性height和width是沒有用的。此時影響它的高度一般是內(nèi)部元素的高度（font-size）和padding。

3) block： 將元素將顯示為塊級元素，元素前后會帶有換行符。設(shè)置為block后，元素可以設(shè)置width和height了。元素獨(dú)占一行。

4) inline-block：行內(nèi)塊元素。這個屬性值融合了inline 和 block 的特性，即是它既是內(nèi)聯(lián)元素，又可以設(shè)置width和height。

9、 CSS單位 rem 和 em 的區(qū)別？

px是固定的像素，一旦設(shè)置了就無法因為適應(yīng)頁面大小而改變。

em和rem相對于px更具有靈活性，他們是相對長度單位，意思是長度不是定死了的，更適用于響應(yīng)式布局。

對于em和rem的區(qū)別一句話概括：em相對于父元素，rem相對于根元素。

10、 標(biāo)準(zhǔn)盒子模型和css盒子模型的區(qū)別。

（1）有兩種， IE 盒子模型、W3C 盒子模型；

（2）盒模型： 內(nèi)容(content)、填充(padding)、邊界(margin)、 邊框(border)；

（3）區(qū) 別： IE的content部分把 border 和 padding計算了進(jìn)去;

以上是“css常見問題有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁題目：css常見問題有哪些
分享鏈接：http://muchs.cn/article10/pdjido.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、企業(yè)網(wǎng)站制作、網(wǎng)站制作、、網(wǎng)站收錄、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)