轻松学：网页设计12-网页布局盒子模型布局
时间：2023-08-28 20:42:01 | 来源：网站运营
时间：2023-08-28 20:42:01 来源：网站运营
轻松学：网页设计12-网页布局盒子模型布局：一个“盒子”由宽度和高度组成，盒子在浏览器中的摆放位置称为布局。
宽度：盒子设置其宽度为100%，这样宽度就会随着浏览器的宽度调整进行自动适应。
高度：高度是无法通过设置百分比来进行自适应，如果div中有内容，高度才会自适应内容的高度。如果想让一个元素（盒子）的百分比高度height：100%起作用，则需要给这个元素的所有父元素的高度设定一个有效值。
1.盒子水平居中使用属性text-align：center可以设置容器中的内容（包括表格）水平居中。如果容器中放置的子元素仍然还是一个容器，那么单纯地设置text-align：center是不会生效的，text-align：left或right亦然。
如果也需要水平居中对齐，就需要在div的外面再套一个更大的div容器，让外面的div容器通过设置边距margin: 0 auto;实现水平居中即可。
2.盒子内容垂直居中表格中的内容默认都是垂直居中的，通常情况下，很多排版布局都希望让内容垂直居中，这样就会更加美观协调。
line-height属性：
line-height实现内容的垂直居中，line-height只能实现使有一行高度的内容垂直居中。且需line-height的值与盒子内高度height的值完全相同。
<head> <meta charset="utf-8"> <title>盒子的宽度</title> <style> #divouter1{width:100%; /*宽度100%，填充整个屏幕*/ height:200px; border:2px solid red; /*边框*/ line-height: 200px; /*内容高度*/ text-align: center; /*内容水平居中*/ </style></head><body> <div id="divouter1">欢迎学习div垂直居中的知识点</div></body>3.盒子内容垂直居中那么有什么方法能让两行或多行内容能够垂直居中呢？表格中的单元格默认就是垂直居中的，可以利用div来模拟一个单元格的属性display:table-cell。
display:table-cell
模拟一个单元格的属display:table-cell使盒子中的内容作为一个表格单元格显示（类似 <td> 和 <th>），并利用vertical-align实现内容垂直居中后，但对div单纯设置宽度为100%将会失效，可以利用css的另外一个属性min-width：500px表示单元格的最小宽度。
4.盒子垂直居中使用 css 实现水平居中很容易，但要实现盒子垂直居中并不容易，W3C提出了一种新的方案--Flex布局。Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，任何一个容器都可以指定为Flex布局,采用Flex布局的元素，被称为Flex容器(flex container)，简称“容器”，其所有子元素自动成为容器成员。
display:flex; /*将对象作为弹性伸缩盒显示*/
justify-content:space-around;/*center:水平居中,
align-items:stretch;/*center:垂直居中
.box{height:300px;width: 100%;display:flex; /*将对象作为弹性伸缩盒显示*/justify-content:center; /*水平居中*/align-items:center; /*垂直居中*/ /* 只要三句话就可以实现不定宽高水平垂直居中。 */}5.内容溢出在使用div盒子页面布局时都会设置其高度，但这样也可能会导致div的内容超出了其div设置的高度，可以使用overflow属性来对其进行处理。
overflow: hidden; /*设置超出部分内容自动隐藏*/
在线咨询
