定位后的行内元素设置宽高

最新推荐文章于 2022-10-14 19:54:08 发布
最新推荐文章于 2022-10-14 19:54:08 发布
阅读量1.4k 收藏 2
点赞数 5
分类专栏： HTML css 文章标签： 行内元素宽高设置 可置换元素 定位的行内元素宽高设置
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37686205/article/details/90896964
版权
css 同时被 2 个专栏收录
53 篇文章 0 订阅
订阅专栏
HTML
40 篇文章 0 订阅
订阅专栏

相对定位之后的行内元素是依然不可以设置宽高的，需要加display:block设置；但是绝对定位后的行内元素就可以直接设置了。（这里说的设置是指width生效，而不是单纯的写上了而已）

注：html中有一类元素比较特殊，虽然他们属于行内元素，但是他们是可以设置宽高的，如img|input|select|textarea|button|label等，他们被称为可置换元素（Replaced
element）

阳光下的冷静
关注
  • 5
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
为什么有的行内元素可以设置宽高
古语静水流深
11-09 1442
今天偶尔在做一个锚点连接的时候，发现一个a元素是0x0的放在页面。当然这样做也是有目的的，不让其看出页面这个位置有什么。 就好奇心的设置它的宽高，结果发现没什么用，只有转化为块元素才能起效。虽然这是一个刚开始工作时就知道的一些知识点，但是我当时就以为简单就没有去深入看看这些。现在遇到感觉挺神奇，所以就参考一些资料写下这篇博客。 html中有一类元素比较特殊，虽然他们属于行内元素，但是他
关于行内元素的宽高
weixin_30496751的博客
07-25 127
电话面试，被问到行内元素和块级元素的区别。 我回答说，块级元素独占一行，可设置宽高。行内元素不会独占一行，且不能设置宽高。 然后面试官问我，img和input是行内元素么，他们能设置宽高吗？ 我一想，是啊，这两个也是行内元素，不过却能设置宽高啊。于是当场被问住了，说不出所以然。。。 然后自己查阅资料，发现了这篇博文，为何img、input等内联元素可以设置宽、高 豁然开朗，原来img和i...
在设置元素的绝对定位相对定位时，一定要注意宽度和高度的设置！！！
weixin_46305214的博客
03-17 3644
元素设置position时，如果没有为其设置宽、高，则值默认为0 HTML代码 显示效果 此时如果不设置宽度，设置高度 显示效果 设置宽度，不设置高度 显示效果 ...
行内元素设置宽高
吴渣渣的博客
08-05 4717
对行内元素如span设置宽高，可以通过css设置display：block或者设置为浮动float 块元素。　特性：有物理属性，width,height写值起作用，而且要占据一行。 内联元素。 特性：没有物理属性。但是margin，padding值有用。不占据一行，后边可以有兄弟元素。 即是块又是内联，根据兄弟兄弟元素决定。 为什么是float之后才会有物理属性，这就是块与内联元素相互转化的问题。
行内元素如何设置宽高
weixin_39271545的博客
02-26 3976
行内元素如何设置宽高 常用内联元素：span img a button input l abel select textarea q strong br i em 等 常用块级元素：div p h1…h6 ol ul dl table form… 块级元素（block）特点： 1.每个块级元素都独占一行 其宽度自动填满其父元素宽度。 2.但可以设...
绝对定位也可触发行内元素的layout说明
09-25
在网页布局设计中，"绝对定位"和"行内元素的layout"是两个重要的概念，它们在CSS样式中起着至关重要的作用。本篇文章将详细探讨这两个知识点，并着重解决在Internet Explorer 6（IE6）浏览器下遇到的问题。 首先，...
CSS行内元素和块级元素的居中实例分析
09-25
- 将块级元素转换为行内元素，如`display: inline`，然后使用`text-align: center`，但这会导致无法设置宽高。 - 利用相对布局，设置父元素`float: left`，`position: relative`，`left: 50%`，子元素同样`float: ...
设置块元素居窗口中间的位置实现方法
09-22
首先，将元素的`position`设置为`relative`或`absolute`，然后使用`transform: translateX()`和`translateY()`方法将其向左和向上移动自身宽高的负50%。 ```css .element { position: relative; left: 50%; top:...
关于css 行元素和块元素 相互转换 居中
09-24
2. 将块级元素转换为行内元素：通过`display: inline`，然后设置`text-align: center`，但这样做会失去块级元素设置宽高的能力。 3. 利用相对定位：父元素设置`float: left`，`position: relative`，`left: 50%`；子...
第十三课 css元素、定位与浮动-011
08-03
这些元素结合了行内元素和块级元素的特点，既能设置宽高，也可以设置`margin`和`padding`，并且能与其他行内元素并排显示。`display`属性设置为`inline-block`。 接下来，我们讨论CSS的定位技术： 1. **静态定位**...
相对定位让父元素高度不能自适应解决办法
XYLHxylh的博客
03-04 1949
<template> <div> <div class="c"> <div class="a">1</div> <div class="b">2</div> </div> &a
前端学习（188）:浏览器内核和浏览器前缀
歌谣的博客
12-23 288
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
CSS绝对定位和相对定位的百分比计算以及宽高计算
qq_20243873的博客
08-18 1998
css定位设置百分比值的计算方式、绝对定位的宽高计算方式
伪元素::before使用方法
weixin_58414196的博客
03-06 779
1、伪元素一般用于双标签内 2、伪元素是行内元素 默认没有宽高 需要定位显示设置宽高 3、适应场景：比如搜索框内的🔍小图标 .xtx-min-nav .search::before { content: ''; width: 18px; height: 18px; background: url('../images/sprites.png') -80px -70px; (精灵图定位) position: absolute; top: 5px; left: 2px; } ..
初学前端-CSS
weixin_61392399的博客
10-14 1117
前端三剑客中的CSS初学总结快来看看
伪元素基础知识
m0_61123456的博客
11-05 1415
伪元素： 概念：指可以在HTML标签的开头或者结尾通过css来添加内容，该内容可以单独设置css 样式。 作用：能够实现一些页面效果，比如三角形 语法： 在标签开头添加内容 ::before{ content: '' } ::before是伪元素专用选择器，能够在标签开头添加内容，内容可以是图片或者文字或者空格。 特点： 通过伪元素添加的内容可以当做改标签的子元素，可以设置盒模型和宽高颜色之类的CSS属性。。 ‘content ...
深入了解标准流以及脱标元素的特点
qq_52732369的博客
12-23 468
深入了解标准流以及脱标元素的特点
css元素定位与宽高自适应
dum_plings的博客
09-23 2556
css元素定位属性： position属性：定义简历元素布局所用的定位机制。 语法：{position：static/absolute/relative/fixed} 说明： static：默认值。没有定位，元素出现在正常的流中 absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。 元素的位置通过left 、top、right、以及bottom属性进行规定 ...
CSS进阶——绝对定位元素的宽高是如何定义的
weixin_33709609的博客
06-05 833
先抛两个小问题： 绝对定位相对于谁来定位？ 大多数人都知道是相对于最近的position设置为relative/absolute/fixed的父元素来定位。那如果所有父元素的position都没有设置上面三个值，那又是相对谁来定位呢？ 包含块是什么？初始包含块又是什么？ 元素A包含元素B，A设置position:relat...
css 子元素如何不继承父元素的宽高
最新发布
05-05
在 CSS 中，子元素默认会继承父元素的宽度和高度。如果你想让子元素不继承父元素的宽度和高度，可以使用以下方式： 1. 使用绝对定位：将子元素设置为绝对定位，然后使用 top、bottom、left 和 right 属性来定位元素。这样，子元素将不再继承父元素的宽度和高度。 2. 使用 float 属性：将子元素设置为浮动元素，可以使其脱离文档流并不再继承父元素的宽度和高度。 3. 使用 display: inline-block 或 display: inline-flex：这两个属性都可以将子元素变为行内元素，从而不再继承父元素的宽度和高度。 4. 使用 box-sizing 属性：将父元素的 box-sizing 属性设置为 border-box，这样子元素就不会继承父元素的 padding 和 border，但仍会继承父元素的宽度和高度。 需要注意的是，这些方法都可能会影响到子元素的布局，因此在使用时需要考虑到页面的整体布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值