前端菜鸟笔记 Day-4 CSS布局

时间 2019-12-12

标签前端菜鸟笔记 day css 布局栏目 CSS 繁體版

原文原文链接

文章大纲来源：【Day 3】HTML复习 + CSS基础css

CSS框模型
宽度和高度
内边距
外边距
CSS定位
浮动

CSS框模型

内容引用：CSS 框模型概述html

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。前端

元素的背景应用于**由内容和内边距(padding)、边框(border)组成的区域。git

边框之外是外边距(margin)，外边距默认是透明的，所以不会遮挡其后的任何元素。github

内边距、边框和外边距都是可选的，默认值是零；内边距、边框和外边距能够应用于一个元素的全部边，也能够应用于单独的边。浏览器

宽度和高度

定义元素的宽高属性。spa

宽度 width
高度 height

能够用px进行数字定义，如1px；也能够用百分比100%等表示，百分比表示占父元素的百分之多少。3d

注：行内元素不能定义宽高，块元素和行内块元素能够。code

内边距

内容引用：CSS 内边距cdn

元素的内边距在边框和内容区之间。

padding 属性定义元素的内边距，接受长度值或百分比值，但不容许使用负值。

h1 { padding: 10px; }
复制代码

还能够按照上、右、下、左的顺序分别设置各边的内边距，各边可使用不一样的单位或者百分比值：

h1 { padding: 10px 0.25em 2ex 20%; }
复制代码

单边内边距属性

也可使用下面四个单独的属性分别设置：

padding-top
padding-right
padding-bottom
padding-left

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
}
复制代码

内边距的百分比

以前在宽高设置部分使用百分比，能够相对父元素的宽高设置。

内边距的百分数值是相对于父元素的宽度计算的。

/* 段落的内边距设置为父元素 width 的 10% */
p { padding: 10%; }
复制代码

注意上面解释定义的部分，padding只参考了父元素的width，也就是上下内边距也是参照的width，而不是参照常理上父元素的height；padding-top/padding-bottom也是同样参照的width。

外边距

内容引用：CSS 外边距

围绕在元素边框的透明区域是外边距。

设置外边距就是使用 margin 属性，这个属性接受任何长度单位（像素、英寸、毫米或 em）、百分数值甚至负值。

margin 能够设置为 auto 。

基本上外边距和内边距padding书写方式相似，甚至在百分数参考父元素width这一点上也是同样的。

单边外边距属性

与单边内边距属性相似：

margin-top
margin-right
margin-bottom
margin-left

再也不更多的说明。

值复制

有时会输入一些重复的值：

p { margin: 0.5em 1em 0.5em 1em; }
复制代码

经过值复制，能够没必要重复的声明属性：

/* 上面的规则与下面的规则是等价的 */
p { margin: 0.5em 1em; }
复制代码

CSS 定义了一些规则，容许为外边距指定少于 4 个值：

缺乏左，则使用右的值
缺乏下，则使用上的值
缺乏右，则使用上的值

h1 { margin: 0.25em 1em 0.5em; }
/* 等价于 0.25em 1em 0.5em 1em */
h2 { margin: 0.5em 1em; }
/* 等价于 0.5em 1em 0.5em 1em */
p { margin: 1px; }
/* 等价于 1px 1px 1px 1px */
复制代码

CSS定位

内容引用：CSS 定位 (Positioning)

CSS 定位 (Positioning) 属性容许你对元素进行定位。

定位的基本思想很简单，它容许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另外一个元素甚至浏览器窗口自己的位置。

一切皆为框

div、h1 或 p 元素经常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。

与之相反，span 和 strong 等元素称为行内元素，这是由于它们的内容显示在行中，即“行内框”。

可使用 display 属性改变生成的框的类型。

若是一个框的属性设置为display:none，该框及其全部内容就再也不显示，不占用文档中的空间。

