补充Html内容

简介: 元素外边距外边距是指元素以某个对象的可见边界为参照的相对距离,外边距可设负值margin-left和margin-top的参照对象是其父元素或其兄弟元素,margin-right和margin-bottom的参照对象是其兄弟元素,如果margin-right和margin-bottom的参照对象是其父元素,则这两个属性会失效。

补充

​ /要让一个文字在父元素中垂直居中,只需要将父元素的line-height设置为一个和父元素height设置为一样的值。 /

去除下划线:

​ text-decoration:none;

设置超链接的hover的样式:

​ hover{

}

经常为了边框和文字宽度一致,需要将h2转换成行内块元素,因为一个块元素,肯定是父元素有多宽它就有多宽的,所以通常用这种办法才能改边框的宽度和文字一样,改为display:inline-block;

有的时候假设你的高度固定了,比如是450px,但是你如果加了一个border,也就是一个边框,假设为1px,那么这个时候就会多出1px,那么你高度如果要维持为450px,那么你的高度就要修改减小1px,为490px。

1、块级元素
1、独占一行,对宽高的属性值生效;
2、不给宽度,块级元素就默认为浏览器的宽度,即100%宽;
3、常用的块级标签有:div,p,h1~h6,ul,li,dl,dt,dd;
4、是一个容器,里面可以放行内或者块级元素;
5、块级标签转换为行内标签:display:inline 。
注意:
只有 文字才 能组成段落 因此 p 里面不能放块级元素,特别是 p 不能放div
同理还有这些标签h1,h2,h3,h4,h5,h6,dt,他们都是文字类块级标签,里面不能放其他块级元素。
2、行内元素
1、可以多个标签存在一行;
2、对宽高属性值不生效,完全靠内容撑开宽高;
3、常用的行内有:a,span,font,b,u,i,strong,em等;
4、默认宽度就是它本身内容的宽度;
5、只能容纳文本或其他行内元素;
6、行内标签转换为块级标签:display:block ;
7、text-align:center对行内标签没有效果
因为行内元素的宽就是内容宽,没有可居中的空间,所以text-align:center;就没有作用
1.
链接里面不能再放链接。
特殊情况a里面可以放块级元素,但是给a转换一下块级模式最安全。
3、行内元素可以设置内外边距吗
1、建议不要给行内元素设置垂直方向的外边距;
2、行内元素可以设置的padding ,border,以及水平方向的margin;
3、不能设置宽高以及垂直方向的间距。
1、行内元素可以设置左右外边距和上下外边距
2、只不过由于行内元素的特点,上下外边距不起作用。
3、img设置上下外边距起作用是因为img是行内元素,但同时也具备块元素的特性,比如可以设置宽度和高度,这类元素也叫行内块元素。
4、行内块元素
1、在行内元素中有几个特殊的标签——、、
2、可以对它们设置宽高和对齐属性,有些资料可能会称它们为行内块元素;
3、和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。一行可以显示多个;
4、默认宽度就是它本身内容的宽度;
5、宽度,高度,行高、外边距以及内边距都可以控制。

font-weight:bold; / 加 粗 /

元素外边距

外边距是指元素以某个对象的可见边界为参照的相对距离,外边距可设负值

margin-left和margin-top的参照对象是其父元素或其兄弟元素,margin-right和margin-bottom的参照对象是其兄弟元素,如果margin-right和margin-bottom的参照对象是其父元素,则这两个属性会失效。

image-20230626092832818

list-style:square /项目符号/

相关文章
|
6月前
|
前端开发 JavaScript
html的主要内容
【4月更文挑战第10天】html的主要内容
60 0
|
6月前
|
小程序 JavaScript 数据库
小程序解析富文本html内容
小程序解析富文本html内容
|
2月前
<!doctype html>放在页面最前面的用途
<!doctype html>放在页面最前面的用途
|
2月前
|
前端开发 JavaScript 开发者
改变 HTML 内容
【9月更文挑战第04天】
15 1
|
6月前
|
移动开发 前端开发 JavaScript
【专栏:HTML基础篇】深入HTML元素:理解结构与内容
【4月更文挑战第30天】本文探讨了HTML在构建网页中的核心作用,HTML元素构成网页结构与内容,包括`&lt;!DOCTYPE html&gt;`、`&lt;html&gt;`、`&lt;head&gt;`、`&lt;body&gt;`等基本元素及`&lt;div&gt;`、`&lt;span&gt;`、`&lt;a&gt;`、`&lt;img&gt;`等丰富标签。理解并恰当使用这些元素能创建清晰结构、优化SEO、增强交互性,并实现语义化,为打造功能强大且美观的网站奠定基础。进一步学习CSS和JavaScript将提升网页视觉效果和互动性。
98 0
|
6月前
|
前端开发 JavaScript UED
【专栏:HTML基础篇】HTML列表与表格:展示数据的两种方式
【4月更文挑战第30天】本文探讨了HTML中的列表和表格两种元素在网页设计中的重要性。无序列表(`&lt;ul&gt;`)和有序列表(`&lt;ol&gt;`)用于呈现相关项目,前者常用于导航菜单,后者适合有序信息。表格(`&lt;table&gt;`)用于展示结构化数据,通过`&lt;tr&gt;`、`&lt;td&gt;`和`&lt;th&gt;`定义行和单元格。尽管简单,列表和表格在内容呈现和用户体验上起着关键作用。然而,响应式设计趋势下,表格可能被更灵活的布局替代,复杂数据展示则可借助JavaScript库提升交互性。正确使用这些基础元素能有效组织信息,创建优质网页。
249 0
|
存储 JavaScript 前端开发
HTML表单标签大全并附有详细代码+案例
HTML表单标签大全并附有详细代码+案例
266 0
HTML重点常用
HTML重点常用
34 0
|
前端开发 容器
HTML基础标签及案例
Hyper Text Markup Language(超文本标记语言);是一门用户创建网页文档的标记语言,网页本身是一种文本文件,在文本文件中添加标记符。HTML是用来创建网页的标记语言,HTML标记的内容是用浏览器来解析的;所见即所得!
55 0
下一篇
无影云桌面