CSS中auto是什么意思?小白知识_自适应小白知识

auto 你可以理解为一种 自动/自适应 的概念,比如现在项目需要一个宽度为960px的整体布局居中,你可使用margin:0 auto;来实现。 无论用户浏览器宽度为多少。css中的auto是自动适应的意思,而在css中auto往往都是默认值。正如margin:0 auto,意思就是上下边距为0,左右边距为auto,就是自动适应。但是,如果要使用他的话,就

CSS中auto是什么意思?小白知识

auto 你可以理解为一种 自动/自适应 的概念,比如现在项目需要一个宽度为960px的整体布局居中,你可使用margin:0 auto;来实现。 无论用户浏览器宽度为多少。

CSS中auto是什么意思?小白知识_自适应小白知识

css中的auto是自动适应的意思,而在css中auto往往都是默认值。

正如margin:0 auto,意思就是上下边距为0,左右边距为auto,就是自动适应。

但是,如果要使用他的话,就必须给标签配上指定的宽度,如下:

<style type="text/css">
.center{
    width:200px;
    height:200px;
    margin:0 auto;
}
</style>
<div >居中</div>

另外,margin:0 auto 和 margin: 0 auto 0 auto 的效果是相同的。

都是指的上下边距为0,左右边距自动适应宽度相等。

海计划公众号
(0)
上一篇 2020/03/20 22:20
下一篇 2020/03/20 22:21

