1 <!DOCTYPE html>

  2 <html lang="en">

  3 <head>

  4     <meta charset="UTF-8">

  5     <title></title>

  6     <style>

  7     .outer{

  8         width:800px;

  9         height:200px;

 10         border:10px red solid;

 11

 12     }

 13     .inner{

 14         width:200px;

 15         height:180px;

 16         background:orange;

 17         margin-left:auto;

 18         margin-right:auto;

 19         border:10px yellow solid;

 20     }

 21     /*

 22     元素的水平方向的布局：

 23         -元素在其父元素中的水平方向的位置由以下几个属性共同决定：

 24             -margin-left

 25             -border-left

 26             -padding-left

 27             -width

 28             -padding-right

 29             -border-right

 30             -margin-right

 31         一个元素在其父元素中，水平布局必须满足以下等式

 32             margin-left+border-left+padding-left+width+padding-righ    t+border-right+margin-right = 其父元素的内容区的宽度

 33         0 + 0 + 0 + 200 + 0 + 0 + 0 = 800

 34         以上等式必须满足，如果相加结果使等式不成立，则称为过度约束>    ，则等式会自动调整

 35         -调整的情况：

 36             -如果这七个值中没有auto的情况，则浏览器会自动调节margin    -right值以使等式成立

 37         这七个值中有三个值可设置为auto:

 38             -width

 39             -margin-left

 40             -maring-right

 41             -如果某个值为auto，则会自动调整auto那个值以使等式成立

 42             -如果将一个宽度和一个外边距设置为auto，则宽度会调整到最

    大

 43             -如果将三个值都设置为auto，则外边距都是0，宽度最大(撑满

    整个父元素)

 44             -如果将两个外边距设置为auto宽度固定值，则子元素在父元素

    中水平居中

 45

 46

 47

 48      */

 49

 50

 51     </style>

 52 </head>

 53 <body>

 54     <div class="outer">

55         <div class="inner"></div>

 56     </div>

 57 </body>

 58 </html>

CSS水平布局的更多相关文章

  1. Html/css 水平布局居中

    如何设置水平居中显示? 一般的方法是设置宽高,然后以margin去控制,比如:DIV居中的经典方法 本章介绍需要宽度自适应时如何水平居中,以及居中失效的几个点 水平自适应居中 比如设置一个列表水平居中 ...

  2. 奇妙的CSS之布局与定位

    前言 关于布局与定位是Web前端开发里非常基础而又重要的部分.介绍相关知识的文章,很容易就可以找到.虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有 ...

  3. CSS网页布局全精通

    在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...

  4. FineUI第十四天---布局之垂直布局和水平布局

    布局值水平布局和垂直布局 垂直盒子布局和水平盒子布局非常灵活易用,在很大程度上能够取代锚点布局,行布局和列布局. 1.垂直盒子布局: BoxConfigAlign:控制子容器的的尺寸 Start:位于 ...

  5. 《CSS网站布局实录》学习笔记（三）

    第三章 CSS网页布局与定位 3.1 div 几乎XHTML中的任何标签都可以用于浮动与定位,而div首当其冲.对于其他标签而言,往往有它自身存在的目的,而div元素存在的目的就是为了浮动与定位. 3 ...

  6. 《CSS网站布局实录》读书笔记

    从Web标准.HTML标记.CSS语法基础介绍到实用技巧,事无巨细.实体书已不印刷,只能下载电子版 书的背景: 国内第一本web标准的CSS布局书,2006年9月第一版,作者李超. 环境背景: 当时主 ...

  7. CSS基础布局--居中对齐，左侧定宽右侧自适应

    CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容.本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一 ...

  8. css浮动布局

    上次我们一起对盒子模型进行了一定的了解,今天我们就对css浮动布局做一下研究.首先我们来了解一下网页基本布局的三种形式. 首先我们来了解一下什么是网页布局: 网页的布局方式其实就是指浏览器是如何对网页 ...

  9. 简单实用的CSS网页布局中文排版技巧

    由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...

随机推荐

  1. codeforces 10C Digital Root（非原创）

    Not long ago Billy came across such a problem, where there were given three natural numbers A, B and ...

  2. IOS键盘收起后，页面底部留白处理

    环境:vue+vant 的H5页面 场景:输入框输入信息时,如登录.注册等表单信息 问题:键盘收回后页面底部留白,导致dialog组件按钮位移,视觉上,其中的按钮无法正常工作 解决方案:监听失去焦点时 ...

  3. IIS6.0(CVE-2017-7269) 缓冲器溢出

    漏洞描述开启WebDAV服务对IIS 6.0存在缓冲区溢出漏洞都可以导致远程代码执行,所以对于目前的IIS 6.0用户而言,可用的变通方案就是关闭WebDAV服务. 漏洞编号CVE-2017-7269 ...

  4. css effect all in one

    css effect all in one CSS 特效汇总 / 前端特效汇总 图片滑动对比 https://www.fika.io/ https://chrome.google.com/websto ...

  5. text to JSON

    text to JSON GeoLocaltion API https://www.cnblogs.com/xgqfrms/p/13283680.html https://repl.it/@xgqfr ...

  6. NGK公链：通用型存储网络

    NGK公链,是一条发展中的通用型存储网络. NGK的运用归结与存储场景.NGK通证的运用归结于支付场景.个人数据被中心化服务商买卖.被大数据服务商使用.被无数的商务及销售人员窃取.那么NGK的运用场景 ...

  7. 不能回滚的Redis事务还能用吗

    前言 事务是关系型数据库的特征之一,那么作为 Nosql 的代表 Redis 中有事务吗?如果有,那么 Redis 当中的事务又是否具备关系型数据库的 ACID 四大特性呢? Redis 有事务吗 这 ...

  8. RocketMQ同一个消费者唯一Topic多个tag踩坑经历

    最近做的项目的一个版本需求中,需要用到MQ,对数据记录进行异步落库,这样可以减轻数据库的压力,同时可以抗住大量的数据落库.这里需要说明一下本人用到的MQ是公司自己在阿里的RokectMQ的基础上进行封 ...

  9. java对象克隆复制

    原文链接:https://blog.csdn.net/ztchun/article/details/79110096 自己先简单描述总结一下:当想要将一个对象中已有的值直接给另外一个对象的时候,其实并 ...

  10. Vue学习笔记-vue-element-admin 前端学习

    一  使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7  (Windows x86- ...