border 边框
margin 外边距
padding 内边距
1.元素分类
在CSS中，html中的标签大体上被分为三类：
①块状元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>
特点：
块状元素独占一行，写在他后面的内容，是从另一行开始的。
元素的高度、宽度、行高、以及顶和底边距都可以设置。
在不设置宽度的情况下，显示为父容器的100%
②内联元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
特点：
和其他元素都在一行，但一个元素和一个元素之间是有间距的。
元素的高度、宽度、行高、以及顶和底边距都不可设置。
③内联块状元素：<img>、<input>
特点：
和其他元素都在一行。
元素的高度、宽度、行高、以及顶和底边距都可以设置。
2.元素之间的转换
①内联元素转换为块状元素
在style中设置{display:block;}即可。
如：
<style>
span{display:block;}
<style>
<body>
<span>你说前半生就是这样吧</span>
</body>
②块状元素转换为内联元素
在style中设置{display:inline;}即可。
③内联块状元素（同时具备内联元素和块状元素的特点）
在style中设置{display:inline-block;}即可。
3.合模型-边框
可以设置边框的粗细、样式和颜色
①粗细：
border-width，用px来设置。
②样式：
border-style，dashed（虚线）、dotted（点线）、solid（实线）。
③颜色：
border-color。
也可以合起来写：
border:2px solid pink;
4.合模型的四个边框
上边框：border-top:4px dotted pink;
下边框：border-bottom
左边框：border-left
右边框：border-right
5.合模型的高度和宽度（height、width）
元素（盒子）的实际宽度是：
左边界（margin-left）+左边框（border-left）+左填充（padding-left）+内容宽度（weight）+右填充（padding-right）+右边框（border-right）+右边界（margin-right）
图片来源慕课网，侵删。
高度同理
6.合模型-填充（padding）
元素的内容和边框之间的距离称之为填充。
填充的顺序为：上、右、下、左（顺时针）。
比如：padding:10px 20px 30px 40px;
如果上下一样为10px，左右一样为20px，可以写为：padding:10px 20px;
7.合模型-边界（margin）
元素与其他元素之间的距离称之为边界。
边界的顺序和填充的顺序相同。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
