首页手记 CSS工作实践笔记（不定期不断更新）

CSS工作实践笔记（不定期不断更新）

标签：

Html/CSS CSS3

不得不说，工作后能用来自学和总结的时间少了，但是在实际的项目中成长的也很快。CSS是一门实践性很强的技术（也可以说是一门手艺），在实际的切图重构工作中，面对各种各样页面结构的需求，能够更快地掌握它。

这里希望借这篇手记总结一下自己遇到的一些页面中的需求是如何用CSS实现的，以及背后用到了什么CSS的理论，以后如果遇到了别的需求，也会不定期更新，希望对大家有帮助。

弹窗大小适应屏幕大小

工作的第二天，产品经理就要做一个弹窗，因为之前的弹窗是固定大小的，在笔记本和更小的移动端屏幕上就有可能看不清楚了，所以我要把它改造成一个能适应屏幕大小的弹窗。用到的方法并不复杂：对弹窗中的图片用百分比大小（width: 80%;，相对于父元素宽度为80%），弹窗是固定定位的，定位用到的left和top属性也都用百分比来定位，这样屏幕变小的时候弹窗也会变小，并且相对浏览器窗口也在一个相对固定的位置。稍微麻烦一点的是弹窗的文字，我用了媒体查询来进行处理，在不同窗口大小范围内用不同的字体大小。

用CSS3实现连续循环的动画

运营也需要做一个弹窗，弹窗里有一个按钮，需要按钮有一个连续摇晃的效果吸引人点击，我参考了公司之前的前端工程师的做法，不需要js，只用CSS3动画的@keyframes给元素的属性设置一系列关键帧，然后再用animation将关键帧绑定到需要添加动画的元素上即可，非常方便。我在Can I use上查了一下，这个方法对IE浏览器只能支持11以后的版本，但考虑到开发的便捷，这个方法还是利大于弊的。

能用文字或者html的尽量不要用图片

在做一些弹窗的过程中，发现图片占了主要内容，一开始做的时候就直接把文字和图片一起切成了图片，后来产品经理和设计师又要改文字（相信很多前端小伙伴都遇到过反复修改的设计稿……），这时就比较麻烦了，所以一开始就要和产品和设计的同事沟通好，哪些地方的文字是可能修改的，哪些是肯定不会变的，而且，用文字能减小网页的大小，加快加载的速度，当然，有些文字用到了特殊字体，在html中很难实现，所以还是用图片更方便了。页面中还有一些三角形和梯形也是可以用CSS的伪元素和html元素来实现的，省去了图片，就又能减少http请求，以后修改起来也更方便。

图片大小超出页面宽度且要居中显示

设计师在设计banner图的时候是按1920像素宽来设计的，公司显示器没有那么大，只有1500多像素，我一开始是按100%宽度来显示图片，但是这样一来，当浏览器大小变化的时候，图片大小也跟着变化，图片内容是可以居中，但是没有达到设计师的要求，要让图片居中显示，且一直是原始大小，超出浏览器范围的部分就不显示了。
这时的实现方法就是让图片的宽度width: 1920px;，包裹图片的父元素width: 100%;，相对定位，且overflow: hidden;防止出现滚动条；图片绝对定位，然后left: 50%;，margin-left设为负的图片宽度的一半，也就是-960px。

宽度能适应选项内容长度的下拉菜单

后端工程师需要对页面中的一个下拉菜单进行改造，这个下拉菜单里的选项是用户输入的，因此长度是不能确定的，还要给每个选项的右边加一个删除选项的按钮，这样简单的select和option标签就实现不了了，我用了button和ul来实现下拉的点击按钮和下拉列表，下拉的展开收起效果用jquery的slideToggle方法很容易实现，删除按钮也可以在li里加一个a标签就能实现，关键是如何让选项适应用户输入的内容的长度。
其实元素的宽度width属性的默认值就是auto，也就是浏览器会根据元素内容来计算元素的宽度，但是在后端工程师给出的实际页面中，下拉列表是被包裹在一个宽度固定的父元素中的，当列表项的内容宽度超出了包裹父元素的范围，就不得不换行显示，这样肯定不能满足后端工程师的需求。
我的解决方案是让下拉列表脱离文档流，相对于一个宽度足够宽的父元素绝对定位（注意定位的位置还是要在下拉按钮的下面），也就是说让一个宽度足够宽的父容器相对定位，然后再让下拉列表的ul相对这个父容器绝对定位，这样一来，这个ul的宽度上限就是一个宽度足够宽的父容器的宽度了。

多行文本溢出显示省略号

单行文本溢出显示省略号比较简单：

overflow: hidden;
text-overflow: ellipsis;

上面的方法只适用于单行文本，多行文本就要用到伪元素了：

:after {
    content: '. . .';
    position: absolute;
    bottom: 0;
    right: 4px;
    background-color: #fff;
}

这里可以通过给伪元素设置宽度和调整定位位置来调整遮住的字的范围，给伪元素加上background-color就能遮住字了。

各种居中

居中是页面布局和元素定位中经常会遇到的需求，我在工作中就遇到了很多次。

