美文网首页
CSS: 宽度与百分比的简单总结

CSS: 宽度与百分比的简单总结

作者: BiiHug | 来源:发表于2018-08-27 16:48 被阅读0次

宽度的定义

宽度width(与高度height)是在网页布局中经常用到的属性,但作为新手容易会对两者的定义产生误解。下面我们给出widthheight的准确定义:

  • 一般地,一个元素的width被定义为从左内边界右内边界的距离,height则是从上内边界下内边界的距离。

上述定义很清晰地指出,元素的width只是元素content内容区的宽度,不包括padding,border, 与margin,即元素的width并不表示元素的可视宽度

使用auto与text-align:center的区别

autotext-align:center都是在局中排版中常会用到的属性设置,他们很容易被混用,下面我们给出两者的准确定义:

  • 如果设置widthmargin-leftmargin-right中的某个值为auto,而余下两个属性指定为特定的值,那么设置为auto的属性会确定所需的长度,从而使元素框的宽度等于父元素的width
  • text-align:center只用于居中块级元素中的内联内容

因此,当我们想让一个块级元素在另一个块级元素中居中时(比如p在某个div中),text-align:center是无效的,而可以通过设置width:auto或者margin:auto实现自动局中效果。

百分比

百分比是实现页面自适应的重要途径,而元素百分比的宿主到底是谁一直是令人困扰的问题。其实CSS对于百分比的定义十分明确:

  • 所有元素的百分比都是相对于其包含块( containing block)width
  • 在盒模型的设置属性中,除了height的百分比是相对于包含块的height,其余的widthmargin(不管是横向的margin-left还是纵向的margin-right)、padding(同上)都是相对于包含块的width

至此我们发现,包含块( containing block)的确切定义就显得尤为重要。有时间的情况下会在这篇中进行进一步的补充或新开一篇进行介绍。

相关文章

  • CSS: 宽度与百分比的简单总结

    宽度的定义 宽度width(与高度height)是在网页布局中经常用到的属性,但作为新手容易会对两者的定义产生误解...

  • width 继承父元素

    CSS入门简单,精通是真难。 需求: fixed 定位的结点需要继承父结点的宽度,代码的层级有点深。 使用百分比为...

  • CSS真的很麻烦,把CSS语法学会了,提升你的编码能力还是绰绰有

    css3画热咖啡 css自适应布局方案 一、百分比布局宽度百分比,高度px布局 二、rem布局①自定义rem尺寸 ...

  • 两列显示以及浮动布局

    一、两列宽度是窗口宽度的百分比html: layout.css: 二、第一列宽度固定,第二列不舍宽度第一列用flo...

  • CSS中的百分比计算方法(相对于谁)

    前言 经常在css中使用百分比的单位,那么CSS中的百分比计算方法(相对于谁)来计算呢? 一、相对于父级宽度的: ...

  • 2017-11-08【左中右三栏布局】

    关于CSS的三无原则:无浮动,无宽度,无图片。 实现效果:左右两栏宽度固定或设置百分比,中间一栏宽度自适应。 方法...

  • CSS等比多列布局的方法

    一、float + 百分比 优点:简单快速;宽度间距可控制。 缺点:需要知道具体列数从而设置对应的百分比宽度和间距...

  • CSS布局套路

    CSS布局 布局套路 浮动布局 宽度百分比浮动布局http://js.jirengu.com/yobiq/1/ed...

  • 4.css盒子模型-第一二章

    宽度属性 宽度:width:长度值|百分比|auto最大宽度:max-width:长度值|百分比|auto最小宽度...

  • CSS之宽度与高度

    使用CSS进行布局与定位,就必须了解CSS中的宽度与高度。在CSS中:1.内联元素的宽度由行高决定,宽度由内容、p...

网友评论

      本文标题:CSS: 宽度与百分比的简单总结

      本文链接:https://www.haomeiwen.com/subject/kqvziftx.html