此篇会介绍 Bootstrap 常用的对齐语法注意事项以及常见问题分为上下两集。上集介绍 display、spacing。
设置每个元素的排版方式。
display 是排版属性中最重要属性之一,常用的属性有,inline、block、inline-block、none、grid、flex、table,此会针对前三个属性做介绍(其余会在其它篇有详细介绍),更多属性请参考 W3C
特性:元素水平排列
限制:
行内元素
。常见行内元素标签:
<span>
、<a>
、<strong>
、<img>
符合 W3C inline-level 定义的行内元素:
特性:元素垂直排列
区块元素
。限制:
常见区块元素标签:
<div>
、<ul>
<li>
、<p>
、<h1>~<h6>
特性:
行内元素
无法推挤出垂直方向间距的问题。inline
、block
的优点,使物件有并排的特性,且可以调整宽度、高度、间距。常见行内区块元素:
<button>
, <input>
, <select>
原因:
空格
或 换行
所造成的。三种解决方法:
<div>
连在一起写。font-size: 0;
、子元素也要赋予 font-size
值。(比较常用)margin、padding 推挤出来的空间称为
间隔、间距
。
前情提要,上一集 CSS 盒模型(box model),有介绍到基础用法,因此这边会着重在介绍 auto
、0
用法以及注意事项。
语法简化
margin: 16px 16px 16px 16px;
margin: 16px 8px;
margin: 16px;
margin: 16px 8px 4px;
auto
0
负数值
是
margin: 0 auto 0 auto;
的简写,意思是上下间距为 0,左右间距均分。
margin: 0 auto;
width
才会有效果。由於需要加上
absolute
,会在後面章节介绍。有需要可以先参考以下两个文章:
absolute
+ margin auto
的方法。absolute
+ margin 负值
的方法。设置
上、右、下
间距为 0,将全部间距分配到左边,使右边间距为 0。
margin: 0 0 0 auto;
width
才会有效果。统整四个重点
重叠
(从下方图片可以看出中间的 <p>
间距只有 16 px但却贴齐上下两个 <p>
)。
4. 行内元素垂直 margin没有
效果(从下方图片可以看到左边 <span>
只有推挤出水平方向的间距)。
获得技能 水刀
、水压推进
>>: Day 5 - 用 canvas 复刻 小画家 挑选颜色(颜色选取器)
触碰开灯 ( 类比讯号 ) 教学原文参考:触碰开灯 ( 类比讯号 ) 这篇文章会介绍如何使用「序列写...
Environmnent: Ubuntu 18.04.1 , 5.4.0-80-generic wh...
大家好,我叫 A Fei,目前是学习 Ruby 和 JavaScript 约三个月的新手。 在学习过...
不怎麽重要的前言 上一篇介绍了两个小题目,稍微带过解题的思路,以及多重回圈(巢状回圈)的概念。 现在...
制作出Candy Crush的游戏开发商King在今年3月时宣布推出拥有25年丰富历史、陪伴全球许多...