布局
作者: dkvirus 发表于: 2018-06-21 16:02:00 最近更新: 2018-07-05 15:02:49

CSS 布局方式总结:

  • 默认布局,需要了解行内元素和块级元素的特性;
  • 盒子模型;
  • position 定位布局;
  • flex 布局;

一、布局之行内元素与块级元素

css 用于给 html 添加样式,学习 css 布局的第一步应该要搞清楚 html 标签默认是怎么排布的。html 标签可以细分为如下三种类型,每种类型的默认排布方式如下列举。

1. 行内元素

  • 默认高度和宽度是根据内容自适应,也就是在同一行排列;
  • 不可以设置 width 和 height (宽度和高度);
  • 其它元素可以通过 display: inline; 转换为行内元素;
  • 常见行内元素有:a、span、label。

2. 块级元素

  • 独占一行,默认高度是根据内容自适应;
  • 可以设置 width 和 height(宽度和高度);
  • 其它元素可以通过 display: block; 转换为块级元素;
  • 常见块级元素有:div 、p 、h1-h6 。

3. 组合元素

  • 既拥有行内元素在一行显示的特性;
  • 又拥有块级元素可以设置宽高的特性;
  • 其它元素可以通过 display: inline-block; 或者 float: left; 转换为组合元素;
  • 常见的组合元素有:input、select、button、img 等表单元素。

二、布局之盒子模型

三、布局之 position

四、布局之 flex

首页
友链
归档
dkvirus
动态
RSS