CSS实用技巧总结一

MAX_zuo 发布于2019-08-30 13:09 / 2034人阅读

摘要：当一个空元素有上下外边距时，如果没有或者，则元素的上外边距与下外边距会发生合并。如果使用，一般只能实现固定的左右两列布局，并不能实现其中一列为自适应的布局。自动平均划分元素，并且在一行显示。

class命名

1.为了避免 class 命名的重复，命名时一般取父元素的 class 名作为前缀

外边距叠加的三种情况

当一个元素出现在另外一个元素上面的时候，第一个元素的下边距(margin-bottom) 将会与第二个元素的上边距(margin-top)会发生合并。

当一个元素包含在另外一个元素中时(父子关系)，假如没有内边距 padding 或边框 border 把外边距分隔开的话，父元素和子元素的相邻上下外边距也会发生合并。

当一个空元素有上下外边距时，如果没有 border 或者 padding，则元素的上外边距与下外边距会发生合并。

负边距

当图片与文字排在一起的时候，在底部水平方向上往往都是不对齐的，这是因为图片与文字默认是基线对齐(vertical-align:baseline)。如果想要实现图片与文字底部水平方向对齐，除了给img设置“vertical-align:text-bottom”属性这个方法之外，还可以使用兼容性比较好的负 margin 来实现。给img设置负边距

style="margin:0 3px -3px 0"

自适应两列布局
自适应两列布局，指的是在左右两列中，其中有一列的宽度为自适应，另外一列宽度是固定的。如果使用 float，一般只能实现固定的左右两列布局，并不能实现其中一列为自适应的布局。

 
  
  
    
this is left
    
    
this is right

元素的垂直居中

overflow

设置overflow: hidden来清除浮动
浮动会引起父元素塌陷

这里我们可以通过给wrapper加上overflow: hidden属性来清除浮动

使用“overflow: scroll”显示滚动条。

display

行内元素。
行内元素有一下几个特点:

行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果。

无法定义高度(height)，也无法定义宽度(width)。

可以定义 margin-left 和 margin-right，无法定义 margin-top 和 margin-bottom。

去除inline-block元素间距。
在排列多个inline-block元素时（例如img）,在inline-block元素之间是会有间距存在的。

我们可以通过给父元素添加font-size: 0的方式来解决。

table-cell
“display:table-cell”非常强大，可以实现以下三种功能。

图片垂直居于元素。
在 CSS 中，我们可以使用“display:table-cell”和“vertical-align:center”来实现大小不固定的图片的垂直居中效果。

(2)等高布局。
(3)自动平均划分元素，并且在一行显示。

云服务器 GPU云服务器技巧总结应用技巧总结 css技巧年终总结

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

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

2017文章总结

摘要：欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径 - 开启性能优化之旅高性能滚动 scroll 及页面渲染优化理论 | HTML写法...

dailybird 2019-08-01 18:28 评论0 收藏0
2017文章总结

摘要：欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径 - 开启性能优化之旅高性能滚动 scroll 及页面渲染优化理论 | HTML写法...

hellowoody 2019-08-22 14:02 评论0 收藏0
2017文章总结

摘要：欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径 - 开启性能优化之旅高性能滚动 scroll 及页面渲染优化理论 | HTML写法...

wwolf 2019-08-29 14:21 评论0 收藏0
CSS开发

摘要：译十六进制颜色揭秘原文地址原文作者译文出自掘金翻译计划本文永久链接教程入门篇关于是一款进行栅格布局的辅助工具，它让开发者摆脱了冗杂的数学计算，同时降低了样式与结构的耦合程度。【译】CSS 十六进制颜色揭秘原文地址：CSS Hex Colors Demystified 原文作者：Dave Gash 译文出自：掘金翻译计划本文永久链接：https://github.com/xitu/...

warkiz 2019-08-30 13:54 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

mikasa 2019-08-01 18:18 评论0 收藏0