css的属性很多,每一个属性的值也很多,组合起来便有成千上万种。不同属性之间的相互组合也可以产生不同的样式,css真是一种优美的样式设计语言。下面对工作中常见的易混淆的属性和值进行总结:

1. line-height(行高) 带单位与不带单位的区别:

我们知道行高是可以继承的。当父元素的行高值没有带上单位时,子元素使用自己的字体尺寸并计算出行高(子元素的行高=父元素中 line-height 的值 * 子元素的字体尺寸)。当父元素的行高值带有单位时,父元素先根据自己的字体尺寸计算出行高(绝对单位 px 时,无需计算),让子元素继承(子元素的行高=父元素的行高)。

(1). 当父元素的行高值有单位时:

  1. <div>
  2. <p>当哈罗德站在斑马线前按下行人按钮时——如果一直是她(莫琳,哈罗德的妻子)在做哈罗德该做的事,那么——“我是谁?”他就这样走过了邮局,连停都没有停下。原本很短的一段路由于内心的呼唤便再也无法停住脚步。</p>
  3. <p>一路上我记起了很多东西,很多我都没有意识到自己忘了的回忆,有戴维的,还有你和我的。我还记起了我的母亲,有些回忆很不容易,但大部分都很美。我很害怕,我怕有一天,或许很快,我就会把他们弄丢,这一次永远都找不回来了。”哈罗德泪流满面.</p>
  4. </div>
  1. body { background-color: #efefef; }
  2. div {
  3. font-size: 12px;
  4. line-height: 1.5em;
  5. }
  6. p { font-size: 22px; }

如上:在父元素的字体大小为 12px,行高为 1.5em,子元素的字体大小为 22px 时,显示效果如下:

上例中,p 的行高为 18px,因为它继承了父元素 div 的行高 1.5em = 12 * 1.5 = 18px; 而自己的字体大小为 22px,所以就有被挤压的效果。另外文字所占的高度与 font-size 没有直接任何关系,倒是文字所占的宽度与 font-size 的值是一样的。

(2). 当父元素的行高值没有单位时:

  1. <div>
  2. <p>你以为走路是世界上最简单的事呢?只不过是把一只脚放到另一只脚前面。但我一直很惊讶这些原本是很本能的事情实际上做起来有多困难。而吃,吃也是一样的。说话也是。还有爱。这些东西都可以很难。</p>
  3. <p>我们大家都以为哈罗德徒步是因为很多年前他与奎妮有一段罗曼史。但那不是事实。哈罗德走这条路,是因为奎妮救了他,而他从来没有说过一句谢谢。</p>
  4. </div>
  1. body { background-color: #efefef; }
  2. div {
  3. font-size: 12px;
  4. line-height: 1.5;
  5. }
  6. p { font-size: 22px; }

如上:在父元素的字体大小为 12px,行高为 1.5,子元素的字体大小为 22px 时,显示效果如下:

上例中,p 的行高为 33px,因为它继承了父元素 div 的行高 1.5, 而自己的字体大小为 22px,所以自己的行高值就为 22 * 1.5 = 33px,不会出现第一种情况下的被挤压效果。

2. display(显示方式)的值为 inline-block,table,flex 的使用环境和区别:

(1). display: inline-block;

当一个元素显示方式为 display: block; 时,不定义宽度和将宽度定义为:width: 100%; 或 width: auto; 效果是一样的,因为块级元素会继承父元素的宽度值,按照 100%(也就是和父元素一样的宽度) 的值定义自己的宽度。但是实际项目中我们有时并非需要宽度为 100%,但是又想要设置元素的 width, height(或 padding)等属性。这时就需要用到 display: inline-block;

dom如下:

  1. <div class="text">
  2. <h3>成都王府井百货</h3>
  3. <p>成都王府井购物中心是北京王府井百货(集团)斥资4.5亿元打造的第一个购物中心项目。购物中心集购物、餐饮、娱乐、服务、文化、教育等多项功能于一身,建筑面积约10万平方米,共计5层营业。</p>
  4. <div><a href="#" title="查看详情" class="look-details">查看详情</a></div>
  5. </div>
  1. .text > div {
  2. margin-top: 1.2rem;
  3. text-align: center;
  4. }
  5. .text a.look-details {
  6. display: inline-block;
  7. padding: .5rem 1rem;
  8. font-size: .8rem;
  9. color: #fff;
  10. background-color: #e04728;
  11. }

对于上面的查看详情链接,定义为了 display: inline-block;  就可以不用设置宽度和高度,通过设置 padding 来实现自己想要的高度和宽度的想法了。显示效果如下:

并且,为其父元素设置 text-align: center;  可以达到水平居中的目的。

将元素设置为 display: inline-block; 既含有 display: block; 又含有 display: inline; 的效果,可设置其高度,又能将其居中,还可以避免宽度为 100%。

扩展:

父元素 text-align: center; 子元素 display: inline-block; 通常用于诸如新闻列表页分页效果。

  1. <ul class="pagination">
  2. <!-- 当前页面时,给 li 添加 active 类 -->
  3. <li><a href="#" aria-label="Previous">&laquo;</a></li>
  4. <li class="active"><a href="#">1</a></li>
  5. <li><a href="#">2</a></li>
  6. <li><a href="#">3</a></li>
  7. <li><a href="#">4</a></li>
  8. <li><a href="#">5</a></li>
  9. <li><a href="#" aria-label="Next">&raquo;</a></li>
  10. </ul>
  1. .pagination {
  2. display: inline-block;
  3. text-align: center;
  4. }
  5. .pagination:before,
  6. .pagination:after {
  7. display: table;
  8. content: "";
  9. }
  10. .pagination:after { clear: both; }
  11. .pagination {
  12. display: inline-block;
  13. text-align: center;
  14. }
  15. .pagination > li {
  16. float: left;
  17. display: inline-block;
  18. }
  19. .pagination > li > a {
  20. display: block;
  21. margin-left: -1px; /*消除两个 a 在一起时引起的双倍左外边距*/
  22. padding: 6px 12px;
  23. color: #337ab7;
  24. text-decoration: none;
  25. background-color: #fff;
  26. border: 1px solid #ddd;
  27. }
  28. .pagination > li:first-child > a {
  29. margin-left:; /*第一个 a 不需要消除左外边距*/
  30. border-top-left-radius: 4px;
  31. border-bottom-left-radius: 4px;
  32. }
  33. .pagination > li:last-child > a {
  34. border-top-right-radius: 4px;
  35. border-bottom-right-radius: 4px;
  36. }
  37. .pagination > li > a:hover,
  38. .pagination > li > a:focus {
  39. z-index:;
  40. color: #23527c;
  41. background-color: #eee;
  42. border-color: #ddd;
  43. }
  44. .pagination > .active > a,
  45. .pagination > .active > a:hover,
  46. .pagination > .active > a:focus {
  47. z-index:;
  48. color: #fff;
  49. cursor: default; /*当前这一页,让鼠标悬浮在 a 元素上时,显示为默认光标样式,给人感觉不能点击的效果*/
  50. background-color: #337ab7;
  51. border-color: #337ab7;
  52. }

(2). display: table;

第一种情况的扩展中,已经用到了 display: table; 使用 display: table; 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。

常用在清除浮动的需求中。一个元素之所以需要清除浮动,是因为自身没有定义高度,而子元素有浮动。

如上例的扩展中,ul.pagenation 没有定义高度,而子元素又有浮动,所以它需要清除浮动。清除浮动的方式如下:

  1. .parent-box:before,
  2. .parent-box:after {
  3. display: table;
  4. content: ""; /*伪元素 before 和 after 的样式里必须添加 content 属性才会起作用*/
  5. }
  6. .parent-box:after { clear: both; }

这种清除浮动的方式, ie8 不支持。如果需要支持 ie6 - ie8,需要使用下面这种复杂一些的样式(这样的写法暂时不理解):

  1. .clearfix::after {
  2. clear: both;
  3. display: block;
  4. content: ”;
  5. height:;
  6. line-height:;
  7. visibility: hidden;
  8. }
  9. .clearfix { zoom:; }

(3). display: flex;

2009年,W3C 提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。

菜鸟教程http://www.runoob.com/w3cnote/flex-grammar.html 中说得非常详细。

内容很多,但是我们平时一般会用到的就三个属性,display: flex; align-items: center; justify-content: center; 这三个属性都是用在父元素中,display: flex; 定义子元素的布局方式为弹性伸缩布局,align-items: center; 使子元素垂直居中,justify-content: center; 使子元素水平居中。

css常见的易混淆属性和值的区别(一)的更多相关文章

  1. Spring Boot设置值:分别用@ConfigurationProperties和@Value给属性设值及其区别

    @ConfigurationProperties给属性映射值编写JavaBean/** 将配置文件application.properties中配置的每一个属性值映射到当前类的属性中:* @Confi ...

  2. document.body.scrollTop等常见易混淆属性整理

        网页可见区域宽: document.body.clientWidth;   网页可见区域宽: document.body.offsetWidth (包括边线的宽);   网页可见区域高: do ...

  3. CSS 易混淆属性

    1. div中 height和line-height的区别 <div style="height:120px;">是用来规定整个div的高度,文字还是默认会在顶端开始向 ...

  4. css3易混淆属性详解

    1.background,  background-color,   color (1)background:在一个声明中设置所有属性: 如:background: #00FF00 url(bgima ...

  5. css选择器,选择指定属性的值

    选择属性为href的值: <a class='test' href='www.baidu.com' >test</a> response.css('.test::attr(hr ...

  6. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  7. CSS中px和em属性的特点与区别

    详解px和em的特点和区别象素px是我们在定义CSS中经常用到的尺寸大小单位,而em在国外网站中经常被使用,px和em之间究竟有什么区别和特点呢?◆px像素(Pixel),相对长度单位.像素px是相对 ...

  8. IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值2

    3  背景属性 大多数HTML元素都允许控制背景,包括背景颜色.背景图像.背景重复.背景附件.背景位置等属性.常见的控制背景属性.值及描述如表2所示. 表2  CSS中常见的控制背景的属性 除了使用表 ...

  9. Java-web易混淆知识点整理

    Java-web易混淆知识点 post和get区别 post: 数据不会显示在地址栏 安全 大小无限制 可以提交二进制文件 get: 数据显示在地址栏 不安全 get方式提交有大小限制(约4kb) 相 ...

随机推荐

  1. ArcGIS Server 开发之鹰眼地图的实现

    鹰眼简单点说就是地图的联动,鹰眼的全称是OverviewMap,在ERSI提供的API包中,在dijit中进行类的调用.查了很多的资料,总结一下: 具体的代码: <!DOCTYPE html&g ...

  2. Slick – 这是你需要的最后一款 jQuery 传送带插件

    slick 是一款完全响应式的 jQuery 传送带插件,能够根据容器自动适应宽度.在现代浏览器中会使用 CSS3 来实现特殊效果,可以使用扩展方法对项目进行添加.删除和过滤.这是你需要的最后一款 j ...

  3. 汉王云名片识别(SM)组件开发详解

    大家好,最近在DeviceOne平台上做了一个汉王云名片识别的功能组件.下面把我开发过程给大家做一个分享,希望可以帮助到大家. 下面我把我的思路给大家讲解一下.   1.找到我要集成的sdk,也就是汉 ...

  4. RequireJS使用注意地方

    使用RequireJS做异步模块加载,有几点值得注意的地方: 1.模块定义两种写法 1. 存在依赖的函数式定义 如果模块存在依赖:则第一个参数是依赖的名称数组:第二个参数是函数,在模块的所有依赖加载完 ...

  5. MAPINFO中利用GridMaker工具创建栅格图层

    在工作中需要使用栅格地图,以往都是由研发人员来创建,今天偶然发现Mapinfo中有GridMaker这样一个工具,结合网络搜索自己试了一下,居然做成功了,这里把步骤记录下来,方便以后查看. 1.首先在 ...

  6. SharePoint 2013 PowerShell命令备份还原报错

    错误截图: 文字描述: Restore-SPSite : <nativehr>0x80070003</nativehr><nativestack></nati ...

  7. MyEclipse 2015免费在线公开课,2月5日开讲

    MyEclipse 2015免费在线公开课,2月5日开讲,由MyEclipse官方高级PM Brian Fernandes 主讲. 主讲内容: 更好地支持javascript和技术模块 全新的REST ...

  8. [Android]官网《Testing Support Library》中文翻译

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/5048524.html 翻译自 Android Develope ...

  9. 【C语言】C语言常量和变量

    目录: [常量]   · 定义   · 分类   · 特殊字符型常量 [变量]   · 定义   · 定义变量   · 变量的使用   · 变量使用注意   · 变量常见问题 1.常量 · 定义 常量 ...

  10. 你真的了解UIViewController跳转吗?

    一:UIViewController模态跳转 //展示模态视图 - (void)presentViewController:(UIViewController *)viewControllerToPr ...