css边框及float、display样式

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>

执行结果如下:

猜你喜欢

转载自www.cnblogs.com/wuxiaoru/p/12334932.html