vue-sell中一些css问题

  1. 当父元素内只有一个行内元素时,我们会在父元素上添加line-height和text-align,使得行内元素居中,但是,当我们遇到连个高度不一的行内元素时,会怎么样呢?
    我们需要在长的元素上加上vertical-align:top
    http://js.jirengu.com/gumuy/3/edit?html,css,output
    张鑫旭
    因为行内元素是自适应的,所以文字在里面应该是垂直居中的,但有时会因为font-weight,font-family变得不太垂直居中。

  2. line-height和height的不同
    a. line-height的适用元素是所有的元素,而height不能在行内元素上有作用。
    b. 当我们使用line-height时,里面的文字能够居中放置。
    c. 当我同时使用height和line-height时,块级元素的高度以height为准。而行内元素height没有作用,所以line-height为占据空间大小,若line-height小于文字自适应高度,line-height的高度为大。注意若将line-height设为0,似乎没有什么作用。

总结一下:在块级元素上时,height > line-height > 文字自适应。
在行内元素上时,line-height > 文字自适应。当然其实我们一般都会把line-height和height一样大,所以不用考虑那么多。


这是我们使用line-height时的情况,对于行内元素而言,虽然边界依然是包裹着文字,但是我们可以看到,line-height已经有了作用,占据了网页的空间。
http://js.jirengu.com/juvuj/4/edit

  1. 关于height: 100% (width相同,另外100%是指占满content)
    MDN上的定义,<percentage>相对于元素的块容器高度,如果块容器的高度没有显式指定,计算值为 auto。
    从上面这句话我们可以看出如果父元素设置了height=100px,子元素的设置高度height:100%,那么子元素的高度是100px。如果父元素是自适应的,没有设置高度,那么子元素的高度设置成height:100%也依然是自适应的。
    例子

a.遇到position:absolute时的情况
若父元素依然是自适应,而子元素设置position:absolute和height:100%,这时子元素的高度会是父元素高度的100%。
例子

b.遇到position:fixed的情况与上面类似,其高度是相对屏幕的了。

  1. 两个行内元素的垂直居中问题。

对于这种情况,我一般直接用flex就可以很容易的解决。


打对于这种情况,既需要居中,icon和文字还纠缠在一起。我只能外层用的flex,里面用的vertical-align:top和margin解决的。而老师用的是display:table和table-cell,vertical-align:middle解决的。

5.sticky-footer

6.float也能居中
在购物车详情的头部中,我们使用了float,利用float的性质也很好的实现了居中。

  1. 在8-3中我们设置padding-top:100%,这时padding-top的大小等于width(黑科技)

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,421评论 1 92
  • CSS格式化排版 1、字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例...
    张文靖同学阅读 1,102评论 0 3
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 670评论 0 1
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,424评论 0 30
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 1,388评论 0 5