CSS样式的一些小总结

chavesgu 发布于2019-08-01 15:33 / 2176人阅读

摘要：搞得头昏昏的，这时候得看文档才能明了，或做些小总结就心里有底了，下次不同的场景就知道用不同的属性来实现效果，纠错也更明确思路了。

这是本人学习 css 两天的一些小总结和体会，如果有什么不足或错误的地方还请指教，纠错和探讨。

css 样式最令人头疼的地方就是一个属性有时候在这地方用可以，到另一个地方用却没效果了，或是冲突了。搞得头昏昏的，这时候得看文档才能明了，或做些小总结就心里有底了，下次不同的场景就知道用不同的属性来实现效果，纠错也更明确思路了。

第一部分：line-height: 和 padding：

 line-height: 和 padding：

1.line-height:

line-height: 说明：检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。

这句话看来半天越看越奇怪，实际开发中也经常碰到行高不精确的问题

最经常见的是给字体居中显示，如我给

外边框为 200px ，所以 line-height: 200px 效果就实现了。
所以我对上面 line-height 作用于行内元素的理解是这样的。注意是 行内元素

再给一个快级元素的，如

现在下面一张图。

外边框为 200px ，所以 line-height: 200px 效果就 MD 尴尬了。

所以我对上面 line-height 作用于块级元素的理解是上图所标记的，所以要对块级元素居中，实际行高要减去 2倍字体大小，及 line-height：160px

其他行内元素和块级元素遇到行高问题可以依照上面这种思路分析分析。

2.padding：

padding：说明：检索或设置对象四边的内部边距。

padding也跟上面 line-height 一样受行内元素和块级元素的影响

注意要点：行内元素可以使用该属性设置左、右两边的内补丁；若要设置上、下两边的内补丁，必须先使该对象表现为块级或内联块级。

第二部分: margin:0 auto; 和 text-align:center;

margin:0 auto; 和  text-align:center;

1.margin:0 auto;

margin:0 auto：说明：上下间距为0，左右自适应，及居中

这里只讨论居中的情况，不讨论 margin-left,marging-top等一些情况

 行内元素可以使用该属性设置左、右两边的外补丁；若要设置上、下两边的外补丁，必须先使该对象表现为块级或内联块级。

对于行内元素设置居中：

但对于图片不用设置大小，

.text_div img{
          display: block;
          margin:0 auto;
      }

就能居中

对于块级元素

2. text-align:center;

text-align:center：说明：设置或检索对象中内容的水平对齐方式。

对于行内元素使用 text-align，与 margin:0 auto 不同的是，不同设置元素的大小

.text_div a{
          display: block;
          text-align: center;
      }

对于快级元素

那么

嗨你好！

点个赞

css:

.text_div{
          margin-top: 100px;
          margin-left: 50px;
          width:400px;
          height:400px;
          border: 1px solid  #7e1a05;

      }
      .text_div img{
          display: block;
          margin:0 auto;
      }
      .text_div p{
          text-align: center;
      }
      .text_div a{
          width: 70px;
          height: 22px;
          background:  #7e1a05;
          color: #FFF;
          border-radius: 2px;
          display: block;
          text-align: center;
          margin:0 auto;
          text-decoration:none;
          line-height: 22px;
      }

未完，待续 .....

GPU云服务器云服务器 vps日常维护中的一些要点总结 ddos一些比较小的网站 css的样式 html的css样式

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

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

CSS样式的一些小总结

摘要：搞得头昏昏的，这时候得看文档才能明了，或做些小总结就心里有底了，下次不同的场景就知道用不同的属性来实现效果，纠错也更明确思路了。这是本人学习 css 两天的一些小总结和体会，如果有什么不足或错误的地方还请指教，纠错和探讨。 css 样式最令人头疼的地方就是一个属性有时候在这地方用可以，到另一个地方用却没效果了，或是冲突了。搞得头昏昏的，这时候得看文档才能明了，或做些小总结就心里有底了...

zhjx922 2019-08-29 11:06 评论0 收藏0
【CSS】小妙招，各种问题总结方法处理

摘要：应用常例是属性设置水平放置后出现间隙。边框产生的位置只有两个地方，在内容内，在内容外，请看下面介绍。产生在内容外，这个好理解，也是我们最普遍见到的，就是在内容外绘制边框。1.实现div文字溢出自动省略号截取 overflow:hidden; /*超过部分不显示*/ 　　　　　　text-overflow:ellipsis; /*超过部分用点点表示*/ 　　　...

springDevBird 2019-04-23 13:28 评论0 收藏0
css学习归纳总结（三）

摘要：也就是说，较宽的外边距决定两个元素最终离多远。盒模型结论二没有设定属性的元素始终会扩展到填满其父元素的宽度为止。布局的基本概念多栏布局有三种基本的实现方案固定宽度流动弹性。为文档添加样式的三种方法行内样式行内样式是写在HTML标签的style属性里的，比如： Hello Everyone! 行内样式会覆盖嵌入样式和链接样式。嵌入样式嵌入的css样式是放在HTML文档...

Drummor 2019-08-28 18:01 评论0 收藏0
SegmentFault 技术周刊 Vol.38 - 神奇的 CSS

摘要：层叠即表示允许以多种方式来描述样式，一个元素可以被渲染呈现出多种样式。可以让属性的变化过程持续一段时间，而不是立即生效。比如，将元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用后，将按一个曲线速率变化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全称是 Cascading Style Sheet...

elliott_hu 2019-08-29 13:56 评论0 收藏0
cml迁移指南(CML Migrate Guide)

摘要：今天，为了让大家的项目优雅升级，快速接入，给你带来一份丰盛的迁移指南目录结构和微信小程序一样，包含一个描述整体程序的和多个描述各自页面的。 cml 作为真正让一套代码运行多端的框架，提供标准的MVVM模式，统一开发各类终端。同时，拥有各端独立的运行时框架(runtime)、数据管理(store)、组件库(ui)、接口(api)。此外，cml在跨端能力加强、能力统一、表现一致等方面...

FreeZinG 2019-08-26 13:42 评论0 收藏0