盒子模型

最新推荐文章于 2025-09-11 23:38:01 发布

转载最新推荐文章于 2025-09-11 23:38:01 发布 · 49 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yaya625202/p/9159013.html

文章标签：

#ruby

编辑本博客

盒子模型

div{
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 1px solid red;
    margin: 10px;
}

View Code

属性：

width：指内容宽度
heigth：指内容高度
padding：边框到内容之间的距离。可以分别设置4个方向的填充，有背景颜色，颜色和内容区域颜色一样，即background-color设定样式

小属性设置：
综合属性设置：顺时针方向，上、右、下、左

border：可通过三要素设置

粗细：默认为0
线性：只写solid线性，默认有3px的黑色宽度，dotted double dashed
颜色：默认是黑色

margin：指距离，上下设置0，左右设置auto即可对齐居中显示
```
margin:0 auto;
```

盒模型计算

清除某些标签默认padding属性

ul有默认的margin、padding属性

body默认有margin属性

使用并集选择器清除

reset css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

View Code

使用border属性制作三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小三角</title>
    <style type="text/css">
        div{
            width: 0;
            height: 0;
            border-top:20px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 20px solid transparent;
            border-left: 20px solid green;
        }
    </style>
</head>
<body>
<div></div>

</body>
</html>