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