css中auto啥意思,CSS中各种auto值的作用总结
width: auto
auto是width的默认值,不需专门设,它保证自身恰好充满父容器的content宽度,无论自身是否有margin/padding/border。很好用。
与width: 100%的区别是:
width: 100%表示自身的content宽度等于父元素的content的宽度。如果自身没有margin/padding/border,那么自身恰好充满父元素的content,如果有,则一定会溢出父元素的content。
也因此,在布局中,如果两个并排元素各占50%宽度,且有padding/border,那么必须给两个元素设置box-sizing: border-box;。
height: auto
auto是height的默认值,不需专门设。height:auto是由元素的内容撑起的高度来决定元素的高度,这跟width: auto不一样。这么设计也是有其原因的,因为盒模型要求宽度自动充满,高度尽量扁。
height:100%跟width: 100%类似,也是父元素content高度确定自身的高度。其他原理大致也同width: 100%。
margin: auto
设置margin: auto的元素,只要它的display没有inline-前缀,那么它在父元素中一定是左右居中的。
如果元素设定了:
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
且元素父元素设定了:
position:relative;
那么它在父元素中是上下左右全居中的。
在Flex中:
如果给子元素中的随便一个设上margin-left: auto,那么它会把自身和它右侧的元素往右推,让margin空间尽量大,在某些布局设计中有实用价值。设margin-right: auto同理。
设margin-top: auto的话,表现也类似,会让元素沉底,为margin-top留出尽量大的空间。设margin-bottom: auto同理。
当只有一个子元素且设margin:auto,则它水平垂直居中。不常用,因为实用align-items: center; justify-content: center;语义更明确。
在Grid中:
给任意单元格设置margin-left: auto或margin-right: auto,会把内容挤到一边,让margin尽量大。设margin-top: auto或margin-bottom: auto没有反应。
flex: auto
flex: auto等价于:
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
flex: 1等价于:
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
flex: auto跟flex: 1的区别:
flex: auto会考察元素的内容宽高,根据内容宽高分配真正的宽高。
flex: 1不考察元素的内容宽高,只根据flex-grow: 1;flex-shrink: 1分配真正的宽高。
验证:
现在父元素是display: flex;width: 400px; height: 300px;,3个子元素只设flex: auto;,每个子元素又有个子元素,其中第二个宽度与第一、三个的宽度不一致:
得到子元素宽度:126.67px、146.67px、126.67px。可见,宽度参考了内容的宽度。计算过程从略,不在本文讨论。
接着,将flex: auto改成flex: 1,得到子元素宽度:133.33px、133.33px、133.33px。可见,宽度没有参考内容宽度。
grid-template-columns: auto auto ...
全是auto的话,如果某单元格的内容不撑爆容器,则自动平均分配列宽且充满父元素,如果内容撑爆了容器,则其他单元格尽量收紧,保证撑爆的这个能正常显示。
如果是grid-template-columns: auto 2fr auto 1fr,也就是说出现了auto以外的值,那么auto的单元格会缩到仅能容纳内容的宽度,剩下的空间由1fr之类的再行分配。
overflow: auto
比overflow: scroll;更好的选择,因为auto是自动的,scroll无脑出现滚动条,即使不需要滚动条。
left: auto(以及right: auto等)
这个知识不是每个人都在意过,就是left的默认值并不是0,而是auto。
而且,auto的计算原则比较独特,下方代码,子元素的left值为20px,跟父元素padding保持一致。
当你打算“重置”left,又不知道该写几,那么可以试试auto。
另外,left: 50%是根据父元素padding+border+content的宽度当做100%来计算的。
css中auto啥意思,CSS中各种auto值的作用总结相关推荐
- html中auto是设置什么的,css中margin:auto什么意思?margin:auto属性的用法详解
我们都知道使用margin:auto可以让元素水平居中的.但你有没有想过使用margin:auto可以让元素水平居中的原因,要回答这个问题,我们首先需要看一下margin:auto的工作原理.auto ...
- css中auto啥意思,css中auto什么意思?
auto是自适应的意思,auto是很多尺寸值的默认值,也就是由浏览器自动计算.块级元素中margin.border.padding以及content宽度之和构成父元素width.使用auto属性后,父 ...
- html中如何消除左边界,元素的局中对齐问题,CSS盒属性使用技巧,前端开发必备...
本文介绍的盒属性应用包括以下几点: 块级元素在容器中的水平居中 绝对定位的块级元素在页面中水平垂直居中 去掉所有HTML元素的边界和填充值 去掉无序列表左侧为项目符号留出的位置 一.块级元素在容器中的 ...
- 【转】刨根究底CSS(2):CSS中的各种值——初始值,就是默认值吗?
先问个非常简单的问题,这个问题的答案,相信大部分Web开发人员都自认为显而易见,但却又多半会答错:CSS属性中的初始值(initial value),就是默认值(default value)吗? 难道 ...
- css中ul位置移动,css中ul怎么定位
css中ul怎么定位 css中所有的元素默认都是static定位,要改变ul的定位方式,我们只需要指定元素的css position属性即可. 关于定位的几种方式1.static定位(普通流定位) - ...
- css grid随页面大小_CSS中的间距知识总结,前端开发中各种间距的使用及优缺点
本文经作者授权翻译,来源:https://ishadeed.com,作者:Ahmad Shadeed 如果两个或多个元素很接近,那么用户就会认为它们以某种方式属于彼此.当对多个设计元素进行分组时,用户 ...
- php图片居中在div,css如何实现图片在div中垂直居中
本文章主要介绍css如何实现图片在div中垂直居中问题,具有一定参考价值,希望能给大家提供帮助 平时我们在做页面时经常会遇到让我们把一张图片显示在div正中间但是常常不知道如何去做,今天我们来分享几种 ...
- vue组件制作专题 - (mpvue专用)在mpvue中纯自己写css实现简单左右轮播
在mpvue中纯自己写css实现简单左右轮播 CSDN:jcLee95 邮箱:291148484@163.com 项目中,在src目录下的components目录下新建一个新文件并重命名为jcmv-c ...
- css中文字段落对齐,CSS段落对齐方式
CSS段落对齐有两种方式:水平对齐和垂直对齐. 1.水平对齐: (1).text-align:left; //左对齐 (2).text-align:right; //右对齐 ...
最新文章
- Additive属性动画
- android 上下数字滚动_原来PPT数字还有这么高大上的展示方式
- JAVA前三章预习总结
- 2020 年 GitHub 上那些优秀 Android 开源库,这里是 Top10! | 原力计划
- Redis的hotkey和bigkey的一些拆解方式
- 读《C程序设计语言》
- android 虚拟经纬度_Android原生方式获取经纬度
- BPM 与 SOA的演进与展望
- Android电量优化全解析 ,赶快收藏备战金九银十
- R语言编程 R语言作业
- 计算机专业就业方向总结(选择也许更重要)
- selenium中怎么使用autoit
- 养生粥秘方,据说可以补气、泻火和去湿
- 伽码值(灰度系数)相关
- css绘制梯形图形,及显示矩形图片
- 读《Scratch 2.0 少儿游戏趣味编程》
- docker容器化部署
- sed编辑器之修改行
- 微信摇一摇插件ios_iOS-仿微信摇一摇
- 【yarn】 yarn的安装和使用
热门文章
- [CTO札记]Disney也进军数字出版市场了
- Linux文档内容查询命令
- 大数据分析的误区有哪些
- linux 设备驱动阻塞,深入浅出:Linux设备驱动中的阻塞和非阻塞I/O
- 中子穿墙问题的MonteCarlo求解方法
- python与Labview进行数据通信(UDP)
- python deque函数_一个不得不了解的Python库——collections
- 小程序中里的bindinput_云开发实战分享|诗和远方:旅行小账本云开发
- python查看类的属性和方法_python—类的属性和方法总结
- 计算机信息网络功能修改,IP地址自动修改的功能移植