1. 我们接着上一篇的,这一篇我们继续讲述css的知识点,这次主要学习尺寸,外补白,内补白,边框,背景,颜色,字体,文本,文本装饰。
2. 尺寸:主要针对宽度和高度。width和height。取值的情况可以是数字,也可以是百分比。这些比较简单。其中还有min-width和min-height,max-width和max-height,主要针对尺寸的设置。
3. 外补白:margin,取值可以为数字和百分比,取值有四个,分别是top,right,bottom,left。也可以单独设置,即margin-left,margin-top,margin-bottom,margin-right。
上面提到的margin折叠,在布局的时候,很常用到。所以希望引起重视。
内补白:padding的使用。取值可以为数字和百分比,和外补白一样。取值有四个,分别是top,right,bottom,left。也可以单独设置,即padding-left,padding-top,padding-bottom,padding-right。
上述提到的这些,内补白和外补白,实际工作中使用还是很多的。外补白主要就是让两个元素之间的距离方便调节。内补白主要就是让元素内部的元素和边框产生距离。对于外补白和内补白都是对称的设置的,这样才能让布局更美观。大家可以参考京东,天猫的布局,可以学到很多的。
边框知识点:主要讲述border,outline和box-shadow,border-image这三个知识点。
outline的取值和用法和border用法一样。
box-show主要设置阴影。这个在实际项目中,使用的还是挺频繁的。我们对这个属性好好介绍一下:取值六个参数
border-image:对象的边框样式使用图像来填充。这个实际中用的并不是很多。大家可以了解一下。
背景的使用:background:背景更多的是背景图片的使用,颜色的设置。取值如下:我们对于每个属性进行分析一下,因为这个知识点还是比较重要的。
颜色的使用主要就是color和opacity这两个知识点。在css中颜色的取值可以是任何,基本上主流的颜色表示方法,他都可以接受。可以使用Color Name(颜色名称), HEX, RGB, RGBA, HSL, HSLA, transparent(透明)来指定color。
opacity主要表示透明度,取值范围为数字,值被约束在[0.0-1.0]范围内,如果超过了这个范围,其计算结果将截取到与之最相近的值。
字体:font,实际项目中,对于字体的使用,很多会使用字体图标。取值可以是:
字体的选用,一般整个项目会使用统一的字体样式。所以,我们一般会在项目的初期就会对于字体颜色的使用,进行设定。这个选项很重要但是也很好掌握。
文本(text):对于文本的使用,最多的就是对于布局方式text-align(多数是center),line-height(行高),text-indent(缩进),字体间距(word-spacing),letter-spacing(字符间距),
在实际项目中,应用最多的就是字体文本超出隐藏或者显示为….(overflow: hidden;text-overflow:ellipsis;white-space: nowrap;一行的控制,多行也有对应的方法,大家可以自行百度)。
文本修饰(text-decoration):取值有线性,线的颜色,线的样式。下面的取值是实际中应用最多的。
text-shadow的使用,这个知识点算是文本修饰中比较重要的