资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/我脑中飘来飘去的css魔幻属性

我脑中飘来飘去的css魔幻属性

JouyPub / 2986人阅读

摘要：先来一张图，看懂的几个属性顺便带上图片出处，文章讲得还可以，理解这张图片，后面就好理解了。元素根据标签的属性决定显示输入框还是按钮。还有，还有近来很火的。

最近看到一篇20 个CSS高级技巧汇总的汇总，感触很深，不过我想，与技巧相比，有些常见css布局难题，有时候更加让我们的日常开发变得踌躇沮丧吧。
在写这一篇文章之前，自己还写过一篇：我所不注意的那些CSS冷知识，但却阻止了我做项目的速度,如果你看了，我相信你也会受益的。

为什么此处li标签内的p元素看起来独自撑开了一行

这是我在segmentfault上看到的一个问题，以前自己遇到过，所以就很热情洋溢的去回答了一下，难道遇到个自己会的，示例代码是这样的：
CSS:

li{
    display: inline-block;
    text-align: center;
}
.left,.center,.right{
    width:300px;
    height:300px;
}
.left{
    background-color: #999;
}
.center{
    background-color: #ccc;
}
.right{
    background-color: #eee;
}  
HTML:

    
    
  • 
        
    1
      
    
    • 
    
  • 
    
  •


大概就是这样子，其实文和图有点不对应，代码中第一个模块他只写了一个“1”,我为了现象更加明显，且好说明为什么，就打了一大段文字，现在我们来说说为什么。先来一张图，看懂vertical-align的几个属性,顺便带上图片出处，文章讲得还可以，理解这张图片，后面就好理解了。

inline-block的vertical-align 属性默认是baseline对齐（深入理解的送福利），也就是英文文字小写字母a,b,c这类字母底部的那条线，因为这些是外国人发明的，所以以英文字母才有针对性。inline-block拥有vertical-align属性，其默认是基线对齐的，所以这三个inline-box需要基线对齐，而其基准线就是正常流中最后一个line box的基线,如果这个元素是空的，没有内容，那么这个基线就是最后这个元素的margin-bottom线；如果这个元素不为空，那么这个元素的基线就是元素里面内容最后一行文字的基线；所以我们一个一个来套，发现这三个li元素在一行，第一个有文字，其基线为文字底部；最后一个没有文字，其基线为margin-bottom线,考试要考，划重点，可以自己为元素设置margin-bottom试试,这就会造成第一个和二，三个错行的感觉，其实他两是为了基线对齐，所以多敲几十个文字就能明显看出其差别。所以最简单的解决方案就是为li添加vertical-align: 属性不为baseline，气不气，改变其纵向的对齐方式的默认属性;为啥非弄个折腾人勒。关于vertical-align,如果还想做这方面的深入了解，可以看看张大侠的分析

img图片撑不满整个div，有空隙

直接上图更直观(箭头所指)：

相关css和html:





    
    

      
    .test {
    background-color: yellowgreen;
    font-size: 18px;
    vertical-align: top;
    }
    .test span {
        background-color: bisque;
    }
    .blank {
        line-height: 20px;
        height: 20px;
    }
    img {
        width: 260px;
        height: 260px;
        float: left;
    }
    input {
        border: 1px solid red;
        height: 24px;
        margin-left: 30px;
    }
    .box {
        background: black;
        color: white;
        padding-left: 20px;
        line-height: 10px;
    }
    .box .dot {
        display: inline-block;
        width: 4px;
        height: 4px;
        background: white;
        vertical-align: bottom;
    }

图片一中，实现了文字环绕图片那种想要的效果，并且后面的元素没有上移错位,其原因是上面说过的，如果块状元素没有显示的设置高度，其高度由其元素内的最高的linebox决定,所以第一张图片div的高度是比img高度高的，因为我重要的事情说了三遍，文字够多。而第二张图片，div高度只有144px，因为img是浮动的，他的linebox被浮动属性破坏了,而文字又不够多，所以就造成了所谓的高度塌陷，致使最后两个div陷进了图片所在的div中，要知道，这种情况在正常块状元素布局中是根本不会出现的。至于解决浮动引起的高度塌陷，我总结了两条，分别是：

使用clear:both，常见的什么clearfix；

触发浮动元素父元素的BFC（块状格式上下文，为解决盒子与盒子之间，内容不相符影响而生的概念）；

清除浮动，相信大家都懂，而触发bfc。

我说说我常用的几条，网上讲bfc的很多：

float属性不为none的元素

position（absolute，fixed）

display (table-cell,inline-block，flex等)

overflow属性不为visible

除了上面讲的这些，我还遇到过有人问，为什么我用了浮动，但元素没有浮在这一行，却换了行，像下图这样

   

    
我是导航栏的一些文字

    
我想浮在右边

   

   .gr{
      background-color: yellowgreen;
      margin:5px;
    }
    .fr{
      float:right;
      background-color: green;
    }

