更改元素的特征:
可以将行级元素改为块状元素,定义元素的布局类型,(块元素 / 行内元素 / 行内块元素)
block:将当前元素修改为块状元素,意味着当前元素具备了所有块状元素的特征 元素会占据整个屏幕的宽度, 用户可以给块元素设置宽高
inline:将当前元素修改为行级元素,意味着当前元素具备了所有行级元素的特征 元素的宽度由内容决定,多个元素会在一行内从左向右排列,用户不能设置元素的宽高
inline-block:既具有块状元素的特征又具有行级元素的特征
像块元素一样用户可以定义元素的宽高; 像行内元素一样,多个元素从左向右排列
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style type="text/css">
- .l1{
- width:100px;
- height: 100px;
- border: solid red 1px;
- background: gray;
- display: inline-block;
- }
- .v{
- width: 200px; height:
- 100px;
- border:
- solid red 1px;
- background: lawngreen;
- display: inline-block;
- margin: 200px;
- }
- .btn{
- display: inline-block;
- width: 100px; height: 100px; background-color: darkcyan;"
- display: inline-block;
- margin: 400px;
- }
- </style>
- </head>
- <body>
- <div class="l1">
- 测试1
- </div>
- <div class="v">
- 测试2
- </div>
- <div class="btn">
- 测试3
- </div>
- </html>