资讯专栏INFORMATION COLUMN

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

go4it / 1077人阅读

摘要:元素框从文档流完全删除,并相对于其包含块定位。简单来说就是,元素不再占用任何文档流的空间,只剩下相对于包含块的定位显示。行框和清理浮动框旁边的行框会被缩短,使行框围绕浮动框,所以创建浮动框可以使文本围绕图像。

文章大纲来源:【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,而不是参照常理上父元素的heightpadding-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) 属性允许你对元素进行定位。

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

一切皆为框

divh1p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。

与之相反,spanstrong 等元素称为行内元素,这是因为它们的内容显示在行中,即“行内框”。

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

如果一个框的属性设置为display:none,该框及其所有内容就不再显示,不占用文档中的空间。

但是一种情况下,即使没有显式定义(包括环绕标签),也会创建块级元素,这种情况发生在把一些文本添加到一个块级元素(比如 div)的开头。即使没有把这些文本定义为段落,它也会被当作段落对待:

some text

Some more text.

在这种情况下,这个框称为无名块框,因为它不与专门定义的元素相关联。

定位机制
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属性设置了relativeabsolutefixed之一的元素;最近的已定位指的是元素父子链往从本元素向上寻找,其中最近的已定位祖先元素。

提示:因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

浮动

内容引用:CSS 浮动

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

由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

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

float属性

使用浮动的方法:

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

float可能的值:

none :默认值,元素不浮动,并会显示在其在文本中出现的位置。

left :元素向左浮动。

right :元素向右浮动。

inherit :从父元素继承 float 属性的值。

行框和清理

浮动框旁边的行框会被缩短,使行框围绕浮动框,所以创建浮动框可以使文本围绕图像。

注释:这里说的行框就是之前说的无名块框。

如果想要阻止行框围绕浮动框,需要对该框(?)应用clear属性,属性值可以是leftrightbothnone它表示框的哪些边不应该挨着浮动框

在这里将不会进一步详细的说明浮动和清理的深入用法和机制说明(主要是自己暂时不太喜欢用,到时候涉及到的时候再开专题说明吧,咕咕咕)。

个人静态博客:

气泡的前端日记: https://rheabubbles.github.io

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/117337.html

相关文章

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

    摘要:元素框从文档流完全删除,并相对于其包含块定位。简单来说就是,元素不再占用任何文档流的空间,只剩下相对于包含块的定位显示。行框和清理浮动框旁边的行框会被缩短,使行框围绕浮动框,所以创建浮动框可以使文本围绕图像。 文章大纲来源:【Day 3】HTML复习 + CSS基础 CSS框模型 宽度和高度 内边距 外边距 CSS定位 浮动 CSS框模型 内容引用:CSS 框模型概述 CSS 框模...

    Honwhy 评论0 收藏0
  • 前端菜鸟笔记 Day-3 CSS基础

    摘要:派生选择器依据元素的位置关系来定义样式。称其为上下文选择器,称其为派生选择器。在现在布局中,选择器常常用于建立派生选择器。和一样,也可被用作派生选择器。 文章大纲来源:【Day 3】HTML复习 + CSS基础 初识CSS 入门CSS 初识CSS 层叠样式表(Cascading Style Sheets),即前端常说的CSS。 内容引用:CSS 简介 样式解决了什么问题? HTML...

    mingzhong 评论0 收藏0
  • 前端菜鸟笔记 Day-3 CSS基础

    摘要:派生选择器依据元素的位置关系来定义样式。称其为上下文选择器,称其为派生选择器。在现在布局中,选择器常常用于建立派生选择器。和一样,也可被用作派生选择器。 文章大纲来源:【Day 3】HTML复习 + CSS基础 初识CSS 入门CSS 初识CSS 层叠样式表(Cascading Style Sheets),即前端常说的CSS。 内容引用:CSS 简介 样式解决了什么问题? HTML...

    DangoSky 评论0 收藏0
  • Web前端开发学习推荐--菜鸟必看

    Web前端开发是创建Web页面或app等前端界面呈现给用户的过程。第一阶段:前端基础(HTML / CSS / JavaScript / jQuery)初识HTML+CSS【学习笔记】HTML基础完结篇html基础知识——标签详解html基础知识——与用户交互!(表单标签)html基础知识——css样式①史上最全Html和CSS布局技巧面试题汇总 HTML+CSS篇CSS 最核心的几个概念纯HTM...

    JerryWangSAP 评论0 收藏0
  • Web前端开发学习推荐--菜鸟必看

    Web前端开发是创建Web页面或app等前端界面呈现给用户的过程。第一阶段:前端基础(HTML / CSS / JavaScript / jQuery)初识HTML+CSS【学习笔记】HTML基础完结篇html基础知识——标签详解html基础知识——与用户交互!(表单标签)html基础知识——css样式①史上最全Html和CSS布局技巧面试题汇总 HTML+CSS篇CSS 最核心的几个概念纯HTM...

    shadajin 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<