css中的一些问题

柔情只为你懂 2022-12-23 04:00 134阅读 0赞

1、每个内联元素都会有一个strut(支柱)

比如，下面的img

<div class="parent">
      <img class="child" src="./assets/logo.png">
    </div>
    
    .parent{
      background:gray;
    }
    .child{
      line-height: 0;
      border: 1px solid red;
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70][]

可以看到黄色圈出来的地方，会多了几像素的高度，这是内联元素会存在的空白节点导致的

可以通过以下方法去除空白节点

1) 在父元素上面设置属性：font-size:0(隐藏文本)  或者line-height:0（将行高去掉）

2)在子元素上面设置属性：display:block或者给vertical-align:设置成除了默认值之外的任何值，如top（将基线设置成顶部对齐）

2、在ios下输入框的问题：输入框聚焦的时候，不显示光标，每输入一个字符的时候，就需要手动聚焦  
解决方法：在input框添加属性：  -webkit-user-select: text !important;

3、fixed定位没有生效，可能是父元素有设置了transform，参考文章：[https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/][https_www.zhangxinxu.com_wordpress_2015_05_css3-transform-affect]，[https://www.cnblogs.com/mufc/p/12029393.html][https_www.cnblogs.com_mufc_p_12029393.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70]: /images/20221120/5175d8bd99514ffc91ef2bd9769cc10c.png
[https_www.zhangxinxu.com_wordpress_2015_05_css3-transform-affect]: https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/
[https_www.cnblogs.com_mufc_p_12029393.html]: https://www.cnblogs.com/mufc/p/12029393.html

发表评论取消回复

表情：

评论列表（有 0 条评论，134人围观）

还没有评论，来说两句吧...

相关阅读

相关关于css中布局遇到的一些问题

现在本人初学网页布局经常遇到一些布局问题比如图片错位. 　　遇到的问题以及解决方案如下　　行内元素有缝隙块级元素没有缝隙行内

缺乏、安全感/ 2023年06月03日 12:58/ 0 赞/ 4 阅读

相关 CSS的一些总结

![在这里插入图片描述][20210113193205311.png_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib

我就是我/ 2023年01月06日 01:56/ 0 赞/ 171 阅读

相关 css中的一些问题

1、每个内联元素都会有一个strut(支柱) 比如，下面的img <div class="parent"> <img class="child" src

柔情只为你懂/ 2022年12月23日 04:00/ 0 赞/ 135 阅读

相关学习笔记——CSS中的一些公有样式

-------------------- > 在CSS中，我们可能会多次重复用到一些样式，我们会将这些样式放在单独的文件夹中，使用时引用即可。这样就大大的提高了代码的复用性，

蔚落/ 2022年11月21日 09:41/ 0 赞/ 220 阅读

相关 css中的一些问题

1、每个内联元素都会有一个strut(支柱) 比如，下面的img <div class="parent"> <img class="child" src

浅浅的花香味﹌/ 2022年11月20日 01:53/ 0 赞/ 152 阅读

相关 CSS、HTML、js一些问题总结

1、写好的html元素li、img等之间出现间隙？ <!DOCTYPE html> <html> <head></head>

比眉伴天荒/ 2022年10月10日 12:49/ 0 赞/ 146 阅读

相关实操中遇到的一些关于CSS的问题（持续更新）

记录一下使用中遇到的一些样式问题，方便自己后期查找，纯干货（为方便更新，序号从大到小记录） 3、图片宽度过长水平居中图片宽度过长，在不想压缩图片大小还想要居中的时候，

迈不过友情╰/ 2022年10月01日 06:44/ 0 赞/ 200 阅读

相关 Css中的一些疑问

1.表格中 cellspacing和cellpadding的区别它们都在表格中发挥着作用，cellpadding其实设置就是单元格的大小。通俗的说：设置的是你家的大

旧城等待，/ 2022年06月10日 07:57/ 0 赞/ 252 阅读

相关 CSS文字垂直居中的一些问题

说到CSS文字垂直居中，很多初学者都喜欢用调整行高等于div高度的方式来达到效果， div { height:30px; line-height

迷南。/ 2022年03月17日 13:14/ 0 赞/ 538 阅读

相关 fastjson中的一些问题

fastjson中的null问题： QuoteFieldNames——输出key时是否使用双引号,默认为true WriteMapNullValue——是否输出值为n

你的名字/ 2021年05月12日 11:54/ 0 赞/ 568 阅读