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. meidi

    最近觉得某些公司的选择题也是很基础,非常值得总结回味.今天做了美的的笔试,20道选择题(单选14+6多选).特此记录如下(部分忘了烦请见谅): 1. 是我昨晚刚刚总结的List,Set,Map的区别: ...

  2. scu-4440 rectangle （非原创）

    Rectangle frog has a piece of paper divided into nn rows and mm columns. Today, she would like to dr ...

  3. proto3 协议指引

    一.protocal buffer 是什么? 一种序列化机制. 什么是序列化? 一种转化为可存储和传输对象的过程. 序列化的方式有很多,那么proto有什么特殊的呢? 它的英文介绍里提到了neutra ...

  4. 微信分享 API

    微信分享 API https://market.cmbchina.com/MPage/online/190416201200302/wechatShare.js /* * 注意: * 1. 所有的JS ...

  5. JS Object Deep Copy & 深拷贝 & 浅拷贝

    JS Object Deep Copy & 深拷贝 & 浅拷贝 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Refe ...

  6. Python Lambda & Functional Programming

    Python Lambda & Functional Programming 函数式编程 匿名函数 纯函数 高阶函数 # higher-order functions def apply_tw ...

  7. UI Design & App & Free Icons

    UI Design & App & Free Icons icons8 https://icons8.com https://icons8.com/ouch Ouch可以帮助那些不进行 ...

  8. CSS rulesets

    CSS rulesets https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax#CSS_rulesets https://css-tricks ...

  9. HTML5 & canvas fingerprinting

    HTML5 & canvas fingerprinting demo https://codepen.io/xgqfrms/full/BaoMWMp window.addEventListen ...

  10. HEVC Advance & H.265 专利费

    HEVC Advance & H.265 专利费 https://www.hevcadvance.com/pdfnew/HEVC_Advance_Program_Overview_cn.pdf