盒子模型

编辑本博客

盒子模型

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

属性：

  • width：指内容宽度
  • heigth：指内容高度
  • padding：边框到内容之间的距离。可以分别设置4个方向的填充，有背景颜色，颜色和内容区域颜色一样，即background-color设定样式
  1. 小属性设置：
  2. 综合属性设置：顺时针方向，上、右、下、左
  • border：可通过三要素设置
  1. 粗细：默认为0
  2. 线性：只写solid线性，默认有3px的黑色宽度，dotted double  dashed
  3. 颜色：默认是黑色
  • 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>
View Code

 标准文档流现象

  • 空白折叠现象，空白字符或空白行会折叠成一行或一个空格
  • 高矮不齐，底边对其
  • 一行显示不完自动换行
posted @ 2018-06-09 12:01  丫丫625202  阅读(113)  评论(0)  编辑  收藏  举报