HTML5学习内容-3

（一）行高

line-height,一行文字的高度

例子

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

  .t4{

   line-height: 1.5em;

  }

 </style>

</head>

<body>

 <p class="t4">今天真好今天真好今天真好今天真好<br>

 今天真好今天真好今天真好今天真好</p>

</body>

</html>

注意

p{

	front:italic 2em Geogia;

	line-height:1.5em;

	}

等价于

p{

 front:italic 2em/1.5 Geogia；

}

可以实现垂直居中的效果：

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

  div{

   width: 100px;

   height: 100px;

   border: solid 1px red;

   text-align: center;

   line-height: 100px;

  }

 </style>

</head>

<body>

 <div>

  hello

 </div>

</body>

</html>

（二）排版

字符间距

letter-space:字符间距
word-space:单词间距（英文单词）

文字方向

wirting-mode:
horizontal-tb:水平方向上自上而下
vertical-rl:水平方向上自上而下,垂直方向从左向右
vertical-lr:水平方向上自上而下,垂直方向从右向左

（三）边框

border-style:（设置多个值时，顺时针设置）

dotted:点状边框
dashed：虚线
solid：实线
double：双线
none：默认无

border-width：设置片框线的宽度
border-color：设置颜色（transparent值，透明）

复合写法

 border: solid 1px red;

（四）内外边距

注意：
当内外盒子都设置宽度时，改变内（外）盒子的padding时，内（外）盒子的宽度会改变，外（内）盒子的宽度不会变（因为在设置padding-left（或者padding-right）距离左（右）边补距一定的值，此时实际宽度等于内边距值+width；对外盒子无影响，即使内盒子溢出，外盒子也不会变）；改变无论内外盒子margin时，内外盒子宽度都不会变
2，当内外盒子都不设置宽度时，改变外盒子padding或者改变内盒子margin，内盒子长度会变，外盒子不会（因为内盒子相当于外盒子的盒内元素，改变外padding-left或者内margin-left时内盒子的左边框会和外盒子的左边框产生一定的距离值，而此时内盒子没有设置宽度，其长度会变为网页宽度减外盒子padding值）；改变外盒子margin时，内外都会改变（原理同上）

内边距

padding：边框与元素之间的空白区域，只接受长度值或百分比值，不允许使用负值
有上下左右四个值
如果只设置一个值，即四个上下左右四个内边距是一样的
如果设置两个值，按照顺时针来赋值，没有的复制对面的

外边距

margin：auto；（设置宽度了，将会居中）可以使用负值

（五）圆角

border-radius:可以设置像素百分比

例子

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

  div{

   border: solid 1px red;

   width: 100px;

   height: 100px;

   border-radius: 20px;

   margin: 0 auto;

  }

 </style>

</head>

<body>

 <div>

 </div>

</body>

</html>

画圆

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

  div{

   border: solid 1px red;

   width: 100px;

   height: 100px;

   border-radius: 50px;

   margin: 0 auto;

  }

 </style>

</head>

<body>

 <div>

 </div>

</body>

</html>

（六）阴影

box-shadow:10px 10px 10px red;
水平，垂直，模糊度，颜色

（七）轮廓线

outline
不占用空间

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

  .s0{

   border: solid 1px red;

   width: 100px;

   height: 100px;

   outline: dotted 25px green;

   margin: 0 auto;

  }

  .s1{

   height: 50px;

   background-color: yellow;

  }

 </style>

</head>

<body>

 <div class="s0">

 </div>

 <div class="s1"></div>

</body>

</html>

用于表单：

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

  input{

   outline: none;

  }

 </style>

</head>

<body>

 <input type="text" name="N">

</body>

</html>