33岁转职者的前端笔记-DAY 14 排版技巧小笔记-标签属性元素及定位方法

区块元素(block)

• 预设为区块元素的标签有：h1~h6,p,div,section,header,nav等等…
• 会造成「换行的标签(元素)」
• 可以设定「width」与「height」。

行内文字元素(inline)

• 预设为行内元素的标签有：a, span, label :before, :after
• 不会造成「换行」
• 不可设定「width」与「height」
• 中间会有「空格」

行内区块元素(inline-block)

• 预设为行内区块元素的标签有：img, input, button, textarea
• 不会造成「换行」
• 可以设定「width」与「height」
• 中间会有「空格」
• 适合做排在一起的小元件，不适合做精确的区块分割

横向对齐方式的语法

flex-start 靠左
flex-end 靠右
center 置中
space-between 靠左且靠右
space-around 分割空间後置中

垂直对齐方式的语法

flex-start 靠上
flex-end 靠下
center 中

定位模式(position)

• 定位相关属性有：top, bottom, left, right, z-index

定位模式(一): static

• 所有元素定位模式预设都是static，static模式无法使用任何定位相关属性。
• top, bottom, left, right, z-index 在此模式下无效

定位模式(二): relative(相对定位)

• 以元素原本所在位置定位
• relative元素仍会在画面占据空间
• 由上而下推 top: 0px;
• 由左往右推 left: 0px;
• 由下往上推 bottom: 0px;
• 由右往左推 right: 0px;
• bottom预设值不是 0，所以要做渐变就要加上 bottom:0px;

定位模式(三): absolute

• 以最近的上一层元素作为参考来定位
• 做为参考的元素不得为position: static
• 所以上一层元素要写position: relative;不会跟其他元素重叠在一起
• 设定为absolute模式的元素将不会在画面上占据空间
• 右下角：

right: 0px;
bottom: 0px;

• 右上角：

right: 0px;
top: 0px

• 取消按钮图的底色
  background: transparent;