CSS水平布局
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水平布局的更多相关文章
- Html/css 水平布局居中
如何设置水平居中显示? 一般的方法是设置宽高,然后以margin去控制,比如:DIV居中的经典方法 本章介绍需要宽度自适应时如何水平居中,以及居中失效的几个点 水平自适应居中 比如设置一个列表水平居中 ...
- 奇妙的CSS之布局与定位
前言 关于布局与定位是Web前端开发里非常基础而又重要的部分.介绍相关知识的文章,很容易就可以找到.虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有 ...
- CSS网页布局全精通
在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...
- FineUI第十四天---布局之垂直布局和水平布局
布局值水平布局和垂直布局 垂直盒子布局和水平盒子布局非常灵活易用,在很大程度上能够取代锚点布局,行布局和列布局. 1.垂直盒子布局: BoxConfigAlign:控制子容器的的尺寸 Start:位于 ...
- 《CSS网站布局实录》学习笔记（三）
第三章 CSS网页布局与定位 3.1 div 几乎XHTML中的任何标签都可以用于浮动与定位,而div首当其冲.对于其他标签而言,往往有它自身存在的目的,而div元素存在的目的就是为了浮动与定位. 3 ...
- 《CSS网站布局实录》读书笔记
从Web标准.HTML标记.CSS语法基础介绍到实用技巧,事无巨细.实体书已不印刷,只能下载电子版 书的背景: 国内第一本web标准的CSS布局书,2006年9月第一版,作者李超. 环境背景: 当时主 ...
- CSS基础布局--居中对齐，左侧定宽右侧自适应
CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容.本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一 ...
- css浮动布局
上次我们一起对盒子模型进行了一定的了解,今天我们就对css浮动布局做一下研究.首先我们来了解一下网页基本布局的三种形式. 首先我们来了解一下什么是网页布局: 网页的布局方式其实就是指浏览器是如何对网页 ...
- 简单实用的CSS网页布局中文排版技巧
由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...
随机推荐
- h5py/__init__.py:36: FutureWarning: Conversion of the second argument of issubdtype from `float` to `np.floating` is deprecated
Reference 问题 ... h5py/__init__.py:36: FutureWarning: Conversion of the second argument of issubdtype ...
- DuckDuckGo Privacy Browser
DuckDuckGo Privacy Browser https://apps.apple.com/app/duckduckgo-privacy-browser/id663592361 https:/ ...
- React Hooks vs React Class vs React Function All In One
React Hooks vs React Class vs React Function All In One React Component Types React Hooks Component ...
- 封装 React Native 原生组件(iOS / Android)
封装 React Native 原生组件(iOS / Android) 在 React Native中,有很多种丰富的组件了,例如 ScrollView.FlatList.SectionList.Bu ...
- 漫画 | C语言哭了，过年回家，只有我还没对象
C语言回家过年,遇到不少小伙伴. 大家都在外地打拼,一年难得见面,聚到一起吃饭,都非常高兴. 听Java提到TIOBE, 正在喝酒的C语言激动起来. 自己常年在那里排名第二,人类用自己写的程序可真不少 ...
- 数据库范式（1NF/2NF/3NF）
本文转载自数据库范式(1NF/2NF/3NF) 概述 范式:英文名称是 Normal Form,它是英国人 E.F.Codd(关系数据库的老祖宗)在上个世纪70年代提出关系数据库模型后总结出来的,范式 ...
- HQYJ嵌入式学习笔记——C语言复习day2
1.计算机的数值表示 数值类型和非数值类型 二进制 0,1 (0b1001) 八进制 0~7 (0146) 十进制 0~9 十六进制 0~f (0x3f) 八进制转二进制-->一位八进制数换 ...
- Java进阶专题(二十六) 数据库原理研究与优化
前言 在一个大数据量的系统中,这些数据的存储.处理.搜索是一个非常棘手的问题. 比如存储问题:单台服务器的存储能力及数据处理能力都是有限的, 因此需要增加服务器, 搭建集群来存储海量数据. 读写性能问 ...
- winform捕捉全局异常
/// <summary> /// 应用程序的主入口点. /// </summary> [STAThread] static void Main() { try { //设置应 ...
- Anno&Viper -分布式锁服务端怎么实现
1.Anno简介 Anno是一个微服务框架引擎.入门简单.安全.稳定.高可用.全平台可监控.依赖第三方框架少.底层通讯RPC(Remote Procedure Call)采用稳定可靠经过无数成功项目验 ...