前端知识库(lizh)
  • README
  • Bugs
    • 前端调试随笔
    • 浏览器常见问题概览
    • 浏览器兼容问题概览
    • HTML常见问题概览
    • CSS常见问题概览
    • JS常见问题概览
    • 移动端兼容性问题概览
    • 微信小程序开发
    • NodeJs常见问题概览
    • Mac常见问题概览
    • 微信开发遇坑指南
    • Npm包常见问题概览
    • 其他问题汇总
  • Css探索系列
    • CSS基础知识
    • CSS常见问答
    • CSS常见问答02
    • CSS应用示例
    • CSS应用示例02
    • 由Z Index引发的层叠上下文思考
    • 由浮动塌陷引发的块级格式上下文思考
    • CSS探索系列 Flex布局
    • CSS探索系列 Margin
    • CSS探索系列 Auto关键字
    • CSS探索系列 Gradient
    • CSS探索系列 Line Height
    • CSS探索系列 元素居中
    • CSS探索系列 动画
    • 为什么使用PostCSS处理CSS?
    • 重新认识伪类与伪元素
    • 自定义表单伪元素样式
    • 如何理解Css中的Display属性
    • 视口和软键盘对视口的影响
    • 关于Css
  • Frontend
    • 00 关于Web前端
    • 01 前端知识概览
    • 02 常用前端库概览
    • 基础 00 前端常见问题01
    • 基础 01 浏览器缓存
    • 基础 02 浏览器工作原理
    • 基础 03 谈谈前端跨源问题及解决方法
    • 进阶 01 Web性能优化
    • 进阶 02 搜索引擎优化(SEO)
    • 进阶 03 前端模块化编程
    • 进阶 04 规范代码:Linter、Prettier、EditorConfig
    • 进阶 11 前端自动化测试
    • 高级 01 前端安全
    • Vue2.X原理篇
    • Vue3初步了解及迁移指南
    • 重读Vue教程
    • React17.X原理篇
    • 你必须知道的React问题
    • 重读React教程
    • 聊一聊Cookie的一些问题
    • 如何理解HTTP响应的状态码
    • HTTP的历史演变及概述
    • Webpack4.X原理篇
    • Webpack基础入门篇
    • Webpack构建优化篇
    • TypeScript使用指南
    • 代码规范
      • 前端规范
      • HTML
      • CSS
      • JS
  • Html探索系列
    • HTML基础知识
    • HTML基础知识02
    • HTML常见问答
    • HTML经典实践用例
    • HTML元素的宽高及位置详解
    • Video元素的使用和常见问题总结
    • Html探索系列 Meta标签
    • DOCTYPE:文档类型与浏览器模式
    • DHTML(动态网页)简介
    • HTML标签详解
    • HTML布局的几种方式
    • HTML全局属性
    • 关于Html
  • Js探索系列
    • 基础知识
    • 常见问答
    • 应用示例
    • 趣味示例
    • 基础篇 05 AJAX
    • 基础篇 06 Window对象
    • 基础篇 07 Error、JSON、Math、Console对象
    • 基础篇 08 History、URL、Screen、Navigator、Location对象
    • 基础篇 09 文档对象模型(DOM)
    • 基础篇 10 Document对象
    • 基础篇 11 Element对象
    • 基础篇 12 Event对象
    • 基础篇 13 键盘、鼠标、触摸事件
    • 基础篇 15 CSS对象模型(CSSOM)
    • 进阶篇 01 Prototype对象和继承
    • 进阶篇 02 Promise对象
    • 进阶篇 07 迭代器(Iterator)
    • 进阶篇 08 Generator和Async函数
    • 进阶篇 09 JavaScript异步编程
    • Date对象和日期时间字符串格式
    • Canvas基础入门篇
    • Canvas进阶篇
    • SVG基础入门篇
    • 四种判断数据类型方法的优缺点
    • 深入理解JavaScript的浅拷贝和深拷贝
    • 谈谈JavaScript的作用域和上下文
    • 复制内容到剪贴板
    • 关于Javascript
  • NodeJs
    • 关于Node.Js
    • Node.Js:三种调试方法
    • Npm包管理器简介及一些机制
    • NPM:Package.Json详解(中文)
    • NPM:从零开始,开发一个软件包
    • NPM:常用命令
    • Node.Js:Fs(文件系统)
    • Node.Js:Global(全局变量)
    • Node.Js:HTTP
    • Node.Js:Module(模块)
    • Node.Js:Path(路径)
    • Node.Js:Readline(逐行读取)
  • Research
    • 极细边框(1px边框)实现方式
    • 如何监控前端异常?
    • H5页面跳转和刷新
    • Web主题切换和个性化定制方法总结
    • Vue SSR(服务端渲染)的简单实现
    • 基于Create React App打造代码规范化的React+Ts项目
    • H5可视化编辑
    • Web常用功能
    • Javascript加密混淆
    • Vue如何导入TypeScript
    • 移动端PDF预览
    • 纯CSS绘制箭头
    • 网站性能测量和优化方法
  • Tech
    • GOOGLE浏览器的搜索技巧
    • Curl的用法指南
    • Sublime3插件篇
    • Charles安装及使用
    • Nginx基础使用
    • 排序算法(Javascript)
    • 代码整洁之道(摘录笔记)
    • Java的24种设计模式与7大原则
    • 观察者和发布订阅模式
  • Tools
    • Git
      • Git基础教程
      • Git常见问题
    • Gitbook
      • Gitbook入门篇
      • Gitbook插件篇
      • Gitbook进阶篇
