houzhyan-博客

刚开始工作的时候，css 里的竖直居中一直是个老大难问题。每次用到的时候都去网上搜，搜，搜，半天才搜到合适的解决方法。然后下次遇到，呃，又忘了~后来仔细回忆了一下，其实CSS实现竖直居中是有几种不同的应用场景的，需要分别使用不同的解决方法。这也是为啥每次都觉得，诶上次那个解决方法好像不行呢？（原来并不是我智商的问题）好了废话不多说，记录下遇到的不同场景及解决方法，希望能对自己或者别人有所帮

https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit不知大家在做前端页面的时候，有没有遇到类似这样的问题：有一个不是正方形的图片，可能是宽度大于高度的，也可能是高度大于宽度的，而你又并不想用背景图的方式来做，要实现用img标签来让此图片显示出一个正方形的且不变形的效果。即如下图：只显示图片中间部分（红框部分）下面我...

转自:https://www.cnblogs.com/hutuzhu/p/4450850.html垂直居中是布局中十分常见的效果之一，为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加多样化。方法1：table-cellhtml结构： 1 2 3 ...

在父元素设置display:flex;s三个设置协助:flex-direction 规定灵活项目的方向flex-direction:colum; //垂直justify-content 规定元素在方向上的对齐方式justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;align-...

这篇文章来自 Danny Markov， 是我最喜欢的博主之一，实际上我最近翻译的一些文章全是出自他手。在查看本文之前你也可以 查看原文。我们都知道写 CSS 代码是有些枯燥无味的，尤其是面对那些成千上万行 CSS 代码的项目。你始终在相同的地方使用相同的规则并且在你的编译器中搜索和替换每次颜色的变化。这需要很多的努力和规则来保持你的 CSS 可维护，但它本不应该这样的。很幸运，网站开发社区已经解...

彻底明白 position及z-index的用法static : 　无特殊定位，对象遵循HTML定位规则absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在

转自:http://blog.youkuaiyun.com/chemmuxin1993/article/details/525947391. 禁止鼠标双击选中文本不被双击选中文字的区域122. 自定义li样式li:{ list-style: none;}li:before{ content: "◆"; display: block; float:

前言不知不觉来百度已有半年之久，这半年是996的半年，是孤军奋战的半年，是跌跌撞撞的半年，一个字：真的是累死人啦！我所进入的团队相当于公司内部创业团队，人员基本全部是新招的，最初开发时连数据库都没设计，当时评审需求的时候居然有一个产品经理拿了一份他设计的数据库，当时我作为一个前端就惊呆了......最初的前端只有我1人，这事实上与我想来学习学习的愿望是背道而驰的，但既然来都

原文出处： 徐飞的博客（@民工精髓V）   管控平台在上一篇中我们提到了组件化的大致思路，这一篇主要讲述在这么做之后，我们需要哪些外围手段去管控整个开发过程。从各种角度看，面对较大规模前端开发团队，都有必要建立这么一个开发阶段的协作平台。在这个平台上，我们要做哪些事情呢？1. HTML片段我们为什么要管理HTML片段？因为有界面要用它们，当这些片段多了之后，

原文出处： 徐飞的博客（@民工精髓V）   基本思路1. 为什么要做组件化？无论前端也好，后端也好，都是整个软件体系的一部分。软件产品也是产品，它的研发过程也必然是有其目的。绝大多数软件产品是追逐利润的，在产品目标确定的情况下，成本有两个途径来优化：减少部署成本，提高开发效率。减少部署成本的方面，业界研究得非常多，比如近几年很流行的“去IOE”，就是很典型的，从一些

关于强制不换行、强制换行的话题在网上已经被讨论了无数次，但我发现都不够全面，没有充分考虑各种浏览器、各种标签等情况，以致不兼容，所以我再来说说。由于 div 和 p 在本文的讨论中，效果相同，所以省略 p。文中“没有指定宽度的 td”是指：为 table 指定了宽度，但没有给 td 指定宽度。强制不换行div,td{    white-space:nowrap;

表格中文字过多需要隐藏文字正确的做法一.强制文字不换行,并隐藏多余部分CSS 代码div{width:100px;overflow:hidden;white-space:nowrap;}td{width:100px;overflow:hidden;white-space:nowrap;word-break:keep-all;}HTML 代码中

verflow: hidden; /*超过指定的宽度和高度也隐藏*/display: inline-block; /*块级元素显示在这一行，不换行，其他块级元素也可以显示在这一行*/white-space: nowrap; /*所有的文本都显示在这一行*/text-overflow: ellipsis; /*多余的文本用省略号显示*/ verflow: hi...