精华内容
下载资源
问答
  • 本博客意在剖析width与max-width/min-width属性 width和max-width/min-width属性均属于CSS中常用属性,其中 width属性设置元素的宽度。默认情况下,它会设置内容区域的宽度,但是如果box-sizing设置为border-box,...

    本博客意在剖析width与max-width/min-width属性

    width和max-width/min-width属性均属于CSS中常用属性,其中

    • width属性设置元素的宽度。默认情况下,它会设置内容区域的宽度,但是如果box-sizing设置为border-box,它会设置边框区域的宽度
    • max-width/min-width属性设置元素的最大/最小宽度。它可以防止使用的width属性值变得比max-width指定的值大/小,值得注意的是,min-width属性会覆盖max-width属性,针对这一点,后续会有验证

    在width和max-width/min-width属性使用过程中,属性值均可为100%,在MDN中对这种情况进行了如下阐述

    • <percentage>
      • Defines the max-width as a percentage of the containing block's width.
      • Defines the width as a percentage of the containing block's width.

    如上所示,二者相关内容定义类似,但在实际应用中略有不同,例如在如下示例中,

    设置img的父盒子即div的width为浏览器宽度的25%,img的width为100%(此处代表img宽度与父盒子宽度相同,高度等比缩放),在该例中,可以看出随着浏览器界面的放大,img的尺寸等比放大,且为父盒子宽度的100%,放大过程不受img原尺寸的影响

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
                width: 25%;
            }
            div img {   
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="IMAGES/images/apple.png" alt="">
        </div>
    </body>
    </html>

    设置img的父盒子即div的width为浏览器宽度的25%,img最大宽度为100%(此处代表img最大宽度为原图的宽度,而不会受到浏览器宽度的不断增加而扩展),在该例中,可以看出,当父盒子div的宽度不足img宽度时,随着浏览器界面的放大,img的宽度为父盒子div的宽度的100%,但当父盒子div的宽度大于img宽度时,img尺寸不随浏览器界面的放大而放大,即最大为原图尺寸。min-width同理

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
                width: 50%;
            }
            div img {   
                max-width: 100%;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="IMAGES/images/apple.png" alt="">
        </div>
    </body>
    </html>

    为进一步探究max-width与min-width的覆盖关系,进行如下实验,通过结果可以看出,img的最大尺寸明显在img宽度的11%以上,这说明在同时设置min-width和max-width时,min-width属性会覆盖max-width属性

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
                width: 100%;
            }
            div img {   
                min-width: 10%;
                max-width: 11%;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="IMAGES/images/apple.png" alt="">
        </div>
    </body>
    </html>

     本系列博客会陆续更新,主要内容为所前端学习过程中的心得体会,如感兴趣,大家多关注鼓励

    展开全文
  • CSS width属性

    2013-10-27 10:57:21
    width属性仅为内容区宽度,不包括padding、border、margin;

    width属性仅为内容区宽度,不包括padding、border、margin;


    展开全文
  • 了解一下min-width属性

    2020-05-22 23:27:38
    min-width属性在CSS尺寸中是比较常用的,本文将带你深入理解min-width属性的各个方面,包括它的语法、取值、作用和浏览器兼容性,最后附上min-width的实例,希望能够对你有所帮助。 原文 min-width定义和用法 min-...

    min-width属性在CSS尺寸中是比较常用的,本文将带你深入理解min-width属性的各个方面,包括它的语法、取值、作用和浏览器兼容性,最后附上min-width的实例,希望能够对你有所帮助。

    原文

    min-width定义和用法

    min-width:<length> | <percentage>

    默认值:0

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

    继承性:无

    动画性:当值为<length> | <percentage>

    计算值:指定的值

    min-width属性值

    <length>
    用长度值来定义最小宽度。不允许负值
    <percentage>
    用百分比来定义最小宽度。不允许负值

    min-width说明

    设置或检索对象的最小宽度。
    如果min-width属性的值大于max-width属性的值,max-width将会自动以min-width的值作为自己的值。
    IE6尚不支持此属性
    对应的脚本特性为minWidth

    min-width浏览器支持

    在这里插入图片描述

    min-width实例

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    <meta charset="utf-8" />
    <title>CSS min-width属性详解-CSS min教程</title>
    <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
    <style>
    .test{float:left;min-width:200px;background:#eee;}
    </style>
    </head>
    <body>
    <div class="test">我的最小宽度为200</div>
    </body>
    </html>
    

    效果图

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • CSS max-width 属性

    2017-09-01 17:55:27
    原文地址:http://www.runoob.com/cssref/pr-dim-max-width.html... 实例 设置段落的最大宽度: ...max-width属性设置元素的最大宽度。...注意: max-width属性不包括填充,边框,或页边距! 默认值: none 继承: no
    原文地址:http://www.runoob.com/cssref/pr-dim-max-width.html


    实例
    设置段落的最大宽度:
    p
    {
    max-width:100px;
    }


    尝试一下 »
    属性定义及使用说明
    max-width属性设置元素的最大宽度。
    注意: max-width属性不包括填充,边框,或页边距!
    默认值: none
    继承: no
    版本: CSS2
    JavaScript 语法: object.style.maxWidth="100px"

    属性值
    描述
    none 默认。定义对元素的最大宽度没有限制。
    length 定义元素的最大宽度值。
    % 定义基于包含它的块级对象的百分比最大宽度。
    inherit 规定应该从父元素继承 max-width 属性的值。
    展开全文
  • CSS border-width 属性

    千次阅读 2013-11-29 23:38:53
    10.1. CSS border-width 属性 10.1.1. CSS border-top-width 属性10.1.2. CSS border-right-width 属性10.1.3. CSS border-bottom-width 属性10.1.4. CSS border-left-width 属性 CSS border-width 属性示例 -- ...
  • 控制span的width属性

    千次阅读 2012-12-04 10:39:16
    一般来span标记的样式设定width属性,会发现不会产生效果。但是有时我们因为某种应用而需要来设置span的width属性。这个时候我们就要用到display属性了。  对于display属性而言他有四个属性值:block、inline、...
  • table表格宽带width属性研究

    千次阅读 2018-06-14 22:23:59
    今天在开发过程中有利用到table中的width属性,涉及百分比和像素,由于对width内部属性的不明确,导致表格的数据展示不完美,闲下来自己捣鼓,所以才有这份研究,仅作为个人成长记录,以及提供参考 情况分析: 1....
  • ios preferredMaxLayoutWidth属性

    千次阅读 2018-05-23 11:19:58
    多行UILabel不知道自己要显示多少内容,不知道自己的真实尺寸,这个preferredMaxLayoutWidth属性就告诉了它布局时最大的参考宽度。 正确地设置了UILabel的preferredMaxLayoutWidth属性之后发现它正常地显示了多行...
  • 直接给span标记的样式设定width属性,会发现不会产生效果。  如果设置display:block,width属性生效,但是此时的span跟div一样了。  如果设置display:inline-block,则span并列在同行,而且width属性生效。  ...
  • 在布局时,发现width属性对布局有很大的影响, 比如,在div内,如果div中设置width较小,那么即使float设为left,那么div中的元素 也是上下浮动,而不是左右浮动。 在div外,即使div的float设为left,但如果上一个div...
  • CSS min-width 属性

    千次阅读 2014-05-03 23:41:12
    CSS min-width 属性 CSS 参考手册 实例 设置段落的最小宽度: p { min-width:100px; } 亲自试一试 浏览器支持 IE Firefox Chrome Safari Oper
  • 标签的 height 和 width 属性设置图像的尺寸
  • 该方法通过在3个浮动元素上设置min-width和max-width属性来实现响应式布局。只要采用CSS中这个非常简单的响应式布局特性,就能够适应移动设备和不同尺寸的计算机屏幕。 准备工作 在极小视窗的限制下,把浮动元素...
  • css中border-width 属性

    千次阅读 2013-09-16 17:43:43
    border-width属性可能的值 值 描述 thin 定义细的边框。 medium 默认。定义中等的边框。 thick 定义粗的边框。 length 允许您自定义边框的...
  • 标签属性和css样式的优先级比较(及img的height、width属性) 今天在看w3c的CSS教程中的尺寸(Dimension)那一节,进行了如下实验: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
  • android 动态修改 TextView的width属性

    千次阅读 2013-12-19 18:10:53
    1:当我们需要动态的修改一个控件的宽度的时候请记住要么使用 setwidth都使用setwidth函数 要使用 LayoutParams.width属性就都用这样的方法去设置 2:当我们调用完setWidth函数后再去调用 LayoutParams.width的方法...
  • css max-width CSS | 最大宽度属性 (CSS | max-width property) The max-width property is used to help in setting the width of an element to the maximum. Although if the element or content is already ...
  • 超链接 A、Span 标签的width属性无效 针对症状的解决方法: 1.网页的首部加入了,把这断代码去掉即可。 2.在CSS中控制,相关元素的width属性值时加入:display:inline-block; 属性即可。 如:span 的...
  • 使用百分比值使用 width 属性的最后一个技巧是使用百分比值来代替像素的绝对值。这将使浏览器按照与浏览器显示窗口的一定比例来缩放图像。因此,如果要创建一个宽度与显示窗口宽度相同,高度为 30 个像素的彩色横条...
  • 标签的 height 和 width 属性设置图像的尺寸。 提示:为图像指定 height 和 width 属性是一个好习惯。如果设置了这些属性,就可以在页面加载时为图像预留空间。如果没有这些属性,浏览器就无法了解图像的尺寸,也...
  • 控制span的width属性且不换行

    千次阅读 2010-12-06 21:42:00
    span标记的样式设定width属性,会发现不会产生效果。 果设置display:block,width属性生效,但是此时的span跟div一样了。 如果设置display:inline-block,则span并列在同行,而且width属性生效。...
  • 在介绍了包含块之后,CSS2.1标准中介绍了width属性和height属性,这两个属性在我们的页面布局中也发挥着重要的作用。在盒模型中,width和height包围了一个框的内容区域(content area),是否拥有显式的定义、框的类型...
  • IE和firefox max-width 属性兼容性问题

    千次阅读 2013-05-17 18:07:56
    在firefox里,有个max-width属性,但是IE不支持,那怎么办呢,就这么办,如下: width:expression(this.width>640?640:true); 这个ie firefox都支持
  • 本文承接CSS2.1SPEC:视觉格式化模型之width属性详解(上),继续分析CSS视觉格式化模型中width以及相关值的计算问题:
  • css的data-width属性赋值

    千次阅读 2019-01-12 11:07:34
    $('.xxx').data('width','30%'); 内容最少的一篇博客,嗯。
  • 标签中必须加android:layout_height和android:layout_width属性。如果不加,程序加载xml文件setContentView时会报错。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 31,617
精华内容 12,646
关键字:

width属性