元素的特性

梦里梦外; 2022-05-31 07:37 147阅读 0赞

# 元素的特性 #

## 行内标签 ##

**特性**

>  *   同排显示
>     
>      *   不能设置宽度、高度
>         
>          *   支持左右的外边距 以及 内边距

所有行内标签: a,b,strong,span,img,label,button,input,select,textarea

## 块级标签 ##

**特性**

>  *   单独占据一行
>     
>      *   可以设置宽度、高度
>         
>          *   支持左右的外边距 以及 内边距

所有块级元素:header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer

## 行块特性的转换 ##

span和div最典型的行内元素和块级元素

display

display:block;把元素转换为块状特性

display:inline;把元素转换为行内特性

## 行块级的特性与转换 ##

display:inline-block;

inline-block是把元素转换为行块级的意思。

注意：

1.父级宽度不够时会自动换行

2.li会有个小间隙(字体大小的一半)，这个间隙是因为li的写法

<ul>
     <li>
     ...           
     </li>
     <li>
     ...
     </li>
    </ul>

<ul>
     <li>...</li><li>...</li> 
    </ul>

3.当给元素填充内容的时候，会出现下移情况，原因是原来的对齐方式很迷(逞强脸)，因为这时候加个vertical-align:"top"/"bottom"（推荐使用属性值）/"middle";即可解决，

## 外边距特性 ##

上下的外边距会进行合并，以边距大的为准

默认情况下，自己元素的外边距不能直接作用于父级，而是传递给父级

解决方案:父级加边框或者加上内边距，虽然这两者能解决问题，但是在实际开发中

最常见的是给元素加上overflow:hidden;样式。

发表评论取消回复

表情：

评论列表（有 0 条评论，147人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5有哪些新特性、移除了那些元素？

* [https://www.cnblogs.com/star91/p/5659134.html][https_www.cnblogs.com_star91_p_565...

绝地灬酷狼/ 2024年04月19日 11:00/ 0 赞/ 111 阅读

相关 css三大特性及原元素特性

目录一、css三大特性 1、继承性 2、层叠行 3、优先级二、元素特性 1、块元素 2、行元素 3、行内块元素 4、元素转换 -------------

偏执的太偏执、/ 2024年04月06日 13:20/ 0 赞/ 91 阅读

相关 HTML5有哪些新特性、移除了哪些元素？

前端面试题（4）打卡 `2021-4-28` HTML `HTML5` 有哪些新特性、移除了哪些元素？ HTML5新增`27`个元素移除`16`个元

梦里梦外;/ 2023年01月17日 09:29/ 0 赞/ 201 阅读

相关 HTML5有哪些新特性、移除了哪些元素？

> Html5新增了 27 个元素，废弃了 16 个元素，根据现有的标准规范，把 HTML5 的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素 4 大类。

分手后的思念是犯贱/ 2022年12月27日 07:36/ 0 赞/ 254 阅读

相关 [CSS二] css属性，元素溢出和显示特性

四、css属性 1. 布局常用样式属性 width 设置元素(标签)的宽度，如：width:100px; height 设置元素(标签)的高度，如：he

迷南。/ 2022年11月26日 05:00/ 0 赞/ 172 阅读

相关 js中迭代元素特性与DOM中的DocumentFragment类型

JS中迭代元素特性　　在需要将DOM结构序列化为XML或者HTML字符串时，多数都会涉及遍历元素的特性，这个时候attributes属性就可以派上用场。

以你之姓@/ 2022年08月05日 15:14/ 0 赞/ 167 阅读

相关元素的特性

元素的特性行内标签特性 > 同排显示 > > 不能设置宽度、高度 > > 支

梦里梦外;/ 2022年05月31日 07:37/ 0 赞/ 148 阅读

相关 CSS3伪类和伪元素的特性和区别

前端er们大都或多或少地接触过CSS伪类和伪元素，比如最常见的`:focus`,`:hover`以及`<a>`标签的`:link`、`visited`等，伪元素较常见的比如`:

「爱情、让人受尽委屈。」/ 2022年01月07日 15:55/ 0 赞/ 364 阅读

相关 html 5中的新特性之强化表单元素及属性

[html 5中的新特性之强化表单元素及属性][html 5] 之前我们判断用户提交的是否是Email 的时候，往往使用js 进行判断，但在html5中可以有新的方式进行判断

落日映苍穹つ/ 2021年10月24日 01:32/ 0 赞/ 281 阅读

相关 JS--JavaScript元素节点Element特性、访问元素（getElementById、getElementByTagName）、创建元素createElement

元素节点 Element类型是最常用的节点类型，它具有以下特征： nodeType值为1 nodeName值为元素的标签名称，也可以使用tagName属性。

野性酷女/ 2021年08月14日 02:17/ 0 赞/ 560 阅读