块元素与行内元素（布局设置常用）

已于 2022-07-30 21:51:16 修改
阅读量568 收藏 1
点赞数
分类专栏： 前端css基础 文章标签： 前端 html css css3
于 2022-07-26 15:12:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/comegoing_xin_lv/article/details/125995209
版权

目录

一、基本介绍

1、块元素

2、行内元素

二、常见问题

1、在盒子模型中，块元素可以设置宽和高，而行内元素不可以

2、在块元素内容超过盒子大小时，会换行到下一行

3、超链接内嵌套块元素，则会导致整行全部变为链接跳转地址

三、详细解释与常见行内元素块元素

一、基本介绍

1、块元素

在浏览器中占据整行，会挤占其它元素，当其它元素并排出现，会默认到移动到下一行，可以理解为强制换行元素

2、行内元素

在浏览器中以行为单位，多个行内元素并排，当超过浏览器行宽时，才会移动到下一行

二、常见问题

1、在盒子模型中，块元素可以设置宽和高，而行内元素不可以

2、在块元素内容超过盒子大小时，会换行到下一行

在本例中，“军事我”是h1元素的内容，但由于h1设置的width太小，导致内容换行呈现

3、超链接内嵌套块元素，则会导致整行全部变为链接跳转地址

三、详细解释与常见行内元素块元素

http://c.biancheng.net/view/7533.html

