HTML中的水平布局

元素的水平方向的布局：

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

maigin-left

border-left

padding-left

width

padding-right

border-right

maigin-right

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

maigin-left

border-left

padding-left

width

padding-right

border-right

maigin-right

上述所有值和，必须等于其父元素内容区的宽度

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

等式如果不成立，则称为过度约束，则等式会自动调整

调整情况：

如果这七个值中没有为 auto 的情况，则浏览器会台哦正margin-right值以使等式成立

这七个值由三个值可以设置为auto

width

margin-left

margin-right

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

width的值默认为auto

如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大设置为auto的外边距会自动为0

如果将三个值都设置会auto，则外边距都为0，宽度最大

所以我们能经常利用这个特点来使一个元素在其父元素中水平居中

实例：

width：xxx px；

margin： 0 auto

  .outer{width: 800px;height: 200px;border: 10px red solid;}.inner{width: auto;height: 200px;background-color: blue;margin-right: 200px;margin-left: 200px;}

；

HTML中的水平布局相关推荐

android线性布局水平布局,andriod：线性布局中的垂直于水平布局问题
1. 线性布局--- LinearLayout: LinearLayout按照垂直或者水平的顺序依次排列子元素,每一个子元素都位于前一个元素之后.如果是垂直排列,那么将是一个N行单列的结构,每一行只会 ...
CSS之布局（盒子的水平布局）
盒子的水平布局: <!DOCTYPE html> <html><head><meta charset="UTF-8"><tit ...
PYQT5水平布局后垂直方向控件间距的调整方法
最近在做QT做界面设计,软件使用的是QTCreator4.2.1,pyqt5.8.1,使用水平布局做好界面后,在软件中也调整好了控件的间隔,达到了想要设计的效果,如下图. 使用pyqt生成mainwi ...
什么是盒子模型中的水平方向的布局
目录元素的水平方向布局: 必须要满足的等式调整的情况: 编辑设置auto的情况元素的水平方向布局: 元素在其父元素中水平方向的位置由以下几个属性共同决定 margin-left ...
Android中的约束布局
文章目录 1 Android中的约束布局 1.1 约束布局的重要属性 1.2 约束布局示例 1 Android中的约束布局 1.1 约束布局的重要属性重要属性: app:layout_constra ...
CSS中实现水平/垂直居中
CSS中实现水平/垂直居中在CSS中实现水平居中相对简单,但是却没有一个明确的属性表示这是实现垂直居中的,这就导致垂直居中的实现相对初学者来说难上许多.但是在实际的开发中垂直居中的需求常常出现,例如 ...
duilib中界面的布局方式
参考博客:https://blog.csdn.net/zhuhongshu/article/details/38531447 常用的布局默认为相对布局,默认float=false,该属性为true时, ...
1._请写出5种以上的android中界面常用布局方式,跳槽季“充电宝”Android面试题(一)...
1.请介绍下Android中常用的5种布局 Android中常用的5种布局分别为:FrameLaout(框架布局).LinearLayout(线性布局).AbsoluteLayout(绝对布局).Re ...
在SOUI中使用线性布局
SOUI 2.5.1.1开始支持线性布局(LinearLayout). 要在SOUI布局中使用线性布局, 需要在布局容器窗口里指定布局类型为vbox | hbox, (vbox为垂直线性布局, hbo ...

HTML中的水平布局

HTML中的水平布局相关推荐

最新文章

热门文章