上面这种没按想要的方式浮，是因为块状元素会不敢其内容长度有没有一行的长度，其都会占据一行的长度，后面的元素会自动换行。解决这个其最简单的方式就是将fr元素放在gr元素前，为什么这样就可以，因为float破坏了div元素的块状属性，但其未撑开父元素的高度，其浮动属性为right，默认从右侧开始布局，所以后面的div仍按正常的文档流从最左端开始布局。

有一种行内元素，又叫置换元素

如果你看上面一题代码的时足够细心，你会发现我给img设置了width和height两个属性值为130，但由于又在css属性里定义了宽高260,但最终表现出的宽高为260。如果css不定义宽高呢?答案是多少,要不你试试，你慢慢试，我还是先公布答案：130.这里我们将会说一个css中的一个鲜为人知的术语:置换元素，那什么又是置换元素呢？

置换元素是指：浏览器根据元素的标签和属性，来决定元素的具体显示内容。

例如：浏览器根据标签的src属性显示图片。input元素根据标签的type属性决定显示输入框还是按钮。还有，还有近来很火的canvas。

置换元素有如下共同点：

置换元素一般内置宽高属性，因此可以设置其宽高；

置换元素与一般的行内元素相比，其可以设置margin,padding，height,width等css属性；

感觉要写的还有很多，事件根本不够用，先睡了，未完待续
如果文中有任何不足和错误之处，还请及时指正。

云服务器 GPU云服务器 css属性 访问CSS属性 position属性，css 获取CSS属性值

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112882.html

相关文章

  • css魔幻属性跟进篇

    摘要：中是这样定义的属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。其同样适用于设置属性为绝对定位或固定定位的内联元素。至于为什么，可以理解为内联元素没有盒模型，其高度由内容决定。 白话：即上一篇我脑中飘来飘去的css魔幻属性自己的文章推出之后，这是自己写的第四篇CSS相关的文章，文章绝大部分是自己工作总结得来，另一部分是平日sf回答的与面试中向面试官交流学到的，都是一...

    oogh 评论0 收藏0

  • CSS相对定位和绝对定位

    摘要：三绝对定位拼爹型绝对定位不占有位置。父级有定位绝对定位是将元素依据最近的已经定位绝对固定或相对的父元素祖先进行定位。绝对定位的盒子水平垂直居中普通盒子左右居中用即可，但对于绝对定位的就无效了。 为什么要学定位 定位是CSS中的难点和重点，特别是后面学javascript特效时候，比如实现下拉菜单、弹框等，要盖住下面内容又不会影响下面内容，比如要超出盒子一部分，比如屏幕中有一个小弹窗飘来...

    xinhaip 评论0 收藏0

  • 回顾Java 发展，看 Docker 与Mesos | 数人云COO谢乐冰@KVM分享实录

    摘要：马拉松会匹配每个和提供的资源，然后通过将任务下发下去。对外暴露的就是负载均衡的某个服务，后面自动将流量转发到某个容器的端口上。还有一直办法是用内网的，这个会维护现有的容器列表端口，并且返回任意一个的端口，页实现了负载均衡和服务发现功能。 演讲嘉宾 数人云COO 谢乐冰 在德国工作十年，回国后加入惠普电信运营商部门，拥有多年项目经验和创业公司工作经验。在数人云负责产品售前和运营，专注行...

    canger 评论0 收藏0

  • 云计算正在改变整个ICT世界

    摘要：随着服务器自身能力的不断提升，尤其是云计算带来的软件定义可靠性的到来，服务器正在吞噬整个服务器市场，定制化和厂家兴起，在中国以天蝎整机柜服务器为代表。云计算正在改变整个产业，将被和正在被云计算改变的，还包括创新创业采购机器学习自动驾驶和等。　　一项所谓的革命性技术 ，要么性价比比前辈至少提高一个数量级，要么可以满足之前技术无法实现刚需。但仅靠这两样，新兴力量要打败旧势力还不够，还要采用与旧势...

    cocopeak 评论0 收藏0

  • B站智能防挡弹幕的一种python实现

    摘要：将图片的处理方法放到视频中的每一帧，再加上弹幕飞过的效果，就完成了版的智能防挡弹幕。不知道站的实现方法是怎样，是否有人工干预，是否有预计算。 某天代码写得老眼昏花，去B站上摸鱼，突然发现奇怪的现象： showImg(https://segmentfault.com/img/remote/1460000017911829?w=600&h=284); 哟呵，B站竟然做了 视频前景提取 ，把...

    jzzlee 评论0 收藏0

发表评论

登陆后可评论

0条评论

JouyPub

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<