CSS尺寸与补白

摘要:
维度和填充宽度语法:width:length value | percentage | auto默认值:auto适用于:除位移内联元素、表行、表行组外的所有元素继承:无动画:当值为length value |percentage时,计算值:指定值媒体:视觉值:auto:无特定宽度值,取决于其他属性值长度值:使用长度值定义宽度。对于img元素,如果仅指定了此属性,则其高度值将根据图像源的大小按比例缩放。width属性是长方体模型的重要部分。它可以是负值百分比:用于定义外部填充。
尺寸与补白

width

语法:

width:长度值 | 百分比 | auto

默认值:auto

适用于:除非置换内联元素,table-row, table-row-group之外的所有元素

继承性:无

动画性:当值为 长度值 | 百分比 时

计算值:指定的值

媒 体:视觉

取值:

  • auto: 无特定宽度值,取决于其它属性值
  • 长度值: 用长度值来定义宽度。不允许负值
  • 百分比: 用百分比来定义宽度。百分比参照包含块宽度。不允许负值

说明:

定义元素的宽度。

  • 对于img元素来说,若仅指定此属性,其height值将会根据图片源尺寸进行等比例缩放。
  • width属性是盒模型的重要组成部分。
  • 对应的脚本特性为:width

min-width

语法:

min-width:长度值 | 百分比

默认值:0

适用于:除非置换内联元素,table-row, table-row-group之外的所有元素

继承性:无

动画性:当值为 长度值 | 百分比 时

计算值:指定的值

媒 体:视觉

取值:

  • 长度值: 用长度值来定义最小宽度。不允许负值
  • 百分比: 用百分比来定义最小宽度。不允许负值

说明:

定义元素的最小宽度。

  • min-width属性的值小于width时,min-width属性将会被忽略。
  • min-width属性的值大于width时,min-width属性将会被忽略,同时width会忽略自己的值定义而使用min-width的值作为自己的使用值。
  • min-width属性的值大于max-width时,max-width属性将会被忽略。
  • 对应的脚本特性为:minWidth

max-width

语法:

max-width:长度值 | 百分比 | none

默认值:none

适用于:除非置换内联元素,table-row, table-row-group之外的所有元素

继承性:无

动画性:当值为 长度值 | 百分比 时

计算值:指定的值

媒 体:视觉

取值:

  • none: 无最大宽度限制
  • 长度值: 用长度值来定义最大宽度。不允许负值
  • 百分比: 用百分比来定义最大宽度。不允许负值

说明:

定义元素的最大宽度。

  • max-width属性的值小于width时,max-width属性将会被忽略,同时width会忽略自己的值定义而使用max-width的值作为自己的使用值。
  • max-width属性的值大于width时,max-width属性将会被忽略。
  • max-width属性的值小于min-width时,max-width属性将会被忽略。
  • 对应的脚本特性为:maxWidth

height

语法:

height:长度值 | 百分比 | auto

默认值:auto

适用于:除非置换内联元素,table-row, table-row-group之外的所有元素

继承性:无

动画性:当值为 长度值 | 百分比 时

计算值:指定的值

媒 体:视觉

取值:

  • auto: 无特定高度值,取决于其它属性值
  • 长度值: 用长度值来定义高度。不允许负值
  • 百分比: 用百分比来定义高度。不允许负值

说明:

定义了元素内容区(Content Area)的高度

  • 对于img元素来说,若仅指定此属性,其width值将会根据图片源尺寸进行等比例缩放。
  • width属性是盒模型的重要组成部分。
  • 对应的脚本特性为:height

min-height

语法:

min-height:长度值 | 百分比

默认值:0

适用于:除非置换内联元素,table-row, table-row-group之外的所有元素

继承性:无

动画性:当值为 长度值 | 百分比 时

计算值:指定的值

媒 体:视觉

取值:

  • 长度值: 用长度值来定义最小高度。不允许负值
  • 百分比: 用百分比来定义最小高度。不允许负值

说明:

定义元素的最小高度。

  • min-height属性的值小于height时,min-height属性将会被忽略。
  • min-height属性的值大于height时,min-height属性将会被忽略,同时height会忽略自己的值定义而使用min-height的值作为自己的使用值。
  • min-height属性的值大于max-height时,max-height属性将会被忽略。
  • 对应的脚本特性为:minHeight

