1、css边框:
text-align: center; 水平方向居中
line-height: 48px;跟标签高度一样,为竖直方向居中
font-weight: bold;字体加粗
<body> <div style="border:1px dotted red"> 1234 </div> <div style="height:50px; width:80%; border:1px solid red; font-size:16px; text-align:center; line-height:50px; font-weight:bold; ">5678 </div> </body>
2、float样式
float:让标签飘在空中,可以使块级标签堆叠
<body> <div style="width:20%;background-color:red;float:left">1</div> <div style="width:20%;background-color:black;float:right">2</div> </body>
执行结果如下:
如果这两个div的width超过了100%,则不会在一行中堆叠,执行结果如下:
3、display样式
display: none; 让标签消失,默认看不见标签 display: inline;可以使块级标签有行内标签的特性 display: block;可以使行内标签有块级标签的特性 display: inline-block; inline,默认自己有多少占多少 block,可以设置无法设置高度,宽度,padding(内边距) margin(外边距)
示例如下:
div为块级标签;span为行内标签
span无法设置高度、宽度等,但使用display属性后,便可以了
<body> <div style="background-color: red;display: inline;">1234</div> <span style="background-color: red;display: block;">5678</span> <span style="display:inline-block;background-color: red;height: 50px;width: 70px;">WUWU</span> <a style="background-color: red;">Eric</a> </body>
执行结果如下: