css - width / height
本文主要对《CSS世界》3.2节 width/height 作用的具体细节 的内容进行一些摘取和概括。更多资料可查阅《CSS世界》。
一、深藏不露的width: auto
一般情况下, 我们如果没有设置width,默认值为auto。根据不同的元素,表现出以下几种特性:
充分利用可用空间。如
<div>
、<p>
等这些块级元素宽度默认是100%于父级容器。(英文称:fill-available)收缩与包裹。典型代表是浮动、绝对定位、inline-block元素、table元素。(英文称:shrink-fit)
收缩到最小。最容易出现在table-layout为auto的表格。
- 超出容器限制。正常在父元素宽度固定的情况下,子元素宽度不会超出父元素。除非有明确的width相关设置,如连续的特别长的英文单词,或者是内联元素被设置了white-space:nowrap。
在css世界中,盒子分“外在盒子” 和 “内在盒子”,同样的,尺寸也分“外部尺寸” 和“内部尺寸”。其中,“外部尺寸”表示尺寸由外部元素决定, “内部尺寸”表示尺寸由内部元素决定。
1. 外部尺寸与流体特性
当我们在一个容器里倒入足量的水时,水一定会均匀铺满整个容器。这就是“流”的概念。在页面中放一个块级元素,宽度自然会铺满容器,所以没必要再设置width: 100%。
例: 子元素均有 margin 和 padding,前者 width:auto , 完全借助流特性,后者 width: 100%,结果尺寸会超出父容器。
默认情况下,绝对定位元素的宽度是由内部尺寸决定,也有特殊情况,当left / right 对立方位的属性值同时存在时,其宽度大小相对于最近具有定位特性的祖先元素计算。
2. 内部尺寸与流体特性
假如一个元素里边没有内容,宽度为0,那就是应用了内部尺寸,其主要体现在包裹性,就是包裹与自适应性。所谓的自适应性,指的是元素尺寸由内部尺寸决定,但永远小于父容器的尺寸,换句话说,内部子元素似乎有个max-width: “父容器宽度”的感觉,button 就是一个很好的例子。
例:有这么个需求,希望文字少时居中显示,文字内容较多时左对齐,此时可利用这包裹性实现。
<div class="content"><span class="text">{{text}}</span>
</div>
.content {width: 200px;height: 100px;text-align: center; /*主要*/background-color: #f0f3f7;
}
.text {display: inline-block;text-align: left;
}
二、width值的作用
关于盒模型的四层这里简单复述一下,从内到外分别是 content-box, padding-box, border-box和透明的 margin-box。默认情况下,width是作用在 content-box 的,当我们在布局的时候添加 padding 和 border 的时候,导致元素宽高变大。
如我们从设计稿上获取一个width:200px,padding:10px,border:10px的元素,最终我们需要通过width - paddingLeft - paddingRight - boderLelft - borderRight去计算content-width。
这样未免太过麻烦。因此CSS提供了border-box模型方便我们进行开发。事实上box-sizing:border-box改变的就是width的作用对象。原来width只作用于content-box,用了border-box后,width = padding + border + content 。
三、无效的height: 100%
height 和 width 一个比较明显的区别,就是对百分比单位的支持。对于width属性,就算其父元素是width:auto,其百分比值也是可以支持的。但是对于height的百分比属性,如果其父元素是height为auto,那么只要子元素在文档流中(如float,绝对定位都可以使元素脱离文档流),其百分比值就完全没用了。
<div class="height-box"><div class="height-item"></div>
</div>
.height-box {background-color: #6096cc;
}
.height-item {height: 40%;background-color: #98e9f1;
}
为什么会这样呢?规范中给出了答案。原文这样描述:如果包含块的高度没有显示指定,并且该元素不是绝对定位,则计算值为auto。也就是子元素的100% * auto=NaN,所以计算结果无效。因此非绝对定位元素要使用height:100%,要不断的给父级,父级的父级添加height:具体值,才会生效。
那么宽度为什么可以支持呢?因为包含块的宽度取决于该元素的宽度,其行为是“未定义”的,也就是不同的浏览器可以有不同的特性,好在大家都想到一块去了,最终的布局效果在各个浏览器下都是一致的。就是按照包含块真实的计算值作为百分比计算的基数。
四、有效的height: 100%
想要 height: 100% 有效, 从上面的规范的答案已经给出,即以下两种方法:
设置固定高度,例如设置 height: 100px, 或者百分比, height: 100%.
使用绝对定位。即使祖先元素 height: auto, 也有计算值。需要注意的是,绝对定位的宽高百分比计算是相对于 padding-box ,而非绝对定位元素则是相对于 content-box计算。
auto与子元素有关,100%与父元素有关,无特殊情况,最好不要使用固定值,不利于响应式开发。
css - width / height相关推荐
- [css] css的height:100%和height:inherit之间有什么区别呢?
[css] css的height:100%和height:inherit之间有什么区别呢? 上周在微博上无节操吐槽了下inherit的段子,没想到回声还不少: 微博inherit无节操段子 不过inh ...
- html如何设定盒子的高,css 高度height设置
css height[css 高度]教程 height翻译成中文也是高.高度意思.在CSS样式中高度样式设置也是height来布局.几乎每个网页布局都会用到css高度height样式,特别是布局局部时 ...
- CSS中height:100vh和height:100%的区别是什么?
CSS中height:100vh和height:100%的区别 首先,我们得知道1vh它表示的是当前屏幕可见高度的1/100,而1%它表示的是父元素长或者宽的1%(可以这么理解?) 1.对于设置hei ...
- html vh和百分比,css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位...
css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位 height:100vh 一些只能vw, vh才能完成的应用场景: 1. 场景之:元素的尺寸限制 vw vh 主要是 ...
- jQuery.width()和jQuery.css('width')的区别
目录 问题描述 调试 总结和补充 问题描述 使用jQuery修改一个div的宽度时,发现$($0).width('10rem')总是修改成不正确的值,然后使用$($0).css('width', '1 ...
- pygame中Rect(left, top, width, height)的参数详解
今天终于把一个问题弄明白了,那就是pygame.Rect(left, top, width, height)中参数的问题.当遇到问题后,我上网上找了大量的资料,但是并没有详细的答案,于是开始思考最终得 ...
- html设置模块宽度为200像素,css 宽度(CSS width)
DIV CSS宽度width样式属性 CSS 宽度是指通过CSS 样式设置对应div宽度,以下我们了解传统html宽度.宽度自适应百分比.固定宽度等宽度知识. 传统Html 宽度属性单词:width ...
- [css] body{height:100%}和html,body{height:100%}有什么区别?为什么html要设置height:100%呢,html不就是整个窗口吗?
[css] body{height:100%}和html,body{height:100%}有什么区别?为什么html要设置height:100%呢,html不就是整个窗口吗? html是body的父 ...
- [css] width属性的min-content和max-content有什么作用
[css] width属性的min-content和max-content有什么作用 max-content 在一个父元素上设置该元素后,元素的宽度会以子元素内最长的一个为准,子元素表现得会好像设置了 ...
最新文章
- 惊艳!为艺术而生的算法
- ACE线程管理机制-并发控制(4)
- c语言 sizeof length,size()、length ()和sizeof()的区别
- Linux 虚拟化网络技术 — 虚拟网络协议栈
- Centos7设置Tomat开机自启
- Flutter Curves 动画曲线合辑
- 【codeforces 718 CD】C. Sasha and ArrayD. Andrew and Chemistry
- CentOS 6.5设置静态IP教程 并且可以ping通
- 涵盖农业、可再生能源、酒店、金融服务、创意服务、科技、林业和建筑业的20家新公司加入《气候宣言》
- Letex排版学习笔记
- SpringBoot单元测试保姆级教程,文末介绍Postman的基本使用
- 【7gyy】物尽其用win 7收藏夹功能
- 【新知实验室】腾讯云TRTC服务体验
- Array方法、String方法
- Android 开发即时聊天工具 YQ :(五) 发送消息
- 戴尔服务器改win7系统,戴尔电脑怎么把Win10系统改装win7系统?
- 金港赢配资简述今天PVC大爆发
- 【算法】-- LintCode经典算法题理解动态规划
- 【预告】千亿数据的潘多拉魔盒:从分库分表到分布式数据库
- 离岸外包二:离岸外包因素及软件度量 Metrics(IT咨询公司第三方)