css完整总结:第二篇(尺寸,外补白,内补白,边框,背景,颜色,字体,文本,文本装饰)

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的使用,这个知识点算是文本修饰中比较重要的


©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,696评论 1 92
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 4,750评论 0 1
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 6,308评论 1 4
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 4,608评论 0 1
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 10,121评论 0 0

友情链接更多精彩内容