码迷,mamicode.com
首页 > Web开发 > 详细

自动 | auto (Basic Box Model) - CSS 中文开发手册 - Break易站

时间:2020-07-04 01:23:15      阅读:88      评论:0      收藏:0      [点我收藏+]

标签:section   边框   values   模式   present   fit   中文   pen   max   

  • ??CSS 中文开发手册

    自动 | auto (Basic Box Model) - CSS 中文开发手册

    width 属性指定了元素内容区的宽度。默认情况下,该属性定义了内容区域的宽度。如果box-sizing设置为border-box,则确定边框区域的宽度。

    /* <length> values */
    width: 300px;
    width: 25em;
    
    /* <percentage> value */
    width: 75%;
    
    /* Keyword values */
    width: 25em border-box;
    width: 75% content-box;
    width: max-content;
    width: min-content;
    width: available;
    width: fit-content;
    width: auto;
    
    /* Global values */
    width: inherit;
    width: initial;
    width: unset;

    在min-width和max-width属性覆盖width。

    初始值

    auto

    适用元素

    all elements but non-replaced inline elements, table rows, and row groups

    是否是继承属性

    no

    Percentages

    refer to the width of the containing block

    适用媒体

    visual

    计算值

    a percentage or auto or the absolute length

    Animation type

    a length, percentage or calc();

    正规顺序

    the length or percentage before the keyword, if both are present

    语法

    width属性被指定为:

    以下关键字值之一:available,min-content,max-content,fit-content,auto。<length>或<percentage>。这可以选择跟随以下关键字之一:border-box,content-box。

    <length>可能的长度单位见<length>.

    <percentage>指定为包含块宽度的<percentage>.

    border-box如出现, 之前的<length>或<percentage>应用到元素的边框盒子.

    content-box如出现, 之前的<length>或<percentage>应用到元素的内容盒子.

    auto浏览器将会为指定的元素计算并选择一个宽度.

    fill使用?fill-available?行内尺寸或者?fill-available?块级尺寸其中一种来作为合适的书写模式。max-content固有的首选宽度.

    min-content固有的最小宽度.

    available包含块的宽度减去水平 margin, border 和 padding.

    fit-content以下两种情况下的较大值:

    固有的最小宽度

    固有首选宽度(max-content)和可用宽度(available)的较小值

    正式语法

    [ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto

    示例

    默认宽度

    p.goldie {
      background: gold;
    }
    <p class="goldie">The Mozilla community produces a lot of great software.</p>

    px 和 em

    转载请保留页面地址:https://www.breakyizhan.com/css/32261.html

    自动 | auto (Basic Box Model) - CSS 中文开发手册 - Break易站

    标签:section   边框   values   模式   present   fit   中文   pen   max   

    原文地址:https://www.cnblogs.com/breakyizhan/p/13233298.html

    (0)
    (0)
       
    举报
    评论 一句话评论(0
    登录后才能评论!
    © 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
    迷上了代码!