前端饥人谷技术博客

CSS 盒模型（元素分类、width、height、paddin

2017-07-09  本文已影响103人  _空空

CSS盒模型

<!DOCTYPE html>

元素分类

 1 <address>//定义地址
 2 <blockcode>    // 定义计算机长代码文本
 3 <caption>//定义表格标题
 4 <dd>    //定义列表中定义条目
 5 <div>     //定义文档中的分区或节
 6 <dl>    //定义列表
 7 <dt>     //定义列表中的项目
 8 <fieldset> //定义一个框架集
 9 <form> //创建 HTML 表单
10 <h1>    //定义最大的标题
11 <h2>    // 定义副标题
12 <h3>     //定义标题
13 <h4>     //定义标题
14 <h5>     //定义标题
15 <h6>     //定义最小的标题
16 <hr>     //创建一条水平线
17 <legend>    //元素为 fieldset 元素定义标题
18 <li>     //标签定义列表项目
19 <noframes>    //为那些不支持框架的浏览器显示文本，于 frameset 元素内部
20 <noscript>    //定义在脚本未被执行时的替代内容
21 <ol>     //定义有序列表
22 <ul>    //定义无序列表
23 <p>     //标签定义段落
24 <pre>     //定义预格式化的文本
25 <table>     //标签定义 HTML 表格
26 <tbody>     //标签表格主体（正文）
27 <td>    //表格中的标准单元格
28 <tfoot>     //定义表格的页脚（脚注或表注）
29 <th>    //定义表头单元格
30 <thead>    //标签定义表格的表头
31 <tr>     //定义表格中的行

 1 <a>     // 可定义超链接
 2 <abbr>     // 表示一个缩写形式
 3 <acronym>     // 定义只取首字母缩写
 4 <b>     // 字体加粗
 5 <bdo>     // 可覆盖默认的文本方向
 6 <big>     // 大号字体加粗
 7 <br>     // 换行
 8 <cite>     // 引用进行定义
 9 <code>    // 定义计算机代码文本
10 <dfn>     // 定义一个定义项目
11 <em>     // 定义为强调的内容
12 <i>     // 斜体文本效果
13 <kbd>     // 定义键盘文本
14 <label>     // 自动选中和该label标签相关联的表单控件上
15 <q>     // 定义短的引用
16 <samp>     // 定义样本文本
17 <small>     // 呈现小号字体效果
18 <span>     // 组合文档中的行内元素
19 <strong> // 加粗
20 <sub>     // 定义下标文本
21 <sup>     // 定义上标文本
22 <tt>     // 打字机或者等宽的文本效果
23 <var>    // 定义变量

1 <caption>   // 定义表格的标题
2 <img>     // 向网页中嵌入一幅图像
3 <input>     // 输入框
4 <textarea>     // 多行的文本输入控件
5 <select> // 创建单选或多选菜单
6 <button>  // 创建按钮

块状元素（也称块级元素，block）

内联元素（也称行内元素，inline）

    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    p {
        height: 50px;
        background-color: pink;
    }

    span {
        padding: 25px;
        margin: 25px;
        border: 1px solid red;
        background-color: lightgreen;
    }
</style>
</head>
<body>
    <p>block-1</p>
    <span>inline-1</span><span>inline-2</span>
    <p>block-2</p>
</body>

    <style type="text/css">
    * {padding: 0; margin: 0;}

    a h4 {
      width: 100px;
      height: 50px;
      background-color: lightblue;
    }

    a p {
      height: 50px;
      background-color: lightgreen;
    }
    </style>
</head>
<body>
<a href="#">
    <h4>Headline text</h4>
    <p>Paragraph text</p>
</a>
</body>

内联元素之间的间距问题

// 举例
<title>行内元素</title>
<style type="text/css">

body {
    font-size: 0px;    
}

a, span, em {
    background: pink; /*设置a、span、em标签背景颜色都为粉色*/
    font-size: 16px;
}

</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.imooc.com">慕课网</a>
<span>33333</span>
<span>44444</span><em>555555</em> // 写在一行
</body>

内联块状元素（inline－block）

如何实现浏览器兼容版的inline-block显示？

div {display:inline-block;}
div {display:inline;}

div { display:inline-block; _zoom:1; _display:inline;}   /* 推荐IE6 */
div { display:inline-block; *zoom:1; *display:inline;}   /* 推荐IE6或IE7 */

inline-block底部空隙

    <style type="text/css">
    /*
    使用 inline-block 元素的时候，常会遇到两个 bug：
    1. 两个inline-block 元素之间如果有空格、回车、tab，那么在页面上就有一个空隙
       解决办法：将父元素的 font-size 设置为 0，然后在 inline-block 元素中将 font-size 设置为需要的大小 

    2. 两个不同高度的 inline-block 元素无法对齐，或者下面无缘无故多出几像素
       解决办法：改变 inline-block 元素的 vertical-align，一般改为 top 或 middle
    */
    .box {
        font-size: 0;
        background-color: lightblue;
    }

    .box > img {
        vertical-align: top;
        width: 100px;              
    }
    </style>
