整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          CSS面試常見問題

          CSS面試常見問題

          篇文章主要是總結(jié)幾個(gè)前端面試常見的CSS面試題,希望對(duì)大家的面試有所啟示。

          一、CSS實(shí)現(xiàn)水平居中和垂直居中的方法有哪幾種?

          1、水平居中

          • 行內(nèi)元素可設(shè)置:text-align:center
          .son {
          display:inline-block;
          text-align:center;
          }
          • margin:0 auto;這種方式的寬度需要固定已知
          // 父布局的css 需要設(shè)置 overflow:hidden
          
          
          .father{
          width:100%;
          height:200px;
          overflow:hidden;//不可缺少否則margin-top不生效
          }
          
          
          .son{
          width: 100px;
          height: 100px;
          margin:50px auto ;
          }
          • table-cell
          display:table-cell; /*IE8以上及Chrome、Firefox*/
          vertical-align:middle; /*IE8以上及Chrome、Firefox*/
          • 彈性布局flex
          .father{
          display:flex;
          justity-content:center;
          align-items:center;
          }
          .father{
          display:flex;
          flex-direction:column;//改變主軸為cross axis
          justity-content:center;
          }
          • 脫離文檔流,操作對(duì)象寬度確定
          .father{
          position:relative;
          width:60%;
          height:400px;
          }
          .son{
          width:100px;
          height:160px;
          position:absolute;
          left:50%;
          top:50%;
          margin-left:-50px;
          margin-top:-80px;
          }


          2、垂直居中

          • line-height與height等高
          .son {
              height:60px;
              line-height:60px;  // line-height需要和height保持一致
              display:inline-height;
          }
          • flex 【同上】
          • table-cell 【同上】
          • 脫離文檔流,操作對(duì)象寬度確定【同上】

          二、absolute與fixed共同點(diǎn)與不同點(diǎn)

          absoluate和fixed都是position屬性的值類型。position規(guī)定元素的定位類型,取值類型如下:

          • absolute:相對(duì)父級(jí)的絕對(duì)定位,它的定位坐標(biāo)是針對(duì)相對(duì)于static定位以外的第一個(gè)父元素進(jìn)行定位。
          • fixed:相對(duì)整個(gè)文檔的絕對(duì)定位,相對(duì)于瀏覽器窗口進(jìn)行定位,用法基本與absolute一致。  
          • relative:相對(duì)定位
          • static:默認(rèn)值,無定位類型,元素定位表現(xiàn)為在跨越特定閾值前為相對(duì)定位,之后為固定定位。
          • sticky粘性定位
          • inherit:繼承父類定位類型。


          fixed和absoluate相同點(diǎn):

          1. 脫離文檔流
          2. 覆蓋非定位元素,上層顯示

          fixed和absoluate不同點(diǎn):

          1. 相對(duì)定位的父級(jí)不同,fixed相對(duì)根節(jié)點(diǎn),absoluate選擇對(duì)于static定位以外的第一個(gè)父元素進(jìn)行定位。
          2. 瀏覽器的滾動(dòng)條不會(huì)影響fixed的定位位置,absoluate會(huì)被影響【由于第一個(gè)原因?qū)е碌摹?/li>


          三、清除浮動(dòng)的方法

          CSS中經(jīng)常會(huì)出現(xiàn)使用了float浮動(dòng)元素而導(dǎo)致頁面中某些元素不能正確地顯示。那么如何清除float的浮動(dòng)帶來的副作用呢?


          1、在父元素中添加子元素,并為添加的子元素中添加clear,清除浮動(dòng)

          clear的取值如下:

          • none:不清除
          • left:清除左浮動(dòng)
          • right:清除右浮動(dòng)
          • both:清除父布局內(nèi)所有元素的浮動(dòng)
          <style>
          .clearfix {
              clear: both;
           }
          </style>
          <div class="box1">
             <div class="content1">content1</div>
              <div class="clearfix"></div>
          </div>
          <div class="box2">
              <div class="content2">content2</div>
          </div>

          2、偽元素清除clearfix

          給父級(jí)元素添加了一個(gè):after偽元素,通過清除偽元素的浮動(dòng),達(dá)到撐起父元素高度的目的。

          .clearfix:after{
              content:"";
              display:block;
              visibility:hidden;
              clear:both;
              }


          3、使用BFC清除

          通過給父元素設(shè)置:overflow:auto或者overflow:hidden。讓父元素高度被撐起來。

          <style>
          .wrap{
            width:500px;
            margin:0 auto;
            overflow:hidden;
          }
          .float{
            width:200px;
            height:200px;
            float:left;
          }
          .nofloat{
              width:300px;
              height:150px;
              overflow:hidden;
          }
          </style>
          
          
          <div class="wrap">
             <div class="float">浮動(dòng)</div>
             <div class="nofloat">清除浮動(dòng)</div>
          </div>

          四、什么是BFC?

          BFC的官方定義是:BFC(Block Formatting Context)塊格式化上下文, 是Web頁面的可視CSS渲染的一部分,是塊盒子的布局過程發(fā)生的區(qū)域,也是浮動(dòng)元素與其他元素交互的區(qū)域。簡(jiǎn)單點(diǎn)來說就是幫我們幫BFC內(nèi)的元素和BFC外的元素進(jìn)行隔離,使其不會(huì)影響到外部元素。


          BFC類型:

          • 浮動(dòng)元素(float不為none)
          • 根元素(html)
          • 絕對(duì)定位元素( position 為 absolute 或 fixed)
          • 內(nèi)聯(lián)塊 (元素具有 display: inline-block)
          • 表格單元格 (元素具有 display: table-cell,HTML表格單元格默認(rèn)屬性)
          • 表格標(biāo)題 (元素具有 display: table-caption, HTML表格標(biāo)題默認(rèn)屬性)
          • flex布局
          • overflow指定非visible的值

          五、CSS和SASS、LESS有什么區(qū)別?

          CSS(層疊樣式表)是一門非程序式語言,SASS是使用Ruby 編寫,是一種對(duì)css的一種擴(kuò)展提升,增加了規(guī)則、變量、混入、選擇器、繼承等等特性。可以理解為用js的方式去書寫,然后編譯成css。LESS受Sass的影響較大,但又使用CSS的語法,讓大部分開發(fā)者和設(shè)計(jì)師更容易上手。簡(jiǎn)單點(diǎn)說就是less、sass是屬于編譯型CSS,需要通過編譯最終生成CSS。區(qū)別如下:

          • sass和less是編譯型css,需要編譯生成CSS
          • sass、less有更為靈活的變量、函數(shù)方式實(shí)現(xiàn)配置化樣式
          • sass、less可以嵌套編寫,隔離同名樣式影響,減少代碼量

          六、rem 和 em 的區(qū)別?

          em是一種相對(duì)長(zhǎng)度單位,相對(duì)于自身元素的字號(hào)大小,如果沒有設(shè)置就參照父容器的字號(hào)大小或?yàn)g覽器默認(rèn)字號(hào)大小。remCSS3的新標(biāo)準(zhǔn)也是一種相對(duì)長(zhǎng)度單位,其相對(duì)于HTML根標(biāo)簽的字號(hào)大小。

          頁布局對(duì)網(wǎng)站的外觀特別重要,布得好,留得住用戶,增收流量;布不好,用戶逃之夭夭,還順道罵兩句。大多數(shù)Web系統(tǒng)會(huì)借用雜志或報(bào)紙那樣排版,至于為什么這樣,我不說,你也懂的,就是產(chǎn)品經(jīng)理吵架吵不過程序員時(shí),常說的:用戶教育成本低。

          在HTML中,如果是數(shù)據(jù)集(像excel那種)的布局,常用<table>標(biāo)簽,如果是內(nèi)容塊(網(wǎng)站板塊)的布局,則常用<div>標(biāo)簽。

          5.1 表格布局

          表格由<table>標(biāo)簽來定義。每個(gè)表格均有若干行<tr>標(biāo)簽和列<td>標(biāo)簽組成。<td>數(shù)據(jù)單元格的內(nèi)容可以包含文本、圖片、水平線、表格等內(nèi)容。表格頭由<th>標(biāo)簽生成。<table>標(biāo)簽常用的屬性是border,用來指定邊框?qū)挾取?lt;th>和<td>的屬性rowspan,可指定跨行數(shù)。

          如果真的不理解表格的意義,那你打開excel,好好操作一翻,橫向合并一下單元格就知道什么是跨行了。

          <!DOCTYPE html>
          <html>
          <head>
              <meta charset="UTF-8">
              <title>第5個(gè)HTML-表格</title>
          </head>
          <body>
          <table border="1">
              <tr>
                  <th>序號(hào)</th>
                  <th>產(chǎn)品名稱</th>
                  <th>編號(hào)</th>
                  <th>規(guī)格</th>
              </tr>
              <tr>
                  <td>1</td>
                  <td>平板電腦</td>
                  <td>P1010</td>
                  <td>9.7英尺</td>
              </tr>
              <tr>
                  <td>2</td>
                  <td>筆記本電腦</td>
                  <td>C2111</td>
                  <td>15英尺</td>
              </tr>
          </table>
          </body>
          </html>

          輸出結(jié)果

          5.2 塊布局

          網(wǎng)站分塊布局,常用<div>標(biāo)簽進(jìn)行定義。常見網(wǎng)站布局為上中下,上放導(dǎo)航欄,中間放內(nèi)容,底部放版權(quán)和友情鏈接,而它們的分割便是由<div>標(biāo)簽負(fù)責(zé)的。當(dāng)然,用<div>布局,需要CSS的支持才行。同表格<td>標(biāo)簽一樣,<div>標(biāo)簽中,也是可以嵌入<p>、<hr>等標(biāo)簽的。

          <div style="color:blue">
              <h3>老陳說編程</h3>
              <p>一個(gè)當(dāng)了10年技術(shù)總監(jiān)的老家伙,分享多年的編程經(jīng)驗(yàn)。<br/>
                  想學(xué)編程的朋友,可關(guān)注:老陳說編程。<br/>
                  分享Python,前端(小程序)、App和嵌入式方面的干貨。關(guān)注我,沒錯(cuò)的。</p>
          </div>

          輸出結(jié)果

          好了,有關(guān)HTML布局的內(nèi)容,老陳先講這么多,如果覺得對(duì)你有所幫助,希望老鐵能轉(zhuǎn)發(fā)點(diǎn)贊,讓更多的人看到這篇文章。你的轉(zhuǎn)發(fā)和點(diǎn)贊,就是對(duì)老陳繼續(xù)創(chuàng)作和分享最大的鼓勵(lì)。

          一個(gè)當(dāng)了10年技術(shù)總監(jiān)的老家伙,分享多年的編程經(jīng)驗(yàn)。想學(xué)編程的朋友,可關(guān)注:老陳說編程。分享Python,前端(小程序)、App和嵌入式方面的干貨。關(guān)注我,沒錯(cuò)的。

          #前端##Web##程序員##CSS##HTML5#

          able表格一種早期十分流行的網(wǎng)頁布局方式,現(xiàn)在基本都是div+css的布局方式,表格一般由tr(行)td(列)標(biāo)簽組成

          表格的常用屬性:1)border:表示表格邊框線2)cellpadding:單元格內(nèi)容和內(nèi)邊框之間的距離3)cellspacing:表示單元格之間的間距4)bgcolor:背景顏色5)width:寬度6)height:高度 等等

          表格

          沒有設(shè)置表格width與height屬性,表格寬高暫時(shí)由單元格的內(nèi)容的寬高決定,其他暫不考慮

          想要消除單元格間距與內(nèi)容與單元格內(nèi)邊框的間距設(shè)置屬性cellspacing,cellpadding為"0"

          <!DOCTYPE html>
          <html>
          <head>
              <title>表格</title>
              <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
          </head>
          <body>
              <table border="1px" cellspacing="0" cellpadding="10">
                  <tr>
                      <td>一</td>
                      <td>二</td>
                      <td>三</td>
                  </tr>
                  <tr>
                      <td>C#</td>
                      <td>Asp.net</td>
                      <td>MVC</td>
                  </tr>
                  <tr>
                      <td>HTML</td>
                      <td>JavaScript</td>
                      <td>JQuery</td>
                  </tr>
              </table>
          </body>
          </html>

          tr常用屬性

          align:單元格內(nèi)容的水平對(duì)齊方式,屬性值:1)left2左側(cè))right右側(cè)3)center中間

          valign:單元格內(nèi)容的垂直對(duì)齊方式,屬性值1)top上邊2)bottom下邊3)middle中間

          rowspan與colspan:將單元格進(jìn)行行與行或者列與列的合并

          這些屬性以后都會(huì)寫在css樣式表中;制作顯示一個(gè)對(duì)齊方式與行或列的合并的表格

          <!DOCTYPE html>
          <html>
          <head>
              <title>表格</title>
              <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
          </head>
          <body>
              <table border="1" cellspacing="0" cellpadding="0" width="500" height="300">
                  <tr>
                      <td colspan="3" align="center">課程表</td><!--合并三行-->
                  </tr>
                  <tr align="center"><!--單元格內(nèi)容居中顯示-->
                      <td>星期一</td>
                      <td>星期二</td>
                      <td>星期三</td>
                  </tr>
                  <tr align="center">
                      <td>HTML</td>
                      <td rowspan="2">.NET</td><!--合并兩列-->
                      <td>JavaScript</td>
                  </tr>
                  <tr align="center">
                      <td>CSS</td>
                      <td>JQuery</td>
                  </tr>
              </table>
          </body>
          </html>

          顯示效果

          表格中設(shè)置的屬性雖然會(huì)繼承,但是子標(biāo)簽單獨(dú)設(shè)置了屬性,就會(huì)覆蓋父標(biāo)簽的屬性;比如tr

          設(shè)置align="center",此tr中的子標(biāo)簽td單獨(dú)設(shè)置了align="left",最終效果是此td內(nèi)容居左顯示


          主站蜘蛛池模板: 亲子乱av一区区三区40岁| 精品一区二区三区影院在线午夜 | 久久久国产精品一区二区18禁| 美女视频一区三区网站在线观看| 久久久久人妻一区精品| 国产乱码精品一区二区三区四川人| 中文字幕一区二区三区有限公司 | 亚洲av区一区二区三| 亚洲欧美一区二区三区日产| 东京热无码av一区二区| 在线成人综合色一区| 末成年女A∨片一区二区| 久久精品一区二区影院| 无码日韩AV一区二区三区| 久久人做人爽一区二区三区| 上原亚衣一区二区在线观看| 亚洲字幕AV一区二区三区四区 | 国产成人无码aa精品一区| 亚洲一区在线视频| 国产伦理一区二区| 国产精品免费一区二区三区| 多人伦精品一区二区三区视频| 人妻体内射精一区二区三区 | 八戒久久精品一区二区三区| 亚洲一本一道一区二区三区| 奇米精品视频一区二区三区| 国产免费一区二区视频| 国产激情一区二区三区 | 波多野结衣中文字幕一区二区三区 | 亚洲色精品vr一区二区三区| 午夜精品一区二区三区在线视 | 亚洲国产成人一区二区三区| 国产亚洲情侣一区二区无码AV| 精品一区二区三区在线视频观看| 欧美日韩一区二区成人午夜电影| 99热门精品一区二区三区无码| 91精品福利一区二区三区野战| 人妻av无码一区二区三区| 无码乱人伦一区二区亚洲| 国产精品视频一区二区噜噜| 亚洲一区二区三区无码中文字幕|