CSS用法的一些总结

Anchorer 发布于2019-08-28 18:10 / 735人阅读

摘要：黄金档未垂直对齐同一行的一组为的使用了或者是时，如果某个的内部标签中填充一些文字等内容，可能就会出现垂直不对齐的情况。解决方法倒不难的应用会被其他一些属性破坏，例如和，所以与或是属性最好不要同用。

工作上，除了Django和一些并不复杂的脚本以外，其余时间写了大量的CSS和jQuery，现在回头看之前的一些代码，写得十分丑陋又低效，其中的CSS就有很大改进空间。
正如多数人的认知一样，HTML和CSS并不难学难用，从学习曲线上来说确实如此，难度甚至不如使用VIM。但是写不写得好又是另一回事，好的CSS代码能用最少的代码量实现功能，易修改且性能佳。易修改，举个最简单的例子，比如要求修改一个div的高宽且保持其子div自适应高宽，若是写死了子div的高宽，修改工作很麻烦，所以最好是将子div在需求下尽可能写成自适应，这样修改时就只需要修改父div的高宽即可。性能佳，能用CSS实现的绝对不用js实现，不管是网页布局还是动画效果，原生的CSS都是快速又具备高度兼容性的选择。

清除浮动

清除浮动是个常见问题，不少人的解决办法是添加一个空的 div 应用 clear:both。事实上仅需要使用after伪类即可在元素尾部自动清除浮动

.clear-fix { overflow: hidden; zoom: 1; }
.clear-fix:after { display: table; content: ""; width: 0; clear: both; }

DIV同行排列

最容易想到的是将一行div全设置为display:inline-block，但这种做法会使得两个div之间存在“间隔”，这个“间隔”的大小通常由font-size决定，将font-size设为0将不存在"间隔"。清除间隔可以通过使用注释的方法实现。

更好的方式自然还是使用float

.item {float: left}

灵活使用BFC

BFC（Block Formatting Context）直译为“块级格式化范围”。当一个HTML元素满足以下任何一点时，就会产生BFC:

float的值不为none

overflow的值不为visible

display的值为table-cell, table-caption或inline-block

position的值不为relative和static

BFC提供了一个环境，这个环境中的元素不会影响到其它环境中的布局。比如浮动元素形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。BFC就是一个作用范围，可看作是一个独立的容器，并且这个容器的布局，与这个容器外的元素毫不相干。

BFC的元素不能与浮动元素重叠，当容器有足够的剩余空间容纳 BFC 的宽度时，所有浏览器都会将 BFC 放置在浮动元素所在行的剩余空间内。

上图所示，画线左侧是描述，字数不定，即宽度不定，画线占满同一行的剩余部分。正好使用上面提到的BFC与浮动元素的位置情况。

.desc { float: left;}
.line { overflow: hidden;}


 黄金档

未垂直对齐

同一行的一组class为item的div使用了display:inline-block或者是float:left时，如果某个div的内部标签中填充一些文字等内容，可能就会出现垂直不对齐的情况。但非常奇怪的是，这时内部元素并没有超出父级div的范围，没有任何溢出或撑开的情况，这点我也不是很理解，知道其发生原因的同学欢迎留言。解决方法倒不难：

.item { vertical-align: top;}

display:table-cell的应用

table-cell会被其他一些CSS属性破坏，例如float和 position:absolute，所以display:table-cell与float:left或是position:absolute属性最好不要同用。设置了该属性的元素对宽度高度敏感，响应padding属性，对margin值无反应

垂直居中

.content {
    display: table-cell;
    border: 1px solid #eee;
    width: 600px;
    text-align: center;
}


    what a beautiful day

两栏自适应布局

适用于一栏宽度不固定，比如大小不确定的图片，另一栏自动调整占满剩余宽度的场景。

.box {
    width: 70%;
}
.content {
    display: table-cell;
    border: 1px solid #eee;
}
.fix {
    float: left;
    color: #a8c;
}


    This is left fixed block
    
        风住尘香花已尽，日晚倦梳头。物是人非事事休，欲语泪先流。闻说双溪春尚好，也拟泛轻舟。只恐双溪舴艋舟，载不动许多愁。

垂直对齐的trick