由 GitBook 提供支持
在本页

这有帮助吗?

  1. Css探索系列

CSS探索系列 Auto关键字

CSS探索系列之auto关键字

在 CSS 中,大概有 400 多个属性(不包括带浏览器前缀的属性),其中很多属性的值可以是 auto 关键字。比如常见的,width、height、margin、padding、top 等等。

getComputedStyle(document.querySelector('div'))

虽然他们的值都可以取值 auto,但是差别却很大。

auto 关键字使用因属性而异,也就是说,在不同属性中,它解释是不一样的。

Width: Auto

当对一个文档进行布局的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型,将所有元素表示为一个个矩形的盒子。每个盒子由四个部分(或称区域)组成,其效用由它们各自的边界所定义:内容区域、内边距区域(padding)、边框区域(border)、外边距区域(margin)。

块级元素的 width 属性的初始值就是 auto,意味着它们将占据其父元素的所有水平空间。也就是说,即使设置了 margin、padding、border 属性,也不会超出其父元素的水平空间,元素宽度 = 父元素水平空间 = 内容区域宽度 + 水平方向内边距 + 水平方向边框 + 水平方向外边距。

注意一点: 如果元素的 width 的值改成 100%,则结果就是,元素宽度 = 内容区域宽度(父元素水平空间) + 水平方向内边距 + 水平方向边框 + 水平方向外边距,也就是说会超出父元素的水平空间。

Height: Auto

height 属性 和 width 的情况完全不同。一个元素的高度等于它实际内容占用的高度,默认值就是 auto。

Margin: Auto

对于 margin,最常见的是将已知宽度的元素水平居中:margin 水平方向的属性值,若一侧定值,一侧值为 auto,则 auto为剩余空间大小;如果两侧均是 auto,则平分剩余空间。

auto 可用于实现块级元素的水平居中,但不能用于实现垂直居中?

auto 是自动填充剩余空间。块级元素的宽度是占据父元素的水平空间,设置 auto 会平分剩下的水平空间;但高度是随内容自动扩充的,垂直方向没有剩余的空间,所以 auto 不能实现垂直居中。

auto 在顶部和底部的外边距总是计算为 0px(绝对定位元素除外)。

W3C 规范:如果 margin-top 或 margin-bottom 为 auto,则其使用值为 0。

