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>
©️2020 CSDN 皮肤主题: 岁月 设计师:pinMode 返回首页