例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
text-align: center;
}
.box1 {
width: 19.5%;
height: 150px;
background-color: red;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.box2 {
height: 150px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
</html>
相关推荐
例如，可以使用`border-radius`创建圆角，`box-shadow`添加阴影效果，`transition`实现平滑过渡，以及`flexbox`或`grid`布局来实现卡片的灵活排列。 三、JS（JavaScript） JavaScript是一种客户端脚本语言，用于...
本文档为前端面试精简篇，涵盖了 CSS 相关知识点，包括左边定宽右边自适应方案、左右两边定宽中间自适应方案、左右居中行内元素、上下垂直居中、盒模型等内容。 左边定宽右边自适应方案 在实现左边定宽右边自适应...
在前端开发过程中，经常会遇到需要实现特定布局的需求，例如左侧固定宽度，右侧自适应；或者两侧固定宽度，中间自适应的情况。这里提供几种常见的实现方法。 ##### 左侧定宽，右侧自适应方案 1. **`float + margin`...
块状元素的尺寸可以自适应内容、父元素或者设置的宽度和高度值。如果元素的尺寸超过了父元素，溢出的内容可以通过overflow属性来控制。例如，overflow: auto可以让元素根据内容自动扩展滚动条。 总结来说，盒模型的...
总之，理解并灵活运用这些布局技巧，可以大大提高CSS布局设计的效率和效果，使得网页布局更加美观且适应不同设备的需求。无论是传统的浮动布局、`calc`计算，还是现代的`flexbox`和`grid`布局，都为我们提供了强大的...
6.12 Ext.util.TextMetrics得到块状化文本规格 6.12.1 块的绑定 6.12.2 实例化对象 6.12.3 获取文本的高度 6.12.4 获取文本的宽、高 6.12.5 获取文本的宽度 6.12.6 获取指定节点内文本块的宽、高 6.12.7 指定...