1.簡(jiǎn)述css中的不同盒模型的特性,以及應(yīng)用,介紹box-sizing屬性。
- **1.在css中盒模型分為2種:**
- **1)w3c標(biāo)準(zhǔn)盒子盒模型:**
默認(rèn)情況下我們使用的都是標(biāo)準(zhǔn)盒子模型,他的計(jì)算規(guī)則:
元素的實(shí)際寬度=width+左右padding+左右border
元素的實(shí)際高度=height+上下padding+上下border
width和height指的是內(nèi)容區(qū)的寬度和高度,所以設(shè)置了內(nèi)間距padding和邊框線border之后盒子是會(huì)被撐大的。
- **2)ie怪異盒子模型**
在ie盒模型中width和height就是元素的實(shí)際寬度和高度
計(jì)算規(guī)則:
元素內(nèi)容區(qū)的寬度=width-左右padding-左右border
元素內(nèi)容區(qū)的高度=height-上下padding-上下border
設(shè)置padding和border會(huì)使內(nèi)容區(qū)變小。
- **2.我們可以通過box-sizing屬性來(lái)更改盒子模型**
- 如果box-sizing:content-box;這種模式是w3c標(biāo)準(zhǔn)盒模型
- 如果box-sizing:border-box;這種模式是ie怪異盒模型
2.假設(shè)div里面設(shè)置overflow:hidden,里面有select框,被遮住怎么辦?
- 如果select框用的是原生的一般不會(huì)被遮住的。
- 如果用的是插件或者自己寫的,那么可能會(huì)被遮住,他被遮住的原因就是因?yàn)楦讣?jí)元素div里面寫了overflow:hidden,導(dǎo)致一旦超出這個(gè)盒子就會(huì)被隱藏掉,要想解決這個(gè)問題,那么我們可以改變這個(gè)下拉框的參照物,利用定位給他調(diào)整到指定的位置,利用z-index將層級(jí)提高,這樣就不會(huì)受到父元素的限制了。
3.父元素visibility:hidden;子元素設(shè)置visibility:visible,子元素顯示嗎?
· 這時(shí)候子元素是顯示的,原理如下:
· 當(dāng)只是給父元素添加visibility:hidden,子元素會(huì)繼承父元素的visibility:hidden的值,也會(huì)跟著父元素隱藏。
· 如果給父元素添加visibility:hidden;同時(shí)在給子元素添加visibility:visible,子元素是顯示的。原因:添加給子元素visibility:visible是大于父元素添加的visibility:hidden的。所以優(yōu)先執(zhí)行子元素的visibility:visible屬性。
更多關(guān)于“前端培訓(xùn)”的問題,歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學(xué),課程大綱緊跟企業(yè)需求,更科學(xué)更嚴(yán)謹(jǐn),每年培養(yǎng)泛IT人才近2萬(wàn)人。不論你是零基礎(chǔ)還是想提升,都可以找到適合的班型,千鋒教育隨時(shí)歡迎你來(lái)試聽。