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在边框外