</head>
<body>
<div class="box">
    <\img src="http://t.388g.com/uploads/allimg/160412/4-160412123F3.jpg">
    <\img style="width: 140px" src="http://t.388g.com/uploads/allimg/160412/4-160412123F3.jpg">
</div>
</body>

盒模型－宽度和高度（width、height）

关于Div的宽度与高度的100%设定

    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }

    body{
        background-color: #ccc;
    }
    
    /*这里为什么不是我们预想的那样，.container 高度并没有充满父元素 body*/
    /*事实上，由于 .container 中没有内容，我们都看不到它*/
    .container{
        height: 100%;
        background-color: lightblue;
    }
    </style>
</head>
<body>
    <div class="container"></div>
</body>

    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }

    /*有一点需要注意的是，html 元素默认宽度是100%，即整行；但是高度并不是100%，而仅仅是一行而已*/
    /*所以要想实现撑满整个页面，必须显式地设置高度为100%*/
    html, body, .container{
        height: 100%;
    }

    body{
        background-color: #ccc;
    }

    .container{
        background-color: lightblue;
    }
    </style>
</head>
<body>
    <div class="container"></div>
</body>

盒模型－填充（padding）

// 顺序一定不要搞混
div {padding: 20px 10px 15px 30px;}

// 分开写，如下
div {
   padding-top: 20px;
   padding-right: 10px;
   padding-bottom: 15px;
   padding-left: 30px;
}

// 如果上、右、下、左的填充都为10px，可以这样写
div {padding:10px;}

// 如果上下填充一样为10px，左右一样为20px，可以这样写
div {padding:10px 20px;}

// 如果上填充是10px，左右一样为20px，下填充为5px，可以这样写
div {padding:10px 20px 5px;}