上面提到过可以用table-cell让div内的元素垂直居中，但对div的float和position属性有限制，现在介绍一种可以用在浮动元素(容器)里的垂直居中方法，这是在工作中碰到使用了float不好使时发现的
使用一个用作协助的inline-block的帮助元素，此处是span并将该元素和准备居中的元素都设置为vertical-align: middle即可

css

.frame {
    float: left;
    height: 220px;
    width: 300px;
}
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
img {
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

原理是相邻的两个inline-block元素可以互相对齐，所以使用一个不可见的100%高度的span可以帮助img对齐
来源：http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div

不过这时仍然有个问题，假设上面的img后面要跟一个文字介绍的div块(inline-block)，如下所示


    
    
    ABCD

如果需求是设置.desc的margin-top: 10px，直接设置的话会发现前面居中对齐的img也会向下10px。
原因是因为块元素的vertical-align默认是baseline，设置margin-top会导致整个baseline下降，所以之前已经居中对齐的元素也会受到影响。解决办法是将div.desc设置为其它的对齐方式，推荐vertical-align: top

另外一种解决办法既能解决上面的问题，也能解决inline-block的块元素设置margin无效的问题

.desc {
    postion: relative;
    top: 10px;
}

hover时显示边框

方法一
对于一个块元素比如div，通常先设置好border-width，并将border-color设为#fff或transparent，hover时直接改变border的颜色即可

方法二
将宽高的值写上，然后设置box-sizing: box，hover时直接设置border即可，此时边框宽度包括在width或height的数值中

混合云私有云 vps日常维护中的一些要点总结 php中css的用法 java的一些代码深度学习的一些应用

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

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

bootstrap select2 tags用法总结

摘要：原创用法总结前言最近用到的，官方文档中的例子也很多在此写一些实际项目中用法总结，有需要的朋友可以借鉴一下。（原创） bootstrap select2 用法总结前言最近用到bootstrap 的 select2，官方文档中的例子也很多在此写一些实际项目中用法总结，有需要的朋友可以借鉴一下。效果图 showImg(https://segmentfault.com/img/bV...

Zack 2019-06-27 11:34 评论0 收藏0
bootstrap select2 tags用法总结

摘要：原创用法总结前言最近用到的，官方文档中的例子也很多在此写一些实际项目中用法总结，有需要的朋友可以借鉴一下。（原创） bootstrap select2 用法总结前言最近用到bootstrap 的 select2，官方文档中的例子也很多在此写一些实际项目中用法总结，有需要的朋友可以借鉴一下。效果图 showImg(https://segmentfault.com/img/bV...

flyer_dev 2019-08-22 11:59 评论0 收藏0
css文本属性用法总结

摘要：稍稍总结了下文本的一些属性用法，自己忘记的时候也可以用来查查，不用去查网站那么麻烦。稍稍总结了下css文本的一些属性用法，自己忘记的时候也可以用来查查，不用去查网站那么麻烦。下面是部分总结，也希望对其他人有用文本修饰 (1)text-decoration: 文本修饰（横线） 4个属性值 overline line-through underline blink (1)ov...

masturbator 2019-04-23 13:28 评论0 收藏0
[面试专题]一线互联网大厂面试总结

摘要：道阻且长啊前端面试总结前端面试笔试面试腾讯一面浏览器工作原理浏览器的主要组件包括用户界面包括地址栏后退前进按钮书签目录浏览器引擎用来查询及操作渲染引擎的接口渲染引擎渲染界面和是基于两种渲染引擎构建的，使用自主研发的渲染引擎，和都使用网络用来道阻且长啊TAT(前端面试总结) 前端面试笔试面试腾讯一面 1.浏览器工作原理浏览器的主要组件包括：用户界面－包括地址栏、后退/前...

lemanli 2019-08-02 15:57 评论0 收藏0
[面试专题]一线互联网大厂面试总结

摘要：道阻且长啊前端面试总结前端面试笔试面试腾讯一面浏览器工作原理浏览器的主要组件包括用户界面包括地址栏后退前进按钮书签目录浏览器引擎用来查询及操作渲染引擎的接口渲染引擎渲染界面和是基于两种渲染引擎构建的，使用自主研发的渲染引擎，和都使用网络用来道阻且长啊TAT(前端面试总结) 前端面试笔试面试腾讯一面 1.浏览器工作原理浏览器的主要组件包括：用户界面－包括地址栏、后退/前...

xfee 2019-08-21 11:53 评论0 收藏0