CSS入门

宽、高与边框(width/height/border)

此课程是收费课程,请先购买或加入会员后再访问。

body中,先放一个的div

<html>
<head>
    <meta charset="utf-8">
    <!-- ... -->

    <style>

    </style>
</head>

<body>
<div>天下美食出中华,最爱武汉热干面。</div>
</body>
</html>

宽和高

使用标签选择器,把它给找出来,我们设置它的,都是400px

<style>
div {
    width: 400px;
    height: 400px;
}
</style>

刷新页面,发现什么完全看不见宽和高在哪里,千万不要着急,这并不是我们写错了。如果你和我一样,用的也是Chrome浏览器,那么点击鼠标右键,选择检查

在弹出的调试工具中,鼠标选中,并放在div标签上。就会看到这个400*400的框框了。调试工具的右侧会显示咱们设置的CSS。之所以看不见,是因为这个框也是白色的啊,和默认的背景色一样的,当然看不见了。

css的宽和高

边框

接着我们给这个div设置一个边框,这样它的大小,在浏览器里就能看的很清楚了。

 <style>
    div {
        /* ... */

        border: 1px solid red;
    }
</style>

css的边框

border就是边框的意思,它里面包含三个值。1px是边框的粗细。solid是显示成线条的意思,最后的red当然就是颜色了。
border属性,前两个是必须写的,最后的颜色可以省略。如果不写颜色值,默认就是黑色的。我们可以尝试把边框,改粗一点,5pxsolid也可以改成dashed,这样就变成了虚线了。

事实上border属性,它是一个缩写,它是由下面三个属性共同构成的。但是一般很少有人这样写,大家基本都是直接写border,这样明显更简洁嘛。

<style>
    div {
        /* ... */

        border-width: 1px;
        border-style: solid;
        border-color: red;
    }
</style>

还有,如果你想把4个方向的边框,设置成不同的,那又该怎么写呢?这样,你就可以给每个方向设置不同的边框了。

<style>
    div {
        /* ... */

        border-top: 2px solid #08c;
        border-right: 2px solid;
        border-bottom: 2px solid lightgreen;
        border-left: 2px dashed red;
    }
</style>

css 4个方向不同边框

总结

属性名 用法举例 意义
width 400px
height 400px
border 1px solid red 粗细、边框样式、颜色。前两个值必须设置,颜色可省略默认黑色。
border-top 同上 上边框
border-right 同上 右边框
border-bottom 同上 下边框
border-left 同上 左边框