可是一种状况下，即便没有显式定义（包括环绕标签），也会建立块级元素，这种状况发生在把一些文本添加到一个块级元素（好比 div）的开头。即便没有把这些文本定义为段落，它也会被看成段落对待：

<div>
some text
<p>Some more text.</p>
</div>
复制代码

在这种状况下，这个框称为无名块框，由于它不与专门定义的元素相关联。

定位机制

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

全部框默认都在普通流中定位。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可使用水平内边距、边框和外边距调整它们的间距。可是，垂直内边距、边框和外边距不影响行内框的高度。

由一行造成的水平框称为行框（Line Box），行框的高度老是足以容纳它包含的全部行内框。不过，设置行高能够增长这个框的高度。

`position` 属性

经过使用 position 属性，咱们能够选择 4 种不一样类型的定位。

static ：元素框正常生成。
relative ：元素框偏移某个距离。元素仍保持其未定位前的形状，它本来所占的空间仍保留。
absolute ：元素框从文档流彻底删除，并相对于其包含块定位。
fixed ：相似于将 position 设置为 absolute，不过其包含块是视窗自己。

相对定位

内容引用：CSS 相对定位

设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它本来所占的空间仍保留。

简单来讲就是，原来所占位置仍是占那个位置，可是元素将会进行偏移显示。

#box_relative {
  position: relative;
  /* 框将在原位置顶部下面20像素的地方 */
  top: 20px;
  /* 框将在原位置左部右边30像素的地方 */
  left: 30px;
}
复制代码

绝对定位

内容引用：CSS 绝对定位

设置为绝对定位的元素框从文档流彻底删除，并相对于其包含块定位。

绝对定位使元素的位置与文档流无关，所以不占据空间，这一点与相对定位不一样。

简单来讲就是，元素再也不占用任何文档流的空间，只剩下相对于包含块的定位显示。

#box_relative {
  position: absolute;
  /* 框将在包含块顶部下面20像素的地方 */
  top: 20px;
  /* 框将在包含块左部右边30像素的地方 */
  left: 30px;
}
复制代码

注意以上说明的包含块的概念是：

绝对定位的元素的位置相对于最近的已定位祖先元素，若是元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（通常状况下是HTML元素）。

上述概念中，已定位指的就是position属性设置了relative、absolute和fixed之一的元素；最近的已定位指的是元素父子链往从本元素向上寻找，其中最近的已定位祖先元素。

提示：由于绝对定位的框与文档流无关，因此它们能够覆盖页面上的其它元素。能够经过设置 z-index 属性来控制这些框的堆放次序。

浮动

内容引用：CSS 浮动

浮动的框能够向左或向右移动，直到它的外边缘碰到包含框或另外一个浮动框的边框为止。

因为浮动框不在文档的普通流中，因此文档的普通流中的块框表现得就像浮动框不存在同样。

若是包含框太窄，没法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。若是浮动元素的高度不一样，那么当它们向下移动时可能被其它浮动元素“卡住”。

`float`属性

使用浮动的方法：

img {
  /* 把图像向右浮动 */
  float: right;
}
复制代码

float可能的值：

none ：默认值，元素不浮动，并会显示在其在文本中出现的位置。
left ：元素向左浮动。
right ：元素向右浮动。
inherit ：从父元素继承 float 属性的值。

行框和清理

浮动框旁边的行框会被缩短，使行框围绕浮动框，因此建立浮动框可使文本围绕图像。

注释：这里说的行框就是以前说的无名块框。

若是想要阻止行框围绕浮动框，须要对该框(?)应用clear属性，属性值能够是left、right、both 或 none，它表示框的哪些边不该该挨着浮动框。

在这里将不会进一步详细的说明浮动和清理的深刻用法和机制说明（主要是本身暂时不太喜欢用，到时候涉及到的时候再开专题说明吧，咕咕咕）。

我的静态博客：

气泡的前端日记： rheabubbles.github.io