.box a{display: inline-block; width: 50px; height: 25px; padding-top: 40px;｝
// 如上，padding的设置会影响元素实际的显示效果，浏览器中显示 a 元素对象的高为 65px，但实际上，a的height还是为 25px

盒模型－边框（border）

border: border-width border-color border-style
border: 1px solid red;


// border-width：设置一个元素的四个边框的宽度。此属性可以有一到四个值
// 可设置的属性值包括：this（细的边框）、medium（默认值。中等的边框）、thick（定义粗的边框）、length（自定义边框的宽度）、inherit
border-width: thin medium thick 10px;
// 边框的宽度不能为负，不能指定为百分比值


// border-style：设置一个元素的四个边框的样式。此属性可以有一到四个值
// 如果一个边框没有样式，边框将根本不会存在
// 可设置的属性值包括：none（定义无边框）、hidden（与 “none” 相同。不过应用于表格时除外，对于表格，hidden 用于解决边框冲突）、dotted（点状边框）、dashed（虚线）、solid（实线）、double（双线。双线的宽度等于 border-width 的值）、groove（ 3D 凹槽边框。其效果取决于 border-color 的值）、ridge（3D 垄状边框。其效果取决于 border-color 的值）、inset（3D inset 边框。其效果取决于 border-color 的值）、outset（3D outset 边框。其效果取决于 border-color 的值）、inherit
border-style: dotted solid double;


// border-color：设置一个元素的四个边框颜色。此属性可以有一到四个值
// 可设置的属性值包括：color（通常设为十六进制颜色）、transparent（指定边框的颜色应该是透明的）、inherit
// 默认的边框颜色是元素本身的前景色，即元素的文本颜色；如果元素没有任何文本，则边框颜色是其父元素的文本颜色
// 但是，在表格中，若只设置 border-style，而不设置 border，则边框颜色为黑色，而不与文本颜色相同
// border-style 属性要声明到 border-color 属性之前。元素必须在改变其颜色之前获得边框
border-color: red green;

// 如下面代码为 div标签来设置边框粗细为2px、样式为实心的红色边框
div {
    border:2px solid red;
}
上面是border代码的缩写形式，也可以分开写成
div {
    border-width: 2px;
    border-style: solid;
    border-color: red;
}
// border属性除了可以设置上面的三个属性值，还可以设置 inherit（指定应该从父元素继承border属性值）

// 缩写：下面这三种属性都是可以缩写的，顺序依次为 上、右、下、左
border-width: 1px 2px 3px 4px;
border-style: dashed dotted solid double;
border-color: red orange yellow green;
// 注意：boder 它是 border-width、border-style、border-color的缩写形式，针对的是上、右、下、左四个方向的边框，并不能单独为各个方向设置边框样式

border-top/border-right/border-bottom/border-left

border-width:
    border-top-width    border-right-width
    border-bottom-width    border-left-width

border-style:
    border-top-style    border-right-style
    border-bottom-style    border-left-style

border-color：
    border-top-color    border-right-color
    border-bottom-color    border-left-color

border-colors:<color><color>……

border: 10px solid black;
-moz-border-top-colors: red green;
-moz-border-right-colors: green yellow;
-moz-border-bottom-colors: yellow blue;
-moz-border-left-colors: blue red;  
// 只有firefox支持，需要加 -moz- 前缀，且只能四条边分开写，否则无效

盒模型－边界（margin）

// 顺序一定不要搞混
div{margin:20px 10px 15px 30px;}

// 分开写，如下
div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

// 如果上、右、下、左的边界都为10px，可以这样写
div{margin:10px;}

// 如果上下边界一样为10px，左右一样为20px，可以这样写
div{margin:10px 20px;}

// 如果上边界是10px，左右一样为20px，下边界为5px，可以这样写
div{margin:10px 20px 5px;}

引申

// border-radius 圆角边框：是一个最多可指定四个 border -*- radius 属性的复合属性。每个半径的四个值的顺序是：左上角，右上角，右下角，左下角（顺时针）
// 语法： border-radius: <length>{1,4}[/<length>{1,4}]?
// 实例：
border-radius: 10px;     // 注意：设置的是圆角直径
border-radius: 10px 20px;   // 如果没有反斜杠则水平和垂直方向相等。这里表示左上角和右下角圆角半径为10px，右上角和左下角半径为20px
border-radius: 10px/20px;   // 如果反斜杠存在，前面的值是水平方向的半径，后面的值是垂直方向的半径。这里表示四个圆角的半径均为 10px/20px
// 圆角单角：
// border-top-left-radius / border-top-right-radius / border-bottom-right-radius / border-bottom-left-radius
border-top-left-radius: 10px 20px;   // 圆角根据水平方向的半径和竖直方向的半径来确定。注意：写圆角单角时不可加反斜杠 /
// 可设置的属性值包括：none（默认）、length（可以是具体值，也可以是百分比，但不是负数）
// border-radius 是否生效与是否设置了边框 border 无关
// 重置 border-radius 没有圆角，使用 none 无效，需要取值 0
// border-radius对 <img> 没有任何效果
// 兼容性：IE8-不支持
// 内径外径：border-radius内径 = 外径 - 对应的边框宽度。当border-radius半径值小于等于边框宽度时，元素没有内径效果
// 特殊图形：
// 圆形：元素的宽高相同，且圆角半径为宽高的一半
div{
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
// 半圆：元素宽高不同，且圆角半径与宽高要配合
div{
    width: 100px;
    height: 50px;
    border-radius: 50px 50px 0 0;
}
// 扇形：元素宽高及一个圆角半径相同
div{
    width: 50px;
    height: 50px;
    border-radius: 50px 0 0 0;
}  
// 椭圆：元素宽高不同，且水平和垂直半径分别对应宽高
div{
    width: 120px;
    height: 80px;
    border-radius: 120px/80px;
}    


// border-image 边界图片：速记属性
// 语法：
border-image: none; // 默认
border-image: border-image-source || border-image-slice [ / border-image-width? | / border-image-outset ]? || border-image-repeat;
// 兼容性：IE10-不支持
// 该属性的作用是用来替代 border-style 的，若 border-image 为 none，则显示border-style 的值
// 实例：
border-image: url('img.img') 27 fill / 27 / 27px repeat;


// border-image-source：边框的图片路径
border-image-source:url('test.img');


// border-image-slice：图片边框四条切割线的位置
border-image-slice:  <number> | <percentage> fill
// 不给写单位，具体值默认单位是 px
// 四值方向是上右下左，代表切割线的方向，切割的分别是高宽高宽
// 图片边框是在边框范围内显示的，若边框宽度不等于slice切片值，则图片边框会按比例放大缩小，以使图片边框正好显示在边框范围内
// 若slice值为负，或大于盒子的宽度或高度会被100%，四个角将显示整个背景图片
// 若右切和左切大于盒子宽度，则上中和下中部分为空；若上切和下切大于盒子高度，则左中和右中部分为空


// border-image-width：边框宽度
border-image-width: <length> | <percentage> | <number> | auto  
// 若指定则边框图片宽度由该值确定，否则由盒子的边框宽度来确定
// 可以用具体像素、数字(表示几倍)以及百分比来表示
// 遵循四值顺序


// border-image-outset：边框图像区域超出边框的量
border-image-outset: 0;  // 默认
border-image-outset: <length> | <number>
// 可以用具体像素和数字(表示几倍)来表示
// 遵循四值顺序


// border-image-repeat：边框图片的排列方式
border-image-repeat: stretch(拉伸，默认值) | repeat(重复) | round(平铺) [1,2]
// 第一个值表示水平方向的排列方式，第二个值表示垂直方向的排列方式
// repeat 是边框中间向两端平铺，可能造成两端边缘被切的现象
// round会对边框背景图的切片进行缩放，使其正好显示


// 轮廓outline处在边框边界的外面，它不像边框那样参与到文档流中，因此轮廓出现或消失时不会影响文档流，即不会导致文档的重新显示。利用轮廓，浏览器可以合并部分轮廓，创建一个连续但非矩形的形状。默认地，轮廓是一个动态样式，只有元素获取到焦点或被激活时呈现
// outline 轮廓：轮廓 outline 类似于边框样式的 border 属性，允许一次完成轮廓样式、宽度和颜色的设置
// 由于给定轮廓必须采用某种统一的样式、宽度和颜色，所以 outline 是关于轮廓的唯一简写属性
// 对于轮廓没有诸如 outline-top 或 outline-right 之类的属性
// outline中并没有包括outline-offset，需要对outline-offset进行单独设置
// 语法：
outline: [<outline-color> || <outline-style> || <outline-width>] | inherit
// 无初始值
// 兼容性：IE7-浏览器不支持
// 应用于所有元素，无继承性
// 实例：
outline: green dotted thick;
// 注意：outline不是元素尺寸的一部分，因此元素的宽度和高度属性不包含轮廓的宽度。
// outline 和 box-shadow 一样不会占据文档流空间
/*
轮廓样式
outline-style: none（默认） | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit（与边框不同的是，值少了一个 hidden）
应用于所有元素，无继承性

轮廓宽度
与边框类似，轮廓宽度不能为负数，也不能指定为百分比值
outline-width: thin | medium（默认） | thick | <length> | inherit
应用于所有元素，无继承性
如果轮廓的样式是 none，则轮廓宽度计算值为 0
初始值: invert（IE）、前景色（其它浏览器）
应用于所有元素，无继承性

轮廓颜色
与边框不同，轮廓颜色有关键字 invert 反色轮廓，代表对轮廓所在的像素完全反色转换，使轮廓在不同的背景颜色中都可见
但实际上invert关键字只有IE浏览器支持，其它浏览器的轮廓颜色是元素本身的前景色
outline-color: <color> | invert | inherit

轮廓偏移
轮廓偏移用来定义轮廓的偏移位置的数值。当参数值为正数时，表示轮廓向外偏移；当参数值为负值时，表示轮廓向内偏移
outline-offset: length | inherit
默认值为 0
应用于所有元素，无继承性
兼容性：IE浏览器不支持
*/


// box-shadow 盒阴影：可设置一个或多个下拉阴影的框，该属性是一个用逗号分隔阴影的列表（即可叠加，形成多阴影），每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
box-shadow: none;   // 默认
box-shadow: 10px 10px 4px 3px #ccc;    // 外阴影，此例中各个参数分别代表：水平偏移（必需）、垂直偏移（必需）、模糊半径（可选）、阴影大小（可选）、阴影颜色（可选，默认和文本颜色一致）
box-shadow: inset 0px 0px 4px #red;    // 内阴影
// 注意：阴影只是一种修饰，不占用空间
//  可以使用多重阴影，但使用过多会造成性能差
// 最先写的阴影在最顶层
// 边框在内阴影之上，内阴影在背景图片之上，背景图片在背景色之上，背景色在外阴影之上
// 内阴影对 <img> 元素没有任何效果
// 该属性与 border-radius 一脉相承，若通过 border-radius 设置为圆角，则 box-shadow 的最终呈现也将是圆角
// 模拟边框
border: 1px solid #000;
box-shadow: 0 0 0 1px #000;


// 在W3C的标准模型下，宽度和高度仅仅包含了内容宽度，除去了边框和内边距两个区域，这样为web设计师处理效果带来了不少麻烦
// box-sizing：CSS3新增了一个盒模型属性box-sizing，能够事先定义盒模型的尺寸解析方式（设置width、height指定的区域）
box-sizing: border-box;  // 此时给元素设置的宽度除了原先的内容 content，还包括填充 padding 以及边框 border
// 可设置的属性值包括：content-box（默认值。这是CSS2.1指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外）、border-box（指定宽度和高度（最小/最大属性）确定元素边框box。也就是说，对元素指定宽度和高度包括 padding 和border 的指定。内容的宽度和高度减去各自双方该边框和填充的宽度从指定的“宽度”和“高度”属性计算）、inherit
// 应用于块级元素和内联块状元素。无继承性
// 兼容性：IE7-浏览器不支持
// 只有firefox浏览器支持 padding-box 属性值
// IE浏览器在 getComputedStyle 得到 width/height 是按照标准模式计算的，而不论 box-sizing 的取值
上一篇 下一篇

猜你喜欢

热点阅读