css常見樣式

1,

1)文本水平居中

2)用在span , p,a,h1~h6等這些文本標(biāo)簽上

3)行內(nèi)元素

2,IE 盒模型和W3C盒模型有什么區(qū)別?

設(shè)置width或height的值時的區(qū)別:

IE盒模型:width或height=內(nèi)容寬度或高度+paddingx2+borderx2

圖片.png

W3C盒模型: width和height=內(nèi)容的寬度或高度

圖片.png

3,*{ box-sizing: border-box;}的作用是什么?

把頁面上所有的盒模型設(shè)置為IE盒模型這個概念

4,line-height: 2和line-height: 200%有什么區(qū)別?

2:行高為字體本身高度的2倍
200%:行高為父容器字體高度的2倍

5,

1)特性:(同時具有行內(nèi)元素和塊級元素的特性)

a,行內(nèi)元素(可以多個元素占據(jù)一行)
b,設(shè)置寬高有效
c,設(shè)置padding ,margin有效

2)去縫隙

a,去掉代碼中的空格和換行
b,設(shè)置font-size:0

3)inline-block元素頂端對齊

設(shè)置vertical-align基線的位置來對齊元素
vertical-align:top

6,CSS Sprite是什么

精靈圖

通過把網(wǎng)站中用到的圖片整合到一張圖片里面,把這張整合圖片設(shè)置成背景圖片 ,然后設(shè)置background-position的值來展現(xiàn)圖片

精靈圖的好處是:

a,減少圖片的請求,提升客戶端網(wǎng)頁展現(xiàn)的速度
b,減少服務(wù)器開啟的線程 因此減輕服務(wù)器的壓力

7,讓一個元素“看不見”有幾種方式,區(qū)別?

1)歸納成兩種方式

任然存在網(wǎng)頁中本身的位置

a,visibility:hidden (可見度狀態(tài)隱藏)
整塊的透明度: opacity:0
b,background-color:rgba(0,0,0,0.5) 蒙上一層遮罩

不存在網(wǎng)頁中

a,display:none;

代碼

1,實現(xiàn)效果及代碼

2,實現(xiàn)效果預(yù)覽

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J的外補...
    _Yfling閱讀 14,206評論 1 92
  • 1. text-align: center的作用是什么,作用在什么元素上?能讓什么元素水平居中 (1)作用:CSS...
    黃同學(xué)2019閱讀 430評論 0 0
  • text-align: center的作用是什么,作用在什么元素上?能讓什么元素水平居中 1、當(dāng)作用于塊級元素時,...
    我要認真學(xué)前端閱讀 721評論 0 1
  • 一、text-align:center的作用是什么?作用在什么元素上?能讓什么元素水平居中? text-align...
    青鳴閱讀 412評論 0 0
  • 塊級元素和行內(nèi)元素分別有哪些?動手測試并列出4條以上的特性區(qū)別 塊級元素:div h1~h6 p form ul ...
    1w1ng閱讀 421評論 0 0

友情鏈接更多精彩內(nèi)容