美文网首页
CSS文本标签和盒子模型

CSS文本标签和盒子模型

作者: 眼前人_249d | 来源:发表于2018-07-08 19:03 被阅读0次

<em>标签和<strong>

**em标签用于表示一段内容中的着重点。

**strong标签用于表示一个内容的重要性。

**通常em显示斜体,二strong显示为粗体。

<i>标签和<b>标签

<i>标签会是文字变成斜体

<b>标签会是文字变为粗体

效果和<em>,<strong>效果一样,但是没有实际语义,当我们只想设置文本 特殊显示,而不需要强调内容时就可以使 用i和b标签。

<small>

small标签表示细则一类的旁注,通常包括 免责声明、注意事项、法律限制、版权信 息等。

small标签表示细则一类的旁注,通常包括 免责声明、注意事项、法律限制、版权信 息等。

<cite>

使用cite标签可以指明对某内容的引用或参 考。例如,戏剧、文章或图书的标题,歌 曲、电影、照片或雕塑的名称等。

<blockquote>和<q>

blockquote和q表示标记引用的文本。

blockquote用于长引用,q用于短引用。

在两个标签中还可以使用cite属性来表示引 用的地址。

<sup>和<sub>

sup和sub分别用于定义上标和下标。

<ins>和<del>

ins表示插入的内容,显示时通常会加上下 划线。

del表示删除的内容,显示时通常会加上删 除线。

<code>和<pre>

如果你的内容包含代码示例或文件名,就 可以使用code元素。

pre元素表示的是预格式化文本,可以使用

pre包住code来表示一段代码。

有序列表

使用ol和li来创建一个有序列表。

无序列表

使用ul和li来创建一个无序列表。

定义列表

使用dl、dd、dt来创建一个定义列表使用dl、dd、dt来创建一个定义列表

单位

px

如果我们将一个图片放大的话,我们会发现一个图片 是有一个一个的小色块构成的,这一个小色块就是一 个像素,也就是1px,对于不同的显示器来说一个像素 的大小是不同的。

百分比

也可以使用一个百分数来表示一个大小,百分比是相 对于父元素来说的,如果父元素使用的大小是16px, 则100%就是16px,200%就是32px。

em

em和百分比类似,是相对于font-size说的              1em = 1font-size


行间距

line-height用于设置行高,行高越大则行 间距越大。

行间距 = line-height – font-size

文本的修饰

text-decoration属性,用来给文本添加各 种修饰。通过它可以为文本的上方、下方 或者中间添加线条。

可选值:

underline

overline

line-through

none

对齐文本

text-align用于设置文本的对齐方式。

可选值:

left:左对齐

right:右对齐

justify:两边对齐

center:居中对齐

首行缩进

text-indent用来设置首行缩进。

该样式需要指定一个长度,并且只对第一 行生效。


盒子

CSS处理网页时,它认为每个元素都包含在一 个不可见的盒子里,把所有的元 素都想象成盒子,那么我们对网页的布局就相 当于是摆放盒子。我们只需要将相应的盒子摆放到网页中相应的 位置即可完成网页的布局。

盒子模型

一个盒子我们会分成几个部分:

内容区(content)

内边距(padding)

边框(border)

外边距(margin)

内容区:通过width和height设置内容区的大小。他们只适合块元素。

内边距:padding:10px 20px 30px 40px 这样可以设置元素上、右、下、左四个方向的内边距。

padding:10px 20px 30px;

分别指定上、左右、下四个方向的内边距

padding:10px 20px;

分别指定上下、左右四个方向的内边距

padding:10px;

同时指定上左右下四个方向的内边距

同时在css中还提供了padding-top、padding-right、padding-right、padding-bottom分别用来指定四个方向的内边距

边框:可以使用border属性来设置盒子的边框:

border:1px red solid;

上边的样式分别指定了边框的宽度、颜色和样式。

也可以使用border-top/left/right/bottom分别指定上右下左 四个方向的边框。

和padding一样,默认width和height并包括边框的宽

边框的样式:style:

边框可以设置多种样式:

none(没有边框)

dotted(点线)

dashed(虚线)

solid(实线)

double(双线)

groove(槽线)

ridge(脊线)

inset(凹边)

outset(凸边)

外边距:外边距是元素边框与周围元素相距的空间。

使用margin属性可以设置外边距。

用法和padding类似,同时也可以提供四个方向的

margin -top/right/bottom/left

但是将左右外边距设置为auto是,浏览器会将左右外 边距设置为相等,所以这行代码margin:0 auto可 以使元素居中。

相关文章

  • HTML前端复习

    关键字:HTML常用标签,CSS,CSS文本样式,盒子模型 html文本的内部基本结构 1.

  • CSS文本标签和盒子模型

    标签和 **em标签用于表示一段内容中的着重点。 **strong标签用于表示一个内容的重...

  • CSS文本标签和盒子标签

    标签和 标签 **em标签用于表示一段内容中的着重点。 **strong标签用于表示一个内容的重要性。 **通常e...

  • CSS 盒子模型

    CSS盒子模型 盒子模型边框 CSS盒子模型的宽度和高度 CSS模型的填充 CSS盒子模型的边界 填充和边界的区别

  • 盒子模型

    一、盒子模型 什么是css盒子模型 css中的盒子模型仅仅是一个形象的比喻,HTML中所有的标签都是盒子 在HTM...

  • CSS属性

    link标签的rel属性 rel属性值: CSS的单位 字体的属性 文本属性 背景属性 列表属性 (重要)盒子模型...

  • 盒子模型

    1.什么是CSS盒子模型?CSS盒子模型仅仅是一个形象的比喻, HTML中所有的标签都是盒子 结论1.在HTML中...

  • 前端一些面试题

    HTML 和 CSS 面试题 盒子模型 CSS 中盒子模型包括 IE 盒子模型和标准的 W3C 盒子模型。W3C ...

  • DAY 03

    今天学到了什么1.盒子模型的参数2.标签的分类3.CSS选择器 1.CSS盒子模型 1.1盒子模型参数 传递一个参...

  • CSS基础-1

    CSS简介 基本使用 CSS的样式选择器 表格样式 CSS盒子模型 margin的问题 布局的三大标签 块标签 内...

网友评论

      本文标题:CSS文本标签和盒子模型

      本文链接:https://www.haomeiwen.com/subject/dqnouftx.html