html标签样式基础知识

1、Html中标签如何分类?

双标签和单标签

 双标签:
  p段落标签、h1-h6标题标签、b/strong字体加粗标签、i/em字体倾斜标签、pre换行标签、small字体变小标签、
  bdo文字方向、div/span无意义、Itr左到右/rtl右到左(文本方向的属性值)、sub下标文本、sup上标文本、
  a链接标签
  单标签:
br换行符标签、hr水平线标签、img图片标签、input文本输入框标签、link链接标签

块级标签、行内标签

在这里插入图片描述

2.块标签与行内标签如何转换?

   行内元素与块级函数可以相互转换,通过修改display属性值来切换块级元素和行内元素,行内元素display:inline,块级元素display:block。

css 样式标签类型转换控制标签类型的样式(display:block块级/inline行内/inline-block行内块/none隐藏)

3.关于块标签和行内标签的区别是什么?

(1).块级元素总是在新行上开始,占据一整行,其宽度自动填满其父元素宽度,垂直向下排列.(注:若想使其水平方向排序,可使用左右浮动(float:left/right)让其水平方向排列.)

备注:float属性用于创建浮动框,将其移动到另一边,直到左边缘或有边缘触及包含块或另一个
浮动框

(2).块级元素可以设置宽高,并且宽度高度以及外边距,内填充都可随意控制.(注:块级元素即使设置了宽度,仍然是独占一行的)

(3).块级元素可以包含行内元素和其他块级元素.

1.2 在标准文档流里面,行内元素具有以下特点:

(1).行内元素和其他行内元素都会在一条水平线上排列,都是在同一行的
(2).行内元素不可以设置宽高,宽度高度随文本内容的变化而变化,但是可以设置行高(line-height),同时在设置外边距margin上下无效,左右有效,内填充padding可以随意控制;
(3).行内元素不能包含块级元素,只能容纳文本或者其他行内元素.

关于CSS中margin和padding的区别?

margin 属性是设置块元素的距离上下左右元素的距离
1、语法结构
(1)margin-left:10px; 左外边距
(2)margin-right:10px; 右外边距
(3)margin-top:10px; 上外边距
(4)margin-bottom:10px; 下外边距
(5)margin:10px; 四边统一外边距
(6)margin:10px 20px; 上下、左右外边距
(7)margin:10px 20px 30px; 上、左右、下外边距
(8)margin:10px 20px 30px 40px; 上、右、下、左外边距

padding属性是设置块内元素距离块上下左右的距离
(1)padding-left:10px; 左内边距
(2)padding-right:10px; 右内边距
(3)padding-top:10px; 上内边距
(4)padding-bottom:10px; 下内边距
(5)padding:10px; 四边统一内边距
(6)padding:10px 20px; 上下、左右内边距
(7)padding:10px 20px 30px; 上、左右、下内边距
(8)padding:10px 20px 30px 40px; 上、右、下、左内边距

备注:当块元素设置了width 属性使用padding 属性会将原来块撑大,因此原来块就得减去padding 像素值才能保障块的宽高不变

扫描二维码关注公众号,回复: 14704447 查看本文章

margin:层的边框以外留的空白
background-color:背景颜色
background-image:背景图片
padding:层的边框到层的内容之间的空白
border:边框
content:内容

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_40267002/article/details/120560704
今日推荐