html
标签作用_html5常用标签及属性

html

标签作用_html5常用标签及属性HTML盒子基础标签_div标签

目录

1. 什么是DIV

1.1 div是什么意思?

1.2 div标签怎么用?

1.3 div布局优势?

1.4 DIV作用是什么?

1.5 有哪些DIV方式

1.5.1行内样式

1.5.2内嵌样式

1.5.3外部样式

 1.6 样式使用规则

2.DIV盒子

2.1盒子模型

2.2外边距相关属性

2.3内边距相关属性

2.4 补充 


1. 什么是DIV

1.1 div是什么意思?

div全称是DIVision,也是对层叠样式表进行定位,很多时候,我们都称为图层,div为html中的内容提供图层结构等其他元素。

1.2 div标签怎么用?

<div></div>,div是一个块级元素,以便于对元素进行格式化,把文档分割成独立的板块,并且不和其他元素进行关联,一般情况下,div都是使用id和class来进行标记。

1.3 div布局优势?

使用div布局网站的时候,可以减少网站的代码,现在都喜欢用css+div去布局网站,因为修改比较方便。div精简了很多代码,当然页面的加载速度也提高了,同时网站页面也不会出现错乱。

1.4 DIV作用是什么?

DIV主要的作用就是起分割的作用,一般常用的标签都是使用div进行分割,并且把样式进行分割

1.5 有哪些DIV方式

在HTML网页中根据编写CSS方式的不同可以将CSS分为三类:行内样式、内部(嵌)样式、外部样式

1.5.1行内样式

通过style属性直接编写在标签中,多个样式规则之间使用分号隔开
语法:
   <p style=”样式规则”></p>

注意:行内样式只对当前标签生效

<p style=”color: red; font-size: 20px;”>大家好</p>

1.5.2内嵌样式

内嵌样式一般写在<head>部分
语法:
   <style type=”text/css”>
        选择器selector  {样式规则;}
   </style>

注意:内嵌样式在当前页面中有效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			p{
				color: red;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<p>大家好</p>
	</body>
</html>

1.5.3外部样式

外部样式定义在单独的*.css 文件中,一般放置在站点一个CSS目录中,通过<link>标签在<head>部分引用。一般外部样式的文件名和网页名称一致
   语法:
       <link href=”外部样式路径” rel=”stylesheet”>

注意:外部样式可以用在同一个网站的多个网页中,只需要在各个页面中去引用外部样式即可

 1.6 样式使用规则

行内样式表、内嵌样式表、外部样式表各有优势,实际的开发中常常需要混合使用:
1.有关整个网站统一风格的样式代码,放置在独立的样式文件*.css
2.某些样式不同的页面,除了链接外部样式文件,还需定义内嵌样式
3.某张网页内,部分内容”与众不同“,采用行内样式

2.DIV盒子

2.1盒子模型

1.外边距 -上下外边距重叠 -左右外边距相加 -margin : 上右下左 [或者margin-top:x;margin-left:y;…]

2.内边距 -块内部的内容是否顶着边框,看内边距. -padding : 上右下左 套路与margin相同

3.居中 -块居中(横向居中) : margin:0 auto -块内内容居中 : text-align:center

页面中的所有元素都可以看成一个盒子,占据着一定的页面空间。

一个盒子的完整大小由:内容content+内边距padding+边框border+外边距margin组成

html<div>标签作用_html5常用标签及属性

2.2外边距相关属性

margin:外间距,边框和边框外层的元素的距离
margin写法:
   margin:10px;/*上下左右四个方向距离相同*/
   margin: 10px 20px 30px 40px;/*四个方向:上,右,下,左(顺时针)*/
   margin: 10px 20px;/*四个方向:上下,右左(顺时针)*/
   margin:10px 20px 30px;   /*第一个用于上,第二个用于右-左,第三个用于下*/

属性名 描述 取值
margin 四个方向的距离 top;right;bottom;left
margin-top 上间距 数值
margin-bottom 下间距 数值
margin-left 左间距 数值
margin-right 右间距 数值

如果想让一个元素居中显示,只需设置:margin:0 atuo;即可

2.3内边距相关属性

padding:内间距,元素内容和边框之间的距离((top right bottom left)) 
用法与margin相同

属性名 描述 取值
padding 四个方向的距离 top;right;bottom;left
padding-top 上间距 数值
padding-bottom 下间距 数值
padding-left 左间距 数值
padding-right 右间距 数值

2.4 补充 

html<div>标签作用_html5常用标签及属性

今天的文章html

标签作用_html5常用标签及属性分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/68783.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注