单行文字的居中：
比如要做一个带文字的按钮，按钮中的文字水平和垂直都要居中，这个应该是最常见的，也比较简单。水平居中：text-align: center;；垂直居中：line-height和height的值相等（单行文本）。
多行文本的垂直居中，可以对父元素设置display: table-cell; vertical-align: middle;，子元素就能垂直居中了。
块级元素用margin: 0 auto;对元素水平居中，这个方法也很常用，不过我在使用中遇到过不生效的情况，一种是块级元素没有设置具体宽度，另一种是我把行内元素设为display: inline-block;并且设置了元素的宽度，也没生效，后来改成display: block;就生效了。
其实对行内元素有种更简单的水平居中方法，那就是对包裹行内元素的块级元素设置text-align: center;；这种方法还有另一种应用，就在前两天年前最后一天班的时候，产品经理需要对页面中一个宽度自适应内容长度（也就是width: auto;）的块级元素水平居中，因为没有设置确定的宽度，肯定不能通过margin: 0 auto;来居中了，这时可以对这个块级元素设置display: inline-block;，然后对包裹它的父级块级元素设置text-align: center;就能使它居中了，我感觉这种方法还是挺巧妙的，实现的代码也很简单，注意，这里必须是display: inline-block;，不能是display: inline;，否则无法应用CSS3的animation和transform，因为在规范中inline元素是不能变形的。
元素的宽度是不确定的如何居中，能不能用margin: 0 auto;实现水平居中呢，答案是可以的，只需对元素设置display: table;，这样元素宽度就会自适应内容宽度，就变成了一个定宽元素，就能通过margin: 0 auto;实现水平居中了；另外一种方法就是上一条中提到的把元素设为display: inline-block;，然后对其父元素设置text-align: center;；第三种方法是对父元素设置float:left; position: relative; left: 50%;，通过左浮动让父元素变为宽度等于内容宽度（也就是子元素宽度）的块级框，然后定位到离父元素的左边50%处，然后对子元素设置position:relative; left:-50%；使其向左移动自身宽度的50%，这样就相对于其父元素的父元素居中定位了，这种方法的核心是浮动会使元素变为一个宽度适应内容宽度的行内块级（inline-block）框（无论行内元素还是块级元素，设置position:absolute;也会有这种特性）。
通过绝对定位实现水平和垂直同时居中
直接看代码：

.Center-Container {
  position: relative;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

需要注意的是这种方法需要同时给要居中的元素设置宽度和高度，可以应用于让不同尺寸的图片都居中排列，比如有很多小logo需要展示的地方，用这种方式来居中就不需要把logo图片都处理成一样大小的了，当然这里也可以用前面提到的对父元素设置display: table-cell; vertical-align: middle;来实现垂直居中，至于水平居中，因为图片是内联元素，给父元素添加text-align: center;就能实现了。

`z-index`为什么没有生效

有一次页面中需要把几个列表放到一个表格的上面并且遮住表格的一部分，我一开始把列表都绝对定位了，并且设置了较大的z-index，结果就是不能遮住下面的表格，在网上搜z-index为什么没有生效也没有结果，后来仔细检查才发现是列表没有设置background-color，因为background-color的默认值是transparent，所以没法遮住下面的内容。
像这种失误，如果没有遇到过，一时还真是想不到啊。
今天有遇到另外两种z-index不起作用的情况，一个是包裹设置了z-index的元素的父元素设置了overflow: hidden;这样无论z-index设置多大，超出父元素范围的部分都无法显示出来，另一个是元素默认position: static;，这时z-index也不生效，可以把元素设为非静态定位（绝对/相对/固定定位），z-index就能起作用了。
简单总结一下，z-index要生效需要满足三个条件：

背景色不能是transparent；
不能是静态定位
如果大小超出了包裹的父元素的范围，父元素要设置overflow: visible;

IE中文件上传控件需要双击

开年后又开始了忙碌的工作，上周公司的测试工程师发现一个页面中上传文件的按钮在火狐中只需点击一次，而在IE中则在按钮部分区域需要双击。以前没有看过IE里的上传控件和火狐里显示有什么不同，由于<input type="file">这个文件上传控件默认的样式比较丑，通常都是用另外一个标签比如div或者a标签覆盖上传控件，也就是把<input type="file">的透明度设为0，但是z-index值比覆盖它的div或者a标签要大，这样<input type="file">虽然在上面，但是显示的样式却是覆盖它的div或者a标签的样式。
回到这个问题，IE中之所以有的区域需要点击两次，是因为IE中这个文件上传的控件实际分为显示上传文件名的部分和上传按钮部分，在显示上传文件名的部分就需要双击才能打开选择文件的窗口，我在stackoverflow上找到了解决办法：把<input type="file">的字体大小设为一个足够大的值，然后给包裹它的父元素设置overflow: hidden;，使得上传控件的上传按钮部分撑满包裹它的父元素，这样就只需单击了。

总结

To be continued……

参考资料

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。要查看该许可协议，可访问 http://creativecommons.org/licenses/by-nc-sa/4.0/ 或者写信到 Creative Commons, PO Box 1866, Mountain View, CA 94042, USA。

点击查看更多内容