css中auto的用法
—什么是auto?
+auto是自适应的意思,auto是很多尺寸值的默认值,也就是由浏览器自动计算。
+块级元素中margin、border、padding以及content宽度之和构成父元素width。
使用auto属性后,父元素宽度发生变化,该元素的宽度也会随之变化。
下图中 auto 的值就是margin、border、padding以及content宽度之和

+但是当该元素被设为浮动时,该元素的width就变成了内容的宽度了,由内容撑开,也就是所谓的有了包裹性。
overflow | position:absolute | float:left/right都可以产生包裹性,替换元素也同样具有包裹性。
*|position:relavtive|相对定位 占原来的位置,不能实现模式的转化,即不具有包裹性。
所以在具有包裹性的元素上不可以利用width : auto;来让元素宽度自适应浏览器宽。如下图所示

—有时设置margin:0 auto;不起作用?
+maigin: 0 auto; 指元素的上下边距为0,左右边距根据于父元素(body)宽度自适应,即左右水平居中。如果该设置不起作用大致下面两种原因。
+(1)没有为DIV设置宽度,如果DIV么有宽度,就无法参考父元素的宽度来进行自身的auto。
+(2)DIV具有包裹性,即脱离标准流,就好比父对象所在的标准流比喻成地表,那包裹性元素就已经上天了。没有了可供参考的父元素宽度进行auto。
—以上纯属个人见解,欢迎大神补充纠正!!
css中auto的用法的更多相关文章
- 一个CSS中Z-index的用法
一个CSS中Z-index的用法 CSS教程:彻底掌握Z-index属性 大多数的CSS属性都很容易使用.常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现.而另 ...
- CSS学习笔记(9)--详解CSS中:nth-child的用法
详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...
- CSS中的背景用法详解
background 属性是CSS中用于设置元素背景的属性,最简单的background属 性名,是针对背景若干设定的合并简写,最早的CSS只能使用单一背景图片,而在现在却可以设置多个背景图片.而不用 ...
- 详解CSS中:nth-child的用法
前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实例来给大家讲解:nth-child的实际 ...
- CSS中@support的用法
这段时间一直在调试浏览器的兼容性问题,了解到了@support的这个属性,记录下: CSS中的@support主要是用于检测浏览器是否支持CSS的某个属性,其实就是条件判断,如果支持某个属性,你可以写 ...
- CSS中@support的用法 及其calc、media用法
背景: 一次偶然的机会遇到一个朋友在刷css的库其中有这样一道题(css变量如何定义,calc, support, media),我看一眼熟悉而陌生,知其一而不知其二,叔可忍婶不可忍,马上就度娘起来, ...
- CSS中background的用法
CSS中 background 是一个很基本的而且比较常用的样式 background : background-color || background-image || background-re ...
- css 中 important 的用法
css 中 important 的如何使用? important对 一个良好(或者是标准)的浏览器来说,不仅仅是从顺序上提升代码的优先级,还可以用来提升class的优先级(比如firefox), ...
- CSS中Position 的用法详解。
记得一年前,到一家公司面试的时候,问我position有哪几个属性,我憋半天才回答出2个,大家估计都清楚,就是我们经常用到的2个(relative,absolute). 最近又用到了好多,深入研究了下 ...
随机推荐
- 每天一个linux命令(32)--/etc/group文件详解
Linux /etc/group 文件与 /etc/passwd 和/etc/shadow 文件都是有关于系统管理员对用户和用户组管理时相关的文件.Linux /etc/group 文件是有关于系统管 ...
- poj 2236
Wireless Network Time Limit: 10000MS Memory Limit: 65536K Total Submissions: 25817 Accepted: 107 ...
- PHP+Jquery+Ajax 实现动态生成GUID、加载GUID
GUID: 全局唯一标识符(GUID,Globally Unique Identifier)是一种由算法生成的二进制长度为128位的数字标识符.GUID主要用于在拥有多个节点.多台计算机的网络或系统中 ...
- BOM基础(三)
在我之前关于DOM的文章里,其实已经有提到过事件的概念.在讲事件之前,首先要知道的就是javascript是由事件驱动的.什么叫事件驱动呢?打个比方,比如我们在页面中点击一个按钮,才会跳出一个窗口或者 ...
- Modbus软件开发实战指南 之 开发自己的Modbus Poll工具 - 2
接上一篇文章的内容. 看了前面需求提到的复杂的命令行解析功能,很多人立马开始发怵,其实大可不必. 我们都知道,Linux下的程序往往都提供了复杂的命令行参数处理机制,因为这是与 其他程序或用户进行交互 ...
- DAX/PowerBI系列 - 参数表(Parameter Table)
DAX/PowerBI系列 - 参数表(Parameter Table) 难度: ★☆☆☆☆(1星) 适用范围: ★★★★☆(4星) 概况: 这个模式比较简单灵活,而且很实用.所用的DAX语句也比较简 ...
- ThinkPhp框架:验证码功能
Think\Verify类可以支持验证码的生成和验证功能. 为了显示这个验证码功能,第一要有控制器,再就是有方法,然后是显示的页面. 一.最简单的方式生成验证码 (1)我们还是继续在那个控制器编写方法 ...
- WPF: 在 MVVM 设计中实现对 ListViewItem 双击事件的响应
ListView 控件最常用的事件是 SelectionChanged:如果采用 MVVM 模式来设计 WPF 应用,通常,我们可以使用行为(如 InvokeCommandAction)并结合命令来实 ...
- 【转】nginx配置:location配置方法及实例详解
location匹配的是nginx的哪个变量? $request_uri location的匹配种类有哪些? 格式 location [ 空格 | = | ~ | ~* | !~ | !~* ] /u ...
- web注册功能实现
开发工具:Eclipse Web前端语言:html+jsp 后端数据库:MySQL 数据库UI工具:Navicat for MySQL (根据网上各位前辈的信息,自学实现这个注册基本功能,以后要是学到 ...