首页 > 其他分享 >HTML标签盒模型

HTML标签盒模型

时间:2023-03-24 14:02:48浏览次数:38  
标签:行内 标签 模型 元素 HTML 内边 设置 解析 display

一、自我介绍

本人2021年6月参加工作,擅长技术主要有html/css/javaScript/vue/uni等,很懒一直都不想写文章,这是我第一篇博文。

二、技术分享

盒模型原理

行内元素

特性:1、无法设置宽高,其宽高由内容撑开;

    2、可以设置内边距及左右外边距,上下外边距无法设置;

    3、建议只放入文本及其他行内元素;

    4、能够解析换行,空格只能解析一个;

    5、默认横向排版,不会霸占一行。

行内块元素

特性:1、可以设置宽高;

    2、可以设置内边距及外边距;

    3、建议只放入文本及其他行内元素;

    4、能够解析换行,空格只能解析一个;

    5、默认横向排版,不会霸占一行。

块级元素

特性:1、比较霸道,自己独占一行;

    2、可以设置宽高;

    3、可以设置内边距及外边距;

    4、不能解析换行,空格只能解析一个;

    5、宽度默认是容器(父级宽度)的100%;

    6、相当于矩形容器或盒子,可以放行内、行内块或者块级元素。

元素类型转换

特殊情况下我们需要进行元素的模式转换,改变默认元素模式使其拥有另一种元素模式的特性,使用display属性能够将三者进行任意转换。

1、display:inline;转换为行内元素。 【不常用】

2、display:block;转换为块状元素。 【常用】

3、display:inline-block;转换为行内块状元素 【比较常用】

先分享这么多

三、希望

希望以后克服懒惰,多多分享


标签:行内,标签,模型,元素,HTML,内边,设置,解析,display
From: https://blog.51cto.com/u_15878233/6147196

相关文章