CSS_排版、盒子模型_tag

1.字体：

body{font-family:"宋体";}

2.设置斜体：

p a{font-style:italic;}

3.为文字设置为下划线样式：

p a{text-decoration:underline;}

4.设置删除线：

.oldPrice{text-decoration:line-through;}

5.段落排版-缩进：

p{text-indent:2em;}

6.行间距（行高）：

p{line-height:1.5em;}

7.间距：设置文字间隔或者字母间隔可以使用letter-spacing 来实现，可以使用 word-spacing 来实现英文单词之间的间距

h1{letter-spacing:50px;}

h1{word-spacing:50px;}

8.对齐：

h1{text-align:center;}

9.html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素

常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>

10.在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置 display:block 就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点

a{display:block;}

11.内联元素：在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素

div{display:inline;}

12.内联块状元素：同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素

a{
    display:inline-block;
	width:20px;/*在默认情况下宽度不起作用*/
	height:20px;/*在默认情况下高度不起作用*/
	background:pink;/*设置背景颜色为粉色*/
	text-align:center; /*设置文本居中显示*/
}

13.盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)

p{border:2px dotted #ccc;}

dashed（虚线）| dotted（点线）| solid（实线）

14.为 p 标签单独设置下边框

div{border-bottom:1px solid red;}

15.宽度高度：css内定义的宽（width）和高（height），指的是填充以里的内容范围；一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界

16.填充：元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)

div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}

17.元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左

div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

PS:padding和margin的区别，padding在边框里，margin在边框外