CSS3学习（四）：水平和垂直方向布局

1、水平方向布局

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

margin-left
border-left
padding-left
width
padding-right
border-right
margin-right

一个元素在其父元素中，水平布局必须要满足以下的等式
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素的宽度
以上等式必须满足，如果相加结果使等式不成立，则称为过渡约束
则等式会自动调整调整的情况：

如果这七个值中没有auto的情况，则浏览器会自动调整margin-right值以使等式满足
如果这七个值中有auto的情况，则会自动调整auto值以使等式成立
- 这七个值中有三个值可以设置为auto：width、margin-left、maring-right
- 如果只有一个值为auto，则会自动调整auto的那个值以使等式成立
- 如果有多个auto且宽度为auto，则宽度会调整到最大，其他auto的外边距会自动设置为0
- 如果外边距都为auto，则auto的外边距会自动均分以使等式成立

2、垂直方向布局

元素溢出

子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出

使用overflow/overflow-x/overflow-y属性来设置父元素如何处理溢出的子元素
可选值：

visible 溢出内容会在父元素外部位置显示，默认值
hidden 溢出内容会被裁剪，不会显示
scroll 生成两个滚动条，通过滚动条来查看完整的内容
auto 根据需要生成滚动条

边距折叠

垂直外边距的重叠（折叠）：相邻的垂直方向外边距会发生重叠现象

兄弟元素间的相邻，垂直外边距会取两者之间的较大值（两者都是正值）

如果相邻的外边距一正一负，则取两者的和
如果相邻的外边距都是负值，则取两者中绝对值较大的

3、行内元素的盒模型

行内元素不支持设置width和height

.s1 {/* 行内元素设置了宽高也没用，不会生效 */width: 100px;height: 100px;background-color: yellow;
}

行内元素可以设置padding，但是垂直方向padding不会影响页面的布局

.s1 {/* 下方的div元素并没有因span设置了padding属性，而受到位置上的影响 */padding: 100px;background-color: yellow;
}
.box1 {width: 200px;height: 200px;background-color: #bfa;
}

行内元素可以设置border，垂直方向的border不会影响页面的布局

.s1 {border: 10px orange solid;background-color: yellow;
}
.box1 {width: 200px;height: 200px;background-color: #bfa;
}

行内元素可以设置margin，垂直方向的margin不会影响页面的布局

.s1 {margin: 100px;background-color: yellow;
}
.box1 {width: 200px;height: 200px;background-color: #bfa;
}

可以使用display来设置元素显示的类型：display 属性

CSS3学习（四）：水平和垂直方向布局相关推荐

Flutter 布局Row（水平方向布局）、Column（垂直方向布局）、Wrap（可以自动换行的布局）、Flex（弹性布局）、Stack（叠层布局）、
1.线性布局 Row 水平方向布局 Row({... //表示水平方向子组件的布局顺序(是从左往右还是从右往左),//默认为系统当前Locale环境的文本方向(如中文.英语都是从左往右,而阿拉伯语是从 ...
Android RecyclerViewSwipeDismiss：水平、垂直方向的拖曳删除item
Android RecyclerViewSwipeDismiss:水平.垂直方向的拖曳删除item RecyclerViewSwipeDismiss是一种支持RecyclerView的水平.垂直 ...
利用flex弹性布局实现图片水平及垂直方向居中
display:flex 是一种布局方式.它即可以应用于容器中,也可以应用于行内元素.是W3C提出的一种新的方案,可以简便.完整.响应式地实现各种页面布局注意:(Flex是Flexible Box的 ...
CSS中可以让文字在水平和垂直方向上重叠的两个属性
垂直方向:line-height 水平方向:letter-spacing letter-spacing可以用于消除inline-block元素间的换行符空格间隙问题转载于:https://www.c ...
CSS垂直方向布局中，子元素溢出父元素，如何处理？
默认情况下,父元素的高度是被子元素撑开的,若父元素设置了,就是设置多少就是多少子元素是在父元素的内容区中排列的,如果子元素的大小超过了父元素,则子元素会从父元素中溢出, 使用overflow属性设置 ...
android 水平方向瀑布流,Android RecyclerView（瀑布流）水平/垂直方向分割线
Android RecyclerView(瀑布流)水平/垂直方向分割线 Android RecyclerView不像过去的ListView那样随意的设置水平方向的分割线,如果要实现Recycle ...
css元素的水平与垂直布局
水平布局一个元素在其父元素水平方向上的位置由margin-left,border-left,padding-left,content(width),padding-right,border-righ ...
CSS基础(19)_绝对定位元素的水平或垂直布局
文档流中布局一个元素在其父元素中,水平布局之前是要满足以下等式: margin-left+border-left+padding-left+width+padding-right+border-ri ...
HTML5+CSS3学习笔记（三）文档流和盒子模型【附练习：图片列表、左侧导航栏】
HTML5+CSS3学习笔记(三) 本系列更多文章,可以查看专栏 HTML+CSS学习笔记文章目录 HTML5+CSS3学习笔记(三) 一.CSS布局 1. 文档流(块级元素.行内元素.行内块元素) ...