默认显示类型与显示类型转换

​ 默认显示类型和显示类型转换的区别

​ 一、什么是显示样式?

​ 显示样式(display),是W3C规定浏览器采取哪种盒模型规则来显示一个元素,常用显示样式的值有:
block(块级盒模型)
inline(行内盒模型)
inline-block(行内块级盒模型)

二、块级标签 :block

行内标签:inline

行内块级:inlie-block

display:inline-block;可以是元素在同一行显示 比如 缝隙可以在body添加font-size:0;就可以清除缝隙

没有加 display:inline-block;就不会在同一行显示<在这里插入图片描述

数字和字母不会换行,因为浏览器会将它默认为一个字符串

overflow:hidden 可以将元素给隐藏起来

inline-block出现的两个问题:

​ 1.解析空格,给父级设置font-size:0;

​ 2.元素之间的对齐会一以最下面一排字对齐; vertical-align; top;

三种显示类型特征

三种显示类型特征
一、块级元素特性:**
**block: (div/p/dl/form/h1-h6/ol/ul)
二、行内元素特性:**
**inline: (a/b/em/i/img/span)
三、行内块元素特性(集合两种盒模型的特征): inline-block: (input)
1、独占一行1、和其他行内元素处于同一行1、本质上是行内元素,具有行内元素的性质
2、高度由里面的元素撑开2、不支持宽高2、支持宽高
3、宽度默认100%(继承父元素宽度)3、上下外边距无效**,auto无效(不支持auto居中)3、上下外边距有效,**auto无效(不支持auto居中)
4、可以设置外边距/内边距4、内边距只对内联元素产生影响,无视块元素4、内边距只对内联元素产生影响,无视块元素
5、可以包裹其他任意元素5、标签之间的空格解析5、标签之间的空格解析
6、p标签不可包裹块级元素(只存放文本6、a标签能包裹块级元素(特殊、区域链接)6、img标签不是行内块元素(是行内元素,但是可以设置宽高,

**元素可见性:**1、visibility:hidden;(对象隐藏:默认值visible) opcity:0;(透明度) opcity:0;为零完全透明 但位置还在

元素溢出(就是文字多出来了):1、overflow:hidden (溢出隐藏 )

​ 2、overflow:visible;(默认值)

​ 3.overflow:auto;(文字超出时才有滚动条)

​ 4、overflow:srcoll;(文字超不超出都会有滚动条·)

​ 5、overflow-y:srcoll; overflow-x:hiddenl; (分别设置横纵滚动条)

默认样式清除
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值