您可能感兴趣的内容

  • javascript中的匿名方法(函数)是什么?小白知识_函数基础入门

    方法(method)是通过对象调用的javascript函数。也就是说,方法也是函数,只是比较特殊的函数。JavaScript中的匿名方法即匿名函数是没有函数名称的函数。JavaScript中匿名函数的使用:一、在Javascript定义一个函数一般有如下三种方式:函数关键字(function)语句:function fnMethodName(x){aler

    2020/03/20
  • 好用的Js图表库有哪些?攻略教程_图表入门基础知识

    大数据时代,收集和使用数据的需求正在爆发式增长,数据可视化也变得愈加重要。开发人员在想方设法将不同数据库中的记录整合到仪表板和漂亮的图表中,向人们快速直观地展示信息。在过去十年中数据可视化技术不断改进,结果涌现了很多高水平的图表库。21 世纪初期,人们使用服务端图像位图来生成图表。那时像 Silverlight 和 Flash 这样的插件提供了丰富的交互式图

    2020/03/26
  • 快应用之保存图片小白知识_快应用基础教程

    快应用中的保存图片,有坑,踩着就中了,这里也要区分华为和其他厂商,虽然用调试器,在华为和官方提供的都不会出现问题,但是,在应用上线后就出现华为手机无法保存不同点华为手机在下载图片时要显示的定义filename字段先将图片下载为临时文件,然后在图片下载完成后,进行保存到本地使用request.download进行下载,在这个api中加入filename字段,我

    2020/03/26
  • echarts是什么基础指南echart.js学习和使用_echarts入门教程

    什么是Echarts?简单来说呢它就是一个商业级数据图表,一个纯JavaScript的图标库。可以兼容绝大部分的浏览器,可以为前端开发提供一个直观、生动、可交互、可高度个性化定制的数据可视化图表。Echarts能实现哪些功能? 1.强大的Echarts提供创新的拖拽重计算2.数据视图、值域漫游等功能特性3.大大增强了用户体验4.并且赋予了用户对数据进行挖掘

    2020/04/03
  • Laravel 如何优雅地实现输出结构统一的功能?小白帮助_Laravel入门基础知识

    背景一般的项目需求都会要求统一的输出结构,特别是对于api应用而言。因此,如果有beforeResponse的功能,则可以在数据输出之前对response进行统一格式化处理。假设这么一种场景,应用做api开发,使用抛异常的方式(自定义异常类ApiException)返回无效非法请求的情况。正常请求则返回合法数据(数组或可序列化的模型),希望返回的数据格式正常

    2020/03/26
  • 站长素材小白入门_一家大型综合设计类素材网站

    站长素材小白入门 官方网址:http://sc.chinaz.com/ 简介描述:一家大型综合设计类素材网站 站长素材是一家大型综合设计类素材网站,提供高清图片素材、PSD素材、P…

    2020/03/06
  • Jest指南攻略Facebook开发的一个对javascript进行单元测试的工具

    Jest基础入门 官方网址:https://facebook.github.io/jest/ GitHub:https://github.com/facebook/jest 简介描…

    2020/03/05
  • VLC菜鸟教程_视频监控直播的插件

    VLC菜鸟教程 官方网址:https://www.videolan.org/ 简介描述:视频监控直播的插件 VLC 是一款自由、开源的跨平台多媒体播放器及框架,可播放大多数多媒体文…

    2020/03/12
  • 新框架(新工具,语言)从入门到精通的正确姿势小白常识_框架使用帮助

    一、了解概念,把握思路尽可能,使用视频教程入门形象生动,思路清晰,面面俱到,概念性的东西一针见血,所以首选。如果没有,使用官方文档 Quick Start(若是英文文档 Google翻译)权威度高,快速上手,但是很多概念需要自己咬文嚼字慢慢理解。实在不行,就搜索相关博客教程(建议使用Google搜索) 不具权威性,掺杂私人见解,不过概念和思路相对自己看文档较

    2020/04/05
  • 区块链的六大层级结构菜鸟教程网_区块链菜鸟教程网

    众所周知, 区块链 是 比特币 的底层技术,那么这个底层技术又是怎么分层级结构的呢?在前面我们介绍了区块链的四大核心技术是其独特的数据结构、分布式存储、密码学和共识机制。今天我们就来聊聊区块链结构的六个层级结构,看看它们各自有何作用?之间又有何关联?1. 区块链技术的必要元素数据层、网络层、共识层数据层(Data Layer)相当于区块链四大核心技术中的数据

    2020/03/23
  • CSS高度坍塌和外边距溢出问题及解决方法使用帮助_元素小白教程

    高度坍塌成因父元素 div 未设置高度子元素全部设置浮动(float: left | right;),浮动元素 脱离文档流 且 不占页面空间由于父元素为设置高度,高度靠内部子元素撑开,而今子元素全部脱离文档流,所以此时父元素的高度为 0,给父元素和子元素设置 边框(border: 1px solid #000;)或者 显示父元素轮廓(outline: 1px

    2020/03/26
  • wxapp-img-loader菜鸟指南_适用于微信小程序的图片预加载组件

    wxapp-img-loader菜鸟指南 GitHub:https://github.com/o2team/wxapp-img-loader 简介描述:适用于微信小程序的图片预加载…

    2020/03/11
  • rrule.js使用帮助_用来处理递归规则日历日期的JavaScript库

    rrule.js使用帮助 官方网址:https://jakubroztocil.github.io/rrule GitHub:https://github.com/jakubroz…

    2020/03/11
  • progressbar.js基础知识教程_漂亮,实用的响应式 SVG 进度条插件

    progressbar.js基础知识教程 官方网址:https://kimmobrunfeldt.github.io/progressbar.js/ GitHub:https://…

    2020/03/06
  • 打一个通用UMD包入门攻略_umd入门基础

    有这样一个场景,客户端运行很久,但是法务部和数据部需要收集用户的一些信息,这些信息收集好之后需要进行相应的数据处理,之后上报到服务端。客户端提供一个纯粹的 JS 执行引擎,不需要 WebView 容器。iOS 端有成熟的 JavaScriptCore、Android 可以使用 V8 引擎。这样一个引擎配套有一个 SDK,访问 Native 的基础能力和数据运

    2020/03/20
  • 在 Go 中编写令人愉快的 HTTP 中间件基础入门_go新手入门

    在使用 Go 编写复杂的服务时,您将遇到一个典型的主题是中间件。这个话题在网上被讨论了一次又一次。本质上,中间件允许我们做了如下事情:ServeHTTP
    这些与 express.js 中间件所做的工作非常类似。我们探索了各种库,找到了接近我们想要的现有解决方案,但是他们要么有不要的额外内容,要么不符合我们的品位。显然,我们可以在 express.js 中间件

    2020/03/22