這是《前端總結(jié)·基礎(chǔ)篇·CSS》系列的第一篇,主要總結(jié)一下布局的基礎(chǔ)知識。
一、顯示(display) 1.1 盒模型(box-model) 1.2 行內(nèi)元素(inline) & 塊元素(block) 1.3 行內(nèi)塊元素(inline-block IE8+ IE6-7/tools) 1.4 flex(IE11+ IE10/-ms-) 1.5 none二、位置(position) 三、補(bǔ)充 3.1 浮動(float) 3.2 層疊(z-index) 3.3 溢出(overflow) 3.4 resize(notIE)(CSS3) 3.5 分欄(column)(IE10+ notOperaMini)(CSS3)
一、顯示(display)
1.1 盒模型(box-model)
看圖了解盒模
盒模型包括內(nèi)容(content)、填充(padding)、邊框(border)、邊距(margin)。我們給元素設(shè)置的高度,是內(nèi)容(content)的高度。再給元素添加填充(padding),元素看起來會更高。
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二) 2017-07-26