注意: 内联元素不可以使用 margin:0 auto,使用了也没有效果。

备注: 还有一种使用场景,利用 margin: auto 把一个绝对定位的元素居中,前提条件:元素是绝对定位元素,且有固定的宽度和高度。

Flex: Auto

在 flex 布局中,如果给一个子元素设置了 flex: auto, 就相当于设置了 flex: 1 1 auto。

根据 MDN的规范, 设置了 flex:auto 的元素将根据其宽度和高度来调整大小,但它可以根据可用的额外空间来增大或缩小。

备注: 在 flex 布局的父元素内,给子元素的 margin 设置为 auto 会让这个子元素被 "推到" 对应的另一边。特别的,如果容器内只有一个子元素,可以用 margin: auto 实现水平垂直居中。

Grid: Auto

在 Grid 布局中,可以给某一列设置为 auto之后,这一列的宽度将取决于包含在其中的内容的长度。

备注: 在 Grid 布局中,给元素设置 margin:auto 可以达到和 Flex 布局相似的效果,即,给其中一个 Grid 布局的元素设置了 margin-left: auto, 那么它将被 “推到” 右侧,同时它的宽度将取决于内容的宽度,而不是 Grid 的宽度了。

Overflow: Auto

overflow 是 CSS 的简写属性,用于设置元素溢出时所需的行为——即当元素的内容太大而无法适应它的块级格式化上下文时。

可接收值:

  • visible:不裁减内容,允许内容渲染到边距盒(padding)的外部。

  • hidden:裁减内容以适应边距(padding)盒。

  • clip:类似于 hidden,裁减内容以适应边距(padding)盒。clip 和 hidden 之间的区别是:clip 关键字禁止所有滚动,包括以 Javascript 方式的滚动。该盒子不是一个滚动的容器,并且不会启动新的格式化上下文。如果希望开启一个新的格式化上下文,可以使用 display: flow-root。

  • scroll:无论是否实际裁剪了任何内容,浏览器总是显示滚动条,以防止滚动条在内容改变时出现或者消失。打印机可能会打印溢出的内容。

  • auto: 取决于用户代理。如果内容未溢出边距(padding)盒,它看起来与 visible 相同,但是仍然建立了一个新的块级格式化上下文;如果内容溢出,则浏览器提供滚动条。

top/right/bottom/left: Auto

CSS 定位属性 top、right、bottom、left 定义了定位元素的外边距边界与其包含块内边距边界之间的偏移,非定位元素设置此属性无效。

它们都可以使用 auto 关键字。

以 left 属性为例,其效果取决于元素的 position 属性:

  • position: absolute | fixed: 指定了定位元素左外边距边界与其包含块左边界之间的偏移。

  • position: relative:指定了元素的左边界离开其正常位置的偏移。

  • position: sticky:如果元素在 viewport 里面,效果和 position:relative 等同;如果元素在 viewport 外面,效果和 position:fixed 等同。

  • position: static:无效。

当 left 和 right 同时指定时,元素的位置会被重复指定。当容器是从左到右时,left 的值会被优先设定;当容器是从右到左时,right 的值会被优先设定。

对于 auto 关键字而言:

  • 对于绝对定位元素,元素将忽略此属性而以 right 属性为准,如果此时设置 width: auto,将基于内容需要的宽度设置宽度;如果 right 也为 auto 的话,元素的水平位置就是它作为静态(static)元素时该在的位置。

  • 对于相对定位元素,元素相对正常位置的偏移量将基于 right 属性;如果 right 也为 auto 的话,元素将不会有偏移。

注意: auto 将使得元素定位时遵循父元素的 padding 属性,而不是遵循父元素的边界。

其他三个属性与 top 属性类似。

参考资料

上一页CSS探索系列 Margin下一页CSS探索系列 Gradient

最后更新于1年前

这有帮助吗?

【CSS】【译】一文了解 CSS 中关于 auto 的一切
Everything About Auto in CSS