comegoing-归去兮来
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
行内元素、块元素都有哪些
09-22
行内元素只占内容的宽度，块元素不管内容多少都要占全行，下面为大家介绍下常见的行内元素及块元素有哪些，感兴趣的朋友可以参考下，希望对大家有所帮助
块级元素和内联元素的默认宽高
weixin_43799793的博客
01-30 1898
块级元素和内联(行内)元素的默认宽高 内联元素，是从左到右排列的，当宽度不够时换行； 块级元素，是从上到下排列的，每一个元素都另起一行，单独成一行。 一、内联元素宽高的确定 宽度：不受width的限制，有文字内容决定的，padding 和 margin 可以改变宽度。 高度：不受height的限制，padding 和margin 也不能改变。可以通过line-height 和 font-size来...
前端学习-CSS行内元素-块元素-行内块元素
Corgi_gg的博客
01-10 227
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 行内元素的盒模型 行内元素不可以设置宽度并高度但不独占一行 块元素可以设置宽度与高度但是需要独占一行 行内块元素可以设置宽度与...
CSS学习--块级元素和行内元素
weixin_38601104的博客
01-23 220
跟着学习布局和https://css-tricks.com一起学习css。 块级元素和行内元素 《CSS权威指南》中文字显示：任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如，我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复，每一行下方都会有一条黑色的细线。如果是...
如何给行内元素设置宽高
韩旭不会敲代码吧的博客
07-27 3879
我们都知道行内元素直接设置宽高是无效的。当我们在面试中遇到这个问题的时候，很容易想到给它设置 display:block或者display:inline-block就可以了，但是面试官来了句“还有其他方法吗？” 1、常用的行内元素 <a> 标签可定义锚 <abbr> 表示一个缩写形式 <acronym>定义只取首字母缩写 <b> 字体加粗 <bdo> 可覆盖默认的文本方向 <big> 大号字体加粗 <br>
[html] 可以给内联元素设置宽和高吗？为什么？
歌谣的博客
04-12 839
[html] 可以给内联元素设置宽和高吗？为什么？ 1.正常情况下不能设置宽高(可替换内容元素除外例如img) 2.元素被浮动，绝对定位，固定定位后，可以设置宽高 3.display:block,display:inline-block等后可以设置宽高 4.内联元素的宽高是由其内容决定的，并且在一行显示（可以换行），呈现包裹性,因此设置宽高无效。 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题
前端-HTML/CSS-元素宽高特点及元素类型转换-块级元素、行级元素、行内块级元素
zx237964689的博客
05-28 1900
1、块级元素:（1）、可以设置宽高（2）、不可以与其他元素待在一行（3）、不设置宽高时，元素的宽度等于父元素的宽，高度由元素内容的高度决定（4）、当设置有宽高时，元素的宽高就是设置的值2、行级元素：（1）、不可以设置宽高，设置的宽高无效（2）、可以与其他元素待在一行（3）、元素的宽高由元素内容的宽高决定3、行内块级元素：（1）、可以设置宽高（2）、可以与其他元素待在一行（3）、当没有设置宽高时，宽高由元素内容决定。
行内元素、块元素、行内块
weixin_47227886的博客
04-10 721
1. 行内元素 不可以设置宽高，可以设置margin、padding，它的宽高是由内容撑开的； 一行可以有多个行内块元素。 span a br em i label 2. 块元素 可以设置宽高，在没有设置宽的时候默认width为100%； 独占一行。 h1~h6 p div ul ol li form table 3. 行内块元素 可以设置宽高，不会独占一行。 img input select textarea button 4.区别 元素 .
块级元素、行内元素和行内块元素
weixin_49343253的博客
06-27 553
一、块级元素 块级元素：可以设置宽高、行高和内外间距，会独占一行，宽度默认等于父元素宽度，可容纳其他块级元素和行内元素 块级元素主要有 <div> //定义文档中的分区或节 <form> //创建 HTML 表单 <address> //定义地址 <hr> //创建一条水平线 <noframes> //为那些不支持框架的浏览器显示文本，于 frames...
浅谈CSS块级元素与行内元素(内联元素)的区别和联系
12-13
在css盒子模型中，我们提到了html元素中的块元素（block element）和内联元素（inline element）。那么它们究竟是什么呢？ 其实，这两种元素都是html规范中的概念。...内联元素(inline element)也叫内嵌元素或行内元
行内和块元素
04-18
对HTML中的各种元素进行分类，初学者不至于弄混行内元素和块元素
微信小程序布局之行内元素和块级元素
03-29
元素按照显示方式主要可以分为块级元素和行内元素，元素的显示方式由display属性控制。 块级元素特点总结： 1、总是在新行上开始 2、宽度的默认为width+margin-left+margin-right+padding-left+padding-right刚好...
关于行内元素能否设置宽高的问题
热门推荐
little_little0_0的博客
11-18 1万+
理论上来说，行内元素区别于块级元素的一点就是它不能设置宽高。例如：   &lt;div style="width: 100px; height: 100px; background-color: black"&gt; &lt;span style="width: 10px; height: 10px; background-color: white"&gt;&lt;/span&gt;...
行内元素能设置宽高吗
weixin_30257433的博客
04-14 1057
除了行内非替换元素，table-rows,and row groups 其他元素都能设置宽 除了行内非替换元素，table-colums,colum-groups 其他元素都能设置高 行内元素包含行内替换元素（img等）和行内非替换元素（a span等） 行内替换元素是可以设置宽高的，行内非替换元素是不能设置宽高的。 当给行内元素设置 float：left; float:right...
关于行内元素的宽高
weixin_30496751的博客
07-25 126
电话面试，被问到行内元素和块级元素的区别。 我回答说，块级元素独占一行，可设置宽高。行内元素不会独占一行，且不能设置宽高。 然后面试官问我，img和input是行内元素么，他们能设置宽高吗？ 我一想，是啊，这两个也是行内元素，不过却能设置宽高啊。于是当场被问住了，说不出所以然。。。 然后自己查阅资料，发现了这篇博文，为何img、input等内联元素可以设置宽、高 豁然开朗，原来img和i...
问题 - li 标签无法设置宽度和高度
Nshrod的博客
01-14 5849
li 标签无法设置宽度和高度 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>图片相册</title> </head> <body> <!-- 首先将HTML结构搭建起来 --> <img class="bigImg" src="./imag
如何给行内元素设置宽高？
weixin_30564901的博客
04-29 400
前言 在实际开发中，我们不可避免的有时需要给行内元素设置宽高，那么如何来实现呢？ 方法一：使用display display:block/inline-block/flex/inline-flex <style> * { list-style: none; border: 0; ...
块级元素，行内元素，行内块元素区别
a242424242424的博客
04-12 175
1.相邻的行内块元素之间会有空白的间隙，可以给盒子设置css样式font-size:0来解决。2.行内元素可设置水平方向内外边距，但无法设置垂直方向内外边距。1.所有行内元素只会在一行里面显示，只有排不下了才会换行显示。3.行内元素不能设置宽高，并且不可以包含块级元素。3.块级元素的高度，行高，内外边距都可以控制。行内块元素：display：inline-block。3.行内块元素无法转换成行内元素。4.行内元素可以包含块级元素。2.可以设置宽，高，内外边距。行内元素： display:inline。
50个前端实战项目之04：隐藏的搜索小组件
最新发布
前端开发博客
05-03 1145
大家好，我是宝哥。今天讲50个前端实战项目之04：隐藏的搜索小组件。源码下载地址https://github.com/bradtraversy/50projects50days/tree/master/hidden-search前端实战项目系列正在更新：04/5001：可展开卡片02：进度条03：旋转导航动画04：隐藏的搜索小组件项目介绍本项目演示了一个简洁实用的隐藏式搜索小部件。点击搜索按钮后，...
行内元素、块元素、行内块元素
09-18
而行内块元素具备了行内元素和块元素的特点，可以自由设置元素的宽度和高度，并且可以在一行中放置多个行内块元素。一些常见的行内元素有：a、span、em、strong等；常见的块元素有：div、p、h1-h6等；常见的行内块...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值