1.《css世界》中深藏不露的width:auto;总结

2. width属性的默认值是auto,有四种特性

  1. 充分利用可用空间,典型的就是p, div这些块级元素。默认是填满整个父元素的宽度。
  2. 收缩与包裹,典型的就是浮动,绝对定位,inline-block, table元素
  3. 收缩到最小。
  4. 超出容器限制。

我来一个一个解读这些特性。
1.充分利用可用空间,主要是以div,p这些块级元素为主。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {background-color: red;height: 100px;}</style>
</head>
<body><div></div>
</body>
</html>


这里我们没有设置width,但是他的width的宽度是填满这个父元素的宽度。这就是充分利用有空间。

  1. 收缩与包裹,典型的就是浮动,绝对定位,inline-block, table元素
    收缩,意思就是元素会收缩到最小为止,这时的最小的宽度由元素的内容来决定。
    包裹,意思就是元素的宽度会随着内容的元素的内容的增多而变长。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {background-color: red;height: 100px;position: absolute;}</style>
</head>
<body><!-- <div>5</div> --><div>52222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</div>
</body>
</html>


我们没有指定div的宽度,但是还是有宽度,宽度有内容来决定。

3.超出容器限制

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.fath {background-color: red;width: 200px;}.son {background-color: black;color: blue;}</style>
</head>
<body><!-- <div>5</div> --><div class="fath"><div class="son">52222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</div></div>
</body>
</html>

3.内外部尺寸与流体特性。

1.外部尺寸
简单理解为就是,元素的尺寸由外部元素(父元素)来决定,典型的就是块级元素。
外部尺寸与流体特性–>格式化宽度。

2.格式化宽度

  1. 仅在绝对定位模型中,也就是出现在position的属性值为absolute或fixed的元素中,宽度右内部尺寸决定,是具有包裹性的。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {position: absolute;background-color: red;}</style>
</head>
<body><div>66</div>
</body>
</html>


2. 当left/right或top/bottom 对立方位属性值同时存在的时候,元素的宽度表现为 “格式化宽度”,其宽度大小相对于最近的具有定位特性position属性值不是static的祖先元素计算。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.fath {position: relative;background-color: blue;height: 100px;}.son {position: absolute;left: 100px;height: 100%;right: 100px;background-color: red;}</style>
</head>
<body><div class="fath"><div class="son"></div></div>
</body>
</html>

此时son的宽度为, fath的宽度 - 100px - 100px。

son的宽度 = fath的宽度 - 100px - 100px

效果图

1.内部尺寸

内部尺寸: 假如这个元素里面没有内容,宽度时为0,那这个元素就是"内部尺寸"

特性
2. 包裹性
3. 首选最小宽度
4. 最大宽度

《css世界》中深藏不露的width:auto;总结相关推荐

  1. 字母‘x‘在CSS世界中的角色和故事

    字母'x'在CSS世界中的角色和故事 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordp ...

  2. CSS世界-第四章 盒尺寸四大家族

    盒尺寸的4个盒子:content box,padding box,border box,margin box 一 深入理解 content 1.根据可替换性把元素分为替换元素和非替换元素 <im ...

  3. 《CSS世界》笔记二:盒模型四大家族

    上一篇:<CSS世界>笔记一:流/元素/尺寸 下一篇:<CSS世界>笔记三:内联元素与对齐 写在前面 在读<CSS世界>第四章之前,粗浅的认为盒模型无非是margi ...

  4. 层叠上下文-《CSS 世界》阅读笔记

    层叠规则 目录 层叠规则 目录 z-index 什么是层叠上下文 什么是层叠水平 层叠顺序 层叠准则 层叠上下文的特性 笔者个人理解 层叠上下文的创建 定位元素与传统层叠上下文 层叠上下文与层叠顺序 ...

  5. 《CSS 世界》读书笔记-流与宽高

    大厂技术  坚持周更  精选好文 1. 前言 在学习 CSS 的过程中,我经常会被数不清的属性和特性弄得晕头转向.作为前端新手,经常会坐在显示器前花很多很多时间去 "追" 视觉稿, ...

  6. css中width:100%与width:auto的区别

    在布局中,width:100%和width:auto都会经常用到,那么,二者究竟有何区别呢?下面就来探讨下. 先上代码 <style>* {margin: 0;padding: 0;}.p ...

  7. CSS的width:100%和width:auto区别

    CSS的width:100%和width:auto区别 一.   问题 前段时间在调整树结构的时候,发现如果树的节点名称比较长的话在IE6下则不会撑开外面的元素,导致节点的名称只显示了一半,同时图标和 ...

  8. css属性width默认值width: auto与width: 100%区别

    width: auto 子元素(包括content+padding+border+margin)撑满整个父元素的content区域. 子元素有margin.border.padding时,会减去子元素 ...

  9. 【每日CSS】宽度自适应 width=100%还是width=auto?

    width怎样设置宽度随着窗口大小自适应? 我一般会想到width=100% 但如果使用width=100%,当div设置了左右margin或padding值,盒子将进一步"撑大" ...

  10. 《css世界》的那些实用技巧

    下面所有的内容都来至张鑫旭所著的<css世界>. <css世界>这是一本专门写css的书,书中并没有涉及css3的知识,但是它所展现的东西很多都是我从未知道或以前未重视的.这是 ...

最新文章

  1. 在 Linux“.NET研究” 操作系统中运行 ASP.NET 4 (下)
  2. 隐私计算--联邦学习
  3. NYOJ 309 BOBSLEDDING(dp)
  4. 译 | 你到底有多精通 C# ?
  5. netty 压缩比_使Netty 4中的HTTP内容压缩工作
  6. WordPress 主题教程 #6:侧边栏
  7. IntelliJ IDEA 开发swing(一)
  8. 我对“硬盘分区”的愚见
  9. Hawkeye逃避机制和反调试技术分析
  10. Java短信验证码-互亿无线
  11. 【原创】导读”淘宝褚霸关于 gen_tcp 的分享“
  12. 新东方的负载均衡架构探索和实践
  13. 如果你读不完凯文凯利的《必然》,至少读完这120条书摘
  14. [高通SDM450][Android9.0]CTA认证--去除某些应用开机使用定位权限
  15. 教学中常用的计算机软件及作用,信息技术教学中常用的教学方法有哪些
  16. linux下matlab2014卸载
  17. 奇迹网站系统IGC奇迹mu S17网站可视化装备模板
  18. 将Qt QCheckBox 默认选中样式改为对号选中
  19. 柯美c7000服务器显示00,柯尼卡美能达bizhub PRESS C7000 故障排除.pdf
  20. 计算机专业第五轮学科评估排名,第五轮学科评估排行榜-第二轮双一流淘汰名单预测...

热门文章

  1. c语言实验作业,C语言实验报告experience_c语言实验报告结果分析
  2. 面向对象程序设计第三单元总结(规格系列)
  3. 微信开发者工具之WXS和简单组件
  4. 计算机如何更新苹果系统,苹果电脑怎么更新系统升级
  5. TCP和UDP和端口
  6. TRANSCAD基础技巧——OD矩阵生成
  7. 关于求极限对几个问题的思考和总结
  8. matlab2017a安装出现license checkout failed Error-8
  9. python基础入门(超详细)
  10. 计算机编程培训莱阳,莱阳数控编程培训班