行间距;文本的样式;盒子模型;边框;

行间距

行间距 = 行高 字号(垂直居中:she行高,和父亲一边高)

line-height:200%;/*根据字体的百分之百规定行高*/

line-height:2;/*根据字体的倍数规定行高*/


行间距;文本的样式;盒子模型;边框;_第1张图片

文本样式

text-transform可以用来设置单词的大小写

可选值:

none 默认值

capitalize 单词的首字母大写,通过空格来识别单词

uppercase 所有的字母都大写

lowercase 所有的字母都小写

text-decoration可以用来设置文本的修饰

可选值:

none:默认值,不添加任何修饰,正常显示

underline 为文本添加下划线

overline 为文本添加上划线

line-through 为文本添加删除线

text-decoration:none 去掉超链接的下划线

text-indent:-99999px   设置首行缩进,用于隐藏不想显示的文字

行间距;文本的样式;盒子模型;边框;_第2张图片

盒子模型

一个盒子我们会分成几个部分:(必会)

内容区(content)

内边距(padding)

边框(border)

外边距(margin)

设置内容区的宽和高:width,height,background-color

设置盒子的大小三个决定要素:内容区、内边距、边框

编辑边框三个要素:宽,颜色,样式

border-width:10px 20px 30px 40px;/*样式按顺时针改变*/

/*border-width: 10px 20px 30px;!*上左右下*!

border-width: 10px 20px;!*上下左右*!

border-top-width: 100px;只设置边框的顶部*/


行间距;文本的样式;盒子模型;边框;_第3张图片

边框border

border:1px red solid:边框的宽度、颜色和样式。

也可以使用border-top/left/right/bottom分别指定上右下左 四个方向的边框。

和padding(内边距)一样,默认width和height并包括边框的宽度

边框可以设置多种样式:

none(没有边框)

dotted(点线)

dashed(虚线)

solid(实线)

行间距;文本的样式;盒子模型;边框;_第4张图片

你可能感兴趣的:(行间距;文本的样式;盒子模型;边框;)