![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
侠之大者为国为民
这个人很懒
展开
-
做一个从中心向两边水平扩展的动画效果
用到了css3的transition属性,其实是从左往右扩展的。因为设置了块居中,产生从中心向左右扩展的感觉 #box{ background-color:gray; height:20px; overflow:hidden; } .a{ background-color:red; width:0; height:20px; margin: 0原创 2017-02-06 22:42:04 · 6350 阅读 · 0 评论 -
内联元素在块级元素内部垂直水平居中
*{margin:0;padding:0} .box { width:400px; height:200px; background-color:gray; text-align: center; } .middle{ paddin转载 2017-02-08 10:42:53 · 1830 阅读 · 1 评论 -
清除子元素margin导致的父元素边距异常
*{margin:0;padding:0} .box { background-color:gray; } .box:before{ display: table; content: ''; }转载 2017-02-08 10:57:20 · 1875 阅读 · 0 评论 -
white-space 属性验证
white-space 的常用属性包括: normal nowrap pre pre-line pre-wrapnormal:自动处理换行,行中的空白符(空格、换行、TAB等)合并为1个小空格nowrap:不换行,行中的空白符(空格、换行、TAB等)合并为1个小空格pre:不自动处理换行,保留原内容的所有空白符(空格、换行、TAB等)pre-line:自动处理换行,原创 2017-02-10 09:39:07 · 568 阅读 · 0 评论 -
word-break属性验证
word-break 可选属性为 normal | break-all | keep-all.normal:中文:按字分行英文:按单词分行break-all: 中文:按字分行英文:按字母分行keep-all: (会导致中文排版异常)中文:按标点符号分行英文:按单词分行演示:原创 2017-02-10 10:17:58 · 374 阅读 · 0 评论 -
word-wrap属性验证
word-wrap 属性可选值 normal | break-wordnormal:单词长度超过容器宽度不换行,会导致宽度溢出break-word:单词长度超过容易宽度会换行,不会导致宽度溢出注意:word-break word-wrap 都是对英文单词或长串数字起作用的,对中文没有影响如果设置了word-break:break-all 那么word-warp也原创 2017-02-10 10:48:43 · 1274 阅读 · 0 评论