行内元素特性

最新推荐文章于 2020-09-08 19:44:54 发布
原创 最新推荐文章于 2020-09-08 19:44:54 发布 · 612 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细解读了行内元素的属性应用规则，包括高度、宽度、内边距、外边距等，并通过测试代码验证特性。主要内容涵盖：1. 行内元素不支持height属性，可通过line-height调整高度；2. 不支持width属性；3. padding仅支持padding-left和padding-right；4. margin仅影响元素左右边距，不作用于上下。

１＞行内元素不会应用height属性，但是盒子高度可以通过line-height指定；

２＞行内元素不会应用width属性；

２＞可以为行内元素设置padding，但只有padding-left和padding-right有效；

３＞margin属性和padding属性一样，对行内元素左右有效，上下无效；

自己写的测试demo行内元素特性测试


大笑记录下学习的点点滴滴


行内元素、块元素都有哪些
09-22
在HTML中，元素被分为两...总结起来，了解行内元素和块级元素的特性和应用场景是HTML/CSS学习的基础，它们在网页设计中起到关键作用。同时，掌握如何通过CSS进行元素的布局管理和文件引用也是提高开发效率的重要技巧。
css盒模型和块级、行内元素深入理解
09-25
其中，盒模型和元素的分类（块级元素和行内元素）是理解页面布局的基础。本文将深入探讨这两个概念。 首先，盒模型是CSS中的核心概念，它定义了元素如何占用空间和与其他元素交互。每个HTML元素都可以被视为一个...
行内元素的特性
weixin_39299249的博客
11-04 183
行内元素的特性
行内元素、行内块、块元素的特点
sword_chiu的博客
05-24 3850
块级元素（代表div） 特点： 宽度默认与父级相同 独占一行 可设置宽高，margin padding 注：p标签、h、dt等文字类标签内最好不要放块级元素 行内元素（代表 span a） 特点 不能设置宽高 一行内显示 默认宽度是内容宽度 padding值只左右下有效，margin值只左右有效 可以看到这里设置span的margin，只左右有效 可以看到这里设置padding，但是只左右下有效 结论：行内元素最好只设置左右padding跟margin 以免造成元素属性混乱 行内元素内最好不放块级
行内元素及其特点
weixin_50659023的博客
09-08 5342
行内元素(inline-level) 常见的行内元素有在这里插、、、、、、、、、入代码片等，其中 标签最典型的行内元素。有的地方也成内联元素 行内元素的特点： （1）相邻行内元素在一行上，一行可以显示多个。 （2）高、宽直接设置是无效的。 （3）默认宽度就是它本身内容的宽度。 （4）行内元素只能容纳文本或则其他行内元素。 注意： 链接里面不能再放链接。 特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。 ...
行内元素和块元素以及行内块元素的特点
weixin_30823001的博客
08-07 683
一、背景 初学html，接触很多标签<h1>、<p>、<span>、<ul>、<em>等，当写出简单的小页面的时候，例如仅仅是一篇带有标题的文章，标题<h1>标签单独一行，不管后面有多大的空间；<p>标签中使用多个<em>给某些词做强调，但是<em>却和<p>中的其他...
浅谈CSS块级元素与行内元素(内联元素)的区别和联系
09-24
在CSS布局中，块级元素（Block Element）和行内元素...总之，了解CSS块级元素和行内元素的特性和交互方式是构建高效网页布局的基础。掌握这些概念有助于更好地控制网页元素的排列和样式，从而实现理想的网页设计效果。
html中的行内元素和块级元素有哪些.pdf
05-08
此外，设置 float 属性也可以使行内元素转换为块级元素，并拥有浮动特性。设置 position 属性也可以使行内元素转换为块级元素，但这只是副作用，它们的主要作用是干扰布局效果。 需要注意的是，块级元素的宽度会...
行内和块元素
04-18
行内元素的高度和宽度会随着内容而变化，通常行内元素只接受水平方向的边距和填充设置，而垂直方向的边距和填充则不会产生效果。常见的行内元素有：span、strong、em、img、input、label、select、textarea、cite等...
CSS：行内元素的特点
baidu_24743861的博客
08-11 788
1、相邻行内元素在一行上，一行可以显示多个 2、高宽直接设置是无效的 3、默认宽度就是它本身内容的宽度 4、行内元素只能容纳文本或其他行内元素
块级元素、行内元素、行内块级元素的特点
lishundi的博客
07-25 5197
1.块级元素： (1)独自占据一行,故默认宽度是容器的100%。 (2)可以设置宽、高、行高、内外边距。 (3)可以容纳行内元素和其他块级元素。 注：文字类的块级元素不能容纳块级元素，例如<p>/<h1>~<h6>/<dt> 2.行内元素： (1)会和相邻的行内元素排成一行。 (2)设置宽、高无效，默认宽高是其自身内容的宽高。 (3)...
HTML学习之块级元素和行内元素的特征和区别（一）
热门推荐
liuying1802028915的博客
10-13 2万+
这几天在学习HTML，这里总结一下块级元素和行内元素的特征和区别，本文也是来自于其他同行的一些文章，在这里感谢一下那些作者，下面先把这些原文粘贴出来 http://www.cnblogs.com/Jackie0714/p/4923639.html http://blog.youkuaiyun.com/yuyanqiao/article/details/8558118 一，下面从概念的角度来说一下
块元素和行内元素的特点
haha-zhao的博客
04-09 3434
块元素特点： 1.独占一行 2.元素的宽高和内外边距都可以设置 3.宽度如果不设置就是父级元素的100% 常见的块元素有以下几种：p div table h1 h2 h3 h4 h5 h6 ul ol li 行内元素特点： 1.和其他元素可以在同一行 2.不能设置宽高，不能设置内外边距 3.宽度就是图片或文字的宽度，不可以改变 常见的行内元素有以下几种：span img br input ...
p标签内不能包含块级元素
shitouPlus的博客
07-16 2432
发现一个不常用的冷知识 学html的时候，以为块级元素可以包含任意的块级元素 事实并非如此，p标签是不可以包含任何跨级元素的 有些块元素不可以包含另一些块元素  ，DTD中规定了块级元素是不能放在P里; P标签内包含块元素时，它会先结束自己，比如：测试p包含div  那么浏览器会解释成： 测试p包含div  会多解释出一个p
HTML5应用：setCustomValidity(message)接口
shitouPlus的博客
07-26 1981
html5自带的表单验证给前端开发带来了极大的方便，但有些验证还是要自己写，比如常见的 注册界面，需要用户重复输入两次密码，这时候自带的type验证还有pattern验证是不能够实现 的。但是可以换一种角度，通过更改第二次输入密码时的pattern来达到验证。我表达的可能 不是很清楚，下面通过一个demo看一下具体的实现。
纯css画三角形/梯形（兼容ie6）
shitouPlus的博客
07-18 1252
代码很简单也很容易理解，及用css盒模型来实现效果 实例：宽高为0的话是三角形，否则是梯形 Document .triangle{ width: 0; height: 0; border-style: solid; border-color: red transparent transparent transparent; border-wid
语义化前段UI框架Semantic UI
shitouPlus的博客
10-05 1166
Semantci UI是一个高度语义化的前端框架，需要引入semantic.min.css和semantic.min.js, 因为此框架也依赖jquery，所以需要引入jquery．min．js，此外框架还有很多主题theme， 需要使用的话可以下载需要的主题，引入主题中的图片和字体文件就可以了，界面还是很 漂亮的。 官网地址http://www.semantic-ui.cn/introd
强大的移动web前端框架zeptojs
shitouPlus的博客
10-08 1026
移动端web越来越流行，各种移动端框架也应运而生，这里推荐一下比较流行的zeptojs. zeptojs比较适合移动端web的设计，它的初衷就是移动端jQuery框架，所以语法和jQuery 非常相似，如果你会jQuery的话，那么学习zeptojs将会很容易，其次由于精简了很多模块， 所以体积比较小，所有模块整合在一起之后也只有30+多KB比较适合移动端浏览器，它的 触屏和手势事件支持的
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值