CSS学习之布局基础

文章的目录：

一、显示（display）

1.1 盒模型（box-modle）

1.2 行内元素以及块元素(inline && block )

1.3 行内块元素（inline-block）

1.4 弹性盒子布局（flex）

1.5 隐藏（none）

二、位置（position）

三、补充知识点

3.1 浮动布局（float）

3.2 层叠（z-index）

3.3 溢出（overflow）

3.4 resize( CSS3的内容 )

3.5 分栏 ( column )

/*******************************************************************************************************************/

正文浏览

一、显示（display）

1.1 标准的盒模型

CSS学习之布局基础

1.2 行内元素和块元素

行内元素不能设置宽高，其宽度由内容决定。块元素默认占据一行

行内元素：a、font（em、i、strong）、img、span

块元素：div p ul li table form html5(header section footer)

1.3 行内块元素（inline-block）

消除两元素之间的空隙、两元素之间的空隙来源于元素之间的空格，拼接元素既可以消除

例如

文章</li><li>

留言</li>

</ul>

1.4 弹性盒子（flex）

兼容性 ie11+, 小于ie10的需要做兼容处理

1.5 隐藏元素（none:hidden）

display：none会清除原本的空间

visibility:hidden; // 隐藏元素display:none; // 隐藏元素并清除原本占用的布局空间

二、position定位

static(静态定位)：默认值，没有定位，元素出现在正常的流中

relative（相对定位）：生成相对定位的元素

absolute(绝对定位)：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位

fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位

三、关于CSS布局的补充

3.1、float浮动布局

浮动的妙用是用来做文字环绕图片，记得在父元素进行清除浮动的操作，overflow：hidden

3.2 z-index层叠

层叠可以控制元素的上下放置关系，值越大越在上面

3.3 溢出overflow

3.4 resize 定义用户是否可以调整当前元素框的大小

resize: horizontal（水平）/vertical（垂直）/both/none/inherit;

3.5 分栏 column

CSS学习之布局基础

相关推荐