(一)行高
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>