内容简介:文章大纲来源:内容引用:CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
文章大纲来源: 【Day 3】HTML复习 + CSS基础
- CSS框模型
- 宽度和高度
- 内边距
- 外边距
- CSS定位
- 浮动
CSS框模型
内容引用: CSS 框模型概述
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
元素的背景应用于**由内容和内边距(padding)、边框(border)组成的区域。
边框以外是外边距(margin),外边距默认是透明的,因此不会遮挡其后的任何元素。
内边距、边框和外边距都是可选的,默认值是零;内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。
宽度和高度
定义元素的宽高属性。
width height
可以用 px
进行数字定义,如 1px
;也可以用百分比 100%
等表示,百分比表示占父元素的百分之多少。
注:行内元素不能定义宽高,块元素和行内块元素可以。
内边距
内容引用: CSS 内边距
元素的内边距在边框和内容区之间。
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
, 它表示框的哪些边不应该挨着浮动框 。
在这里将不会进一步详细的说明浮动和清理的深入用法和机制说明(主要是自己暂时不太喜欢用,到时候涉及到的时候再开专题说明吧,咕咕咕)。
个人静态博客:
- 气泡的前端日记: https://rheabubbles.github.io
以上所述就是小编给大家介绍的《前端菜鸟笔记 Day-4 CSS布局》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。