精华内容
下载资源
问答
  • 内联标签设置宽度是无效的; ========================================================================== 可以通过属性 display : inline-block ; 将span标签变为 "内联-块标签"(介于块级元素和...

    因为span标签是 inline "内联标签";对内联标签设置宽度是无效的;

    ==========================================================================

    可以通过属性 display : inline-block

    将span标签变为 "内联-块标签"(介于块级元素和内联元素之间),这样就可以设置其宽度了

    展开全文
  • 我有以下问题:我有div包含其他元素,我尝试使其宽度依赖于内容。...CSS min-width属性不起作用例子:我想有白格(即主格,我是在谈论)严格围绕在它的形式,而不会在左侧和右侧空的空间。我给了表格样式max-width:5...

    我有以下问题:

    我有div包含其他元素,我尝试使其宽度依赖于内容。我也限制这个div的最大宽度。我在CSS中使用min-width和max-width,但似乎min-width不起作用。无论内容是什么,div的宽度始终为max-width值。CSS min-width属性不起作用

    例子:

    我想有白格(即主格,我是在谈论)严格围绕在它的形式,而不会在左侧和右侧空的空间。我给了表格样式max-width:500px来表明,即使内容很小,主格保持不变。

    HTML

    CSS

    .gInnerBox{

    position: relative;

    background-color: #fff;

    opacity: 0.9;

    padding: 10px 10px 10px 10px;

    box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;

    -moz-box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;

    -webkit-box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;

    border: 1px solid #000;

    border-radius: 20px;

    -moz-border-radius: 20px;

    -webkit-border-radius: 20px;

    }

    .sInnerBoxMain{

    max-width: 1000px;

    min-width: 500px;

    margin-left: auto;

    margin-right: auto;

    top: 50px;

    }

    2011-11-24

    vizzdoom

    展开全文
  • css属性width

    2018-05-02 17:23:44
    大多数最开始接触css这门语言应该都是从width这个属性开始的,然而却很少有人真正理解这个属性。width从英文意思上就可以看出是宽度的意思,...这个就是width属性的默认值。而width:auto;又是什么意思呢?这个不同元...

    大多数最开始接触css这门语言应该都是从width这个属性开始的,然而却很少有人真正理解这个属性。

    width从英文意思上就可以看出是宽度的意思,而网页布局中我们是离不开这个属性的。但是width具体作用的细节又是如何呢?

    1.width:auto;

    当我们没有为元素设置宽度的时候,这是宽度表现就是为width:auto.这个就是width属性的默认值。而width:auto;又是什么意思呢?这个不同元素表现形式也就不同。

    (1)像div,p这种元素的宽度默认是最大程度撑满父级容器的,如下图所示:


    (2)而对于有浮动,绝对定位,table元素或inline-block元素则表现为适当的收缩,如下图所示:


    (3)在父元素宽度不够显示时会超出容器限制,如下图所示:


    则可以看出在没有其它影响流的属性(如上面定位,浮动,字体限制)存在的时候,大部分块级元素表现为霸道总裁,最大程度的撑开。而行内元素或者行内块级元素表现为小鸟依人,适当的收缩。

    2.width:100%;

    (1)在正常流的情况下我们是不需要设置width:100%;如果设置了反而会出现不好的情况,如下图:



    当我们不为子元素设置宽度时表现为自动撑大,而设置100%后就超出父元素了!

    (2)当我们为子元素设置了定位属性这个时候就需要width:100%帮忙了。


    当我们设置了绝对定位或固定定位后,宽度就自然缩小了


    width:100%后宽度相对于最近具有定位元素的祖先元素计算


    而当设置绝对定位时,同时设置left和right的时候,这时宽度又表现为最大程度适应父元素了。


    3.外部尺寸与内部尺寸

    (1)外部尺寸

    外部尺寸表示元素尺寸由外部元素决定,当我们往一个杯子里面倒水的时候,这是水的宽度就是由杯子的宽度决定的。像div,p这类大部分块级元素的宽度就是这种表现形式。

    (2)内部尺寸

    内部尺寸表示元素尺寸由内部元素决定,我们想象一个紧闭的塑料袋,当我们没用往里面放东西的时候,此时袋子的宽度应该为0,而当我们往里面放置物体时就撑开了袋子,袋子就有了和放置的物体一样的宽度。inline-block行内块级元素就是典型的内部尺寸元素,而且浮动元素和绝对定位元素同意属于内部尺寸元素。

    (3)格式化宽度

    当我们为绝对定位同时添加left和right属性后,此时绝对定位宽度又变成相对最近具有定位元素的祖先元素的宽度进行计算。

    而还有一种情况就是当我们为inline-block元素内文字设置white-space时,此时元素宽度表现为最大宽度,也就是文字多宽,那么元素就有多宽。

    4.盒子模型

    (1)标准盒子模型

    宽度=内容的宽度(content)+border+padding+margin

    (2)低版本IE盒子模型

    宽度=内容的宽度(content+border+padding)+margin

    (3)box-sizing

    用来控制元素的盒子模型的解析模式,默认为content-box,即设置元素的height、width属性指的是content部分的高、宽;

    border-box,IE传统盒子模型,设置元素的height、width属性指的是content+border+padding部分的高、宽;

    本文章参考张鑫旭的《CSS世界》

    展开全文
  • 什么要使用 height 和 width 属性您是否见过当文档加载时其内容会显示不规律的移动。之所以会这样,是因为浏览器为了能够显示每一个加载的图像,而不断地重新调整页面的布局。浏览器通过下载并解析出图像的宽度和...

    为什么要使用 height 和 width 属性

    您是否见过当文档加载时其内容会显示不规律的移动。之所以会这样,是因为浏览器为了能够显示每一个加载的图像,而不断地重新调整页面的布局。浏览器通过下载并解析出图像的宽度和高度来决定图像的大小,然后就会在显示窗口中留出一个相应的矩形空间。然后浏览器就会调整页面的显示布局,以便把图像插入到显示当中。这同时也告诉我们,图像是独立的文件,它与源文件都分别是独立加载的。

    但是这不是一种最有效的显示文档的方法,因为浏览器在显示相邻的以及后面的文档内容之前,必须要检查每一个图像文件,并计算它们的屏幕空间。这可能会给文档的显示带来非常大的延迟,从而打断用户的阅读。

    对于创作者来说,一种更为有效的方法是通过 <img> 标签的 height 和 width 属性来指定图像的尺寸。这样的话,浏览器在下载图像之前就为其预留出了位置,从而可以加速文档的显示,还可以避免文档内容的移动。这两个属性都要求是整数值,并以像素为单位来表示图像尺寸。这两个属性在 <img> 标签中出现的次序并不重要。
    height 和 width 属性的问题

    虽然 <img> 标签的 height 和 width 属性能够改善性能并让你实现一些小技巧,但在使用它们时还是有一些棘手的负面效果。即使用户已经关掉了自动下载图像的功能,浏览器还是要把为图像预留的空间以指定的尺寸显示出来。而这样留给读者的通常是一个空的框架,里面有一个毫无意义的图标,表示这是放置图像的位置。这时页面将看上去非常糟糕,就像根本没有完成一样,并且大部分内容都毫无用处。如果不用这些指定的尺寸,则浏览器将只是在文本中放置一个图像图标,这样显示中至少还有一些文字可以阅读。

    对于这个问题我们还没有解决方案,只能强调一点,就是去使用 alt 属性和一些描述性文字,这样读者至少知道这里缺少的是什么东西。我们还是建议您使用这些尺寸属性,因为我们鼓励一切能够改善网络性能的行为。

    转载于:https://www.cnblogs.com/bigdesign/p/4386488.html

    展开全文
  • 元素width属性详解

    2012-10-04 16:20:41
    1. 在正常流中非替换元素块级元素框的水平部分总和等于父元素的width.
  • canvas具有两个行内的属性width与height属性,同时如果使用css定义width与height属性;在解释这两类之间的差别之前先看一下作的测试: css: canvas { display: block; border: 2px solid gray; border-radius...
  • 标签的 height 和 width 属性设置图像的尺寸。 提示:为图像指定 height 和 width 属性是一个好习惯。如果设置了这些属性,就可以在页面加载时为图像预留空间。如果没有这些属性,浏览器就无法了解图像的尺寸,也...
  • CSS 尺寸/宽高 属性 1. height 属性: 设置 元素的高度 (auto/长度值/ 百分比值) 1.1 max-height 属性: 设置元素的 最大高度 (最小高度 是最小, 高度 超出时,...2. width 属性: 设置 元素的宽度 (默认用于 内容区,浏
  • table里td设置width,firefox等浏览器里...要让ie也有效,必须需要在table里再设置一下table-layout: fixed,如 style="table-layout: fixed"> 这样ie里td的width才生效。 使用 style="table-layout: fixed" >
  • 怎么设置单元格的宽度啊?data-width设置的列宽不管用 [img=https://img-bbs.csdn.net/upload/201603/01/1456800021_838875.png][/img]
  • 在写table表格框的时候,会遇到自己的属性设置了width: :属性和height:;属性,可预览的时候不会有任何的变化,你的表格还是一团没有任何的可看性。废话不多说,我们一起来看看吧 table{ table-layout: fixed; }...
  • width: auto或不设置宽度 子元素(包括content+padding+border+margin)撑满整个父元素的content区域。 子元素有margin、border、padding时,会减去子元素content区域相对应的width值 父元素的content = 子元素...
  • 详细解释 max-width and min-width 之间的关系及用法前言@media 是什么怎么用?Question 1: So @media only screen and (max-width: 1068px) 是什么鬼?@media 如何使用?CSS3 多媒体查询自适应视窗多媒体查询语法@...
  • 什么设置的margin-top属性管用:建议:尽可能的手写代码,可以有效的提高学习效率和深度。有时候大家可能会遇到奇怪的现象,尽管没有任何的语法错误,但是设置的margin-top属性不会起作用,下面就就结合代码实例...
  • width属性 width属性用于设置页面的布局视口宽度,属性值不带单位,默认单位为像素。 其默认值在不同浏览器中不同,但大多数为980。 但需要注意的是(以下结论都基于Chrome的测试工具): 当只设置width属性值,而...
  • 设置了style的top属性,不管用,原代码如下: <input type="text" id="suggestId" value="" style="width:350px;height:25px;top:30px;"> 要加position:absolute,如下: <input type="text" id=...
  • 在table中设置min-width和max-width属性 <tr><td>1</td><td>2</td></tr> table{min-width:60%;min-width:100%;} 但是chrome不兼容max-width,ie7两者都不兼容。 解决方案:在table外层包一个div,在div上设置...
  • 使用约束布局时,使用include引入布局,layout属性管用, 注意:这里要重写android:layout_width和android:layout_height两个属性
  • 前端学习——经常出现的width

    千次阅读 2014-06-28 14:38:42
     在HTML设计中width经常出现,width可以有效的控制网页元素的宽度和高度,但是width却有两种完全不同的表现形式——属性和样式。在HTML中,属性和网页标签相伴并被包裹在    下面就通过几个例子说明问题。 ...
  • 背景:给新屏幕添加了一个搜索的功能,为了复用布局,使用include方式引用,父控件是RelativeLayout,设置layout_above属性不起作用。 方法:include中要重写width和height。 举例:  ...
  •   提示:验证 (XHTML 1.0 Transitional): 属性width”被视为已过时。建议使用较新的构造 解决方法:     类似:转换为 style="text-align: center">
  • 如何设置span的width

    2013-03-14 17:35:07
    最近制作网站时发现给span设置宽度会无效,通过查阅CSS2标准中关于width 的定义发现,原来CSS中的 width 属性并不总是有效的,如果对象是 inline 对象,width 属性就会被忽略,Firefox 和 IE 是遵循CSS标准,因而...
  • <!--google_ad_client = "pub-8333940862668978";/* 728x90, 创建于 08-11-30 */google_ad_slot = "4485230109";google_ad_width = 728;google_ad_height = 90;//--><script type="text/javascript"
  • 【msdn wpf forum翻译】TextBlock等类型的默认样式&lpar;implicit style&rpar;为何有时不起作用?原文:[msdn wpf forum翻译]Text... 原文链接:http://social.msdn.microsoft.co ...span width不起作用,bor...
  • vuejs+element UI table的常见的属性及事件

    万次阅读 多人点赞 2018-04-23 16:20:21
    一.table组件的方法,事件 查看官网 二.常用的事件,属性 (一).属性 1.多选框(type = "selection") 需要...el-table-column type="selection" width="55"></el-table-column> 2. :data="tableData"...
  • 行内元素的width和height无效,要使其有效要高属性display

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 119,348
精华内容 47,739
关键字:

width属性对什么有效