max-height

语法:

max-height:长度值 | 百分比 | none

默认值:none

适用于:除非置换内联元素,table-row, table-row-group之外的所有元素

继承性:无

动画性:当值为 长度值 | 百分比 时

计算值:指定的值

媒 体:视觉

取值:

  • none: 无最小高度限制
  • 长度值: 用长度值来定义最大高度。不允许负值
  • 百分比: 用百分比来定义最大高度。不允许负值

说明:

定义元素的最大高度。

  • max-height属性的值小于height时,max-height属性将会被忽略,同时height会忽略自己的值定义而使用max-height的值作为自己的使用值。
  • max-height属性的值大于height时,max-height属性将会被忽略。
  • max-height属性的值小于min-height时,max-height属性将会被忽略。
  • 对应的脚本特性为:maxHeight

margin

简写属性语法:

margin:[ 长度值 | 百分比 | auto ]{1,4}

默认值:看每个独立属性

适用于:所有元素,除非 table | inline-table | table-caption的表格类元素之外

继承性:无

动画性:看每个独立属性

计算值:看每个独立属性

媒 体:视觉

分拆纵向独立属性语法:

vertical-margin:长度值 | 百分比 | auto

vertical-margin = margin-top,margin-bottom

默认值:0

适用于:所有元素,除非 table | inline-table | table-caption的表格类元素和非替代行内元素之外

继承性:无

动画性:当取值为 长度值 | 百分比 时

计算值:指定的百分比或绝对长度值

媒 体:视觉

分拆横向独立属性语法:

horizontal-margin:长度值 | 百分比 | auto

horizontal-margin = margin-right,margin-left

默认值:0

适用于:所有元素,除非 table | inline-table | table-caption的表格类元素之外

继承性:无

动画性:当取值为 长度值 | 百分比 时

计算值:指定的百分比或绝对长度值

媒 体:视觉

取值:

  • auto: 水平(默认)书写模式下,vertical-margin计算值为0,horizontal-margin取决于包含块的剩余可用空间。
  • 长度值: 用长度值来定义外补白。可以为负值
  • 百分比: 用百分比来定义外补白。水平(默认)书写模式下,参照其包含块的width进行计算,其它情况参照height,可以为负值

说明:

简写属性。为元素设置所有四个方向(上右下左)的外边距。

  • margin属性接受1~4个参数值。如果提供四个参数值,将按上、右、下、左的顺序作用于四边;提供三个,第一个用于上,第二个用于左、右,第三个用于下;提供两个,第一个用于上、下,第二个用于左、右;只提供一个,同时用于四边。

  • 非替代(non-replaced)行内元素可以使用该属性定义horizontal-margin;若要定义vertical-margin,必须改变元素为块级或行内块级。

  • 外延边距始终透明,即不可见也无法设置背景等任何样式。

  • 某些相邻的margin会发生合并,我们称之为margin折叠:

    h2{margin:10px 0;}
    div{margin:20px 0;}
    ......
    <h2>这是一个标题</h2>
    <div>
    	<h2>这是又一个标题</h2>
    </div>
    

    本例中,第1个h2的margin-bottom,div的margin-top,第2个h2的margin-top是相邻的,三者会被合并取其中最大的那个值作为最后的间隙,所以它们之间的margin间隙最后是(20px)。

    如果给上例中的div加上border的话:

    h2{margin:10px 0;}
    div{margin:20px 0;border:1px solid #aaa;}
    ......
    <h2>这是一个标题</h2>
    <div>
    	<h2>这是又一个标题</h2>
    </div>
    

    本例中,第一个h2的margin-bottom(10px),div的margin-top(20px)将被合并,但第二个h2的margin-top不与它们合并,因为它被border分隔,不与它们相邻。

  • margin折叠常规认知:

    • margin折叠只发生在块级元素上;
    • 浮动元素的margin不与任何margin发生折叠;
    • 设置了属性overflow且值为非visible的块级元素,将不与它的子元素发生margin折叠;
    • 绝对定位元素的margin不与任何margin发生折叠;
    • 根元素的margin不与其它任何margin发生折叠;
  • 对应的脚本特性为:margin

分拆纵向独立属性。为元素设置上、下外边距。

  • 替代(Replaced)行内元素可以应用该属性;非替代(non-Replaced)行内元素要使用该属性必须改变元素为块级或行内块级。
  • 水平(默认)书写模式下,margin 合并只发生在vertical-margin上。
  • 对应的脚本特性分别为:marginTop, marginBottom

分拆横向独立属性。为元素设置上、下外边距。

  • 所有的行内元素均可以应用该属性。
  • 默认情况下,horizontal-margin不会发生 margin 折叠,除非将书写模式改变为纵向。
  • 对应的脚本特性分别为:marginRight, marginLeft

padding

简写属性语法:

padding:[ 长度值 | 百分比 ]{1,4}

默认值:看每个独立属性

适用于:所有元素,除table-row-group | table-header-group | table-footer-group | table-column-group | table-row

继承性:无

动画性:看每个独立属性

计算值:看每个独立属性

媒 体:视觉

分拆独立属性语法:

padding-*:长度值 | 百分比

padding-* = padding-top,padding-right,padding-bottom,padding-left

默认值:0

适用于:所有元素,除table-row-group | table-header-group | table-footer-group | table-column-group | table-row

继承性:无

动画性:是

计算值:指定的百分比或绝对长度值

媒 体:视觉

取值:

  • 长度值: 用长度值来定义内补白。不允许负值
  • 百分比: 用百分比来定义内补白。水平(默认)书写模式下,参照其包含块的width进行计算,其它情况参照height,不允许负值

说明:

简写属性。为元素设置所有四个方向(上右下左)的内边距。

  • padding属性接受1~4个参数值。如果提供四个参数值,将按上、右、下、左的顺序作用于四边;提供三个,第一个用于上,第二个用于左、右,第三个用于下;提供两个,第一个用于上、下,第二个用于左、右;只提供一个,同时用于四边。
  • 需要注意的是,当我们为行内元素定义纵向内补白(padding-top/padding-bottom)时,虽然不需要将之转化为行内块或者块级,但是给行内元素设置纵向内补白并不会影响布局。内补白会在当前元素的行框基础上向顶部和顶部外延,但是这些外延不会拓展新的布局大小(你甚至可以把它想象成类似outline)。
  • 对应的脚本特性为:padding

分拆独立属性。为元素单独设置上、右、下、左4个方向的内边距。

  • 对应的脚本特性分别为:paddingTop, paddingRight, paddingBottom, paddingLeft

免责声明:文章转载自《CSS尺寸与补白》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇利用PHPMailer 来完成PHP的邮件发送微信官方开源UI库-WeUI下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

openresty性能优化 -- table相关优化

最近一直在做openresty相关开发,使用lua优化,优化了几次,发现最大的优化是table的优化。table优化的大原则是尽量少创建表,表创建多了毕竟耗性能。这里的创建,指新创建和扩表引起的创建。在往table插入数据的过程中,如果table不够用,会扩大两倍,所以,一个1030项数据,会经过十次扩表,非常消耗性能。 方法一,代码层面重用表 原始代码:...

【CSS3】border属性

border常见属性 值 描述 border-width 规定边框的宽度 border-style 规定边框的样式 border-color 规定边框的颜色 border-image 规定边框的图像 border-radius 规定边框的圆角 box-shadow 规定边框的阴影 1.border-width:规定边框宽...

laravel框架实现商品订单加入到rabbitMQ队列

一、 创建一个任务类 php artisan make:job QueuedTest  //执行之后app/Jobs目录下生成一个QueuedTest.php 二、创建控制器 php artisan make:controller QueuedController 执行之后生成app/Http/Controllers/QueuedControlle...

el-table 表格循环多张图片

<el-table :data="weekList" stripe tooltip-effect="dark" class="table"> <el-table-column v-for="(item, index) in tableOrderItem":key="index":width="item...

Qt 杂记——QTableWidget列表添加、删除(备份)

1.列表的添加 需求:向一个有两列的Table中添加一条数据 思路:新建一个inputDialog,通过按钮打开Qt自带的inputDialog,传递回输入的数据,再添加到列表中 界面: 代码: inputDialog.h   #ifndef INPUTDIALOG_H #define INPUTDIALOG_H #include <QDialog...

Jquery学习笔记(7)--京东导航菜单

主要是几个模块的浮动和定位不好处理,另外还缺少右侧导航,及幻灯片。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title>...