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>

孟大大大

原创文章 18 获赞 5 访问量 947

关注私信