css完整总结：第二篇（尺寸，外补白，内补白，边框，背景，颜色，字体，文本，文本装饰）

这次对CSS中所有的语法进行一次综合性的总结，后续的文章，将侧重与JavaScript和PHP，微信开发（小程序），以及Linux运维方面。css中设计到定位，布局，尺寸，外补白，内补白，边框，背景，颜色，字体，文本，文本装饰，书写模式，伸缩盒，装换，过渡，动画，媒体查询，伪类等等。我会集中对上述所说的方面进行详细的书写和说明，结合实例，让大家更好更快的掌握css3.0.那下面我们闲话少啥，拿起键盘就是敲.

下面的介绍，重点就是padding和margin，背景和颜色的使用，在实际的页面布局使用还是比较多的。我的github对于css的使用有专门的仓库，欢迎关注和star

github
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。

检索或设置对象四边的外延边距。
如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上、下，第二个用于左、右。
如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
非替代(non-Replaced)行内元素可以使用该属性设置左、右两边的外补丁；若要设置上、下两边的外补丁，必须先使该对象表现为块级或内联块级。
外延边距始终透明。
某些相邻的margin会发生合并，我们称之为margin折叠，这也是我们应该引起重视的。
margin折叠常规认知： margin折叠只发生在块级元素上； 浮动元素的margin不与任何margin发生折叠； 设置了属性overflow且值不为visible的块级元素，将不与它的子元素发生margin折叠； 绝对定位元素的margin不与任何margin发生折叠； 根元素的margin不与其它任何margin发生折叠；

上面提到的margin折叠，在布局的时候，很常用到。所以希望引起重视。

内补白：padding的使用。取值可以为数字和百分比，和外补白一样。取值有四个，分别是top，right，bottom，left。也可以单独设置，即padding-left，padding-top，padding-bottom，padding-right。

检索或设置对象四边的内部边距。
如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上、下，第二个用于左、右。
如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
非替代(non-Replaced)行内元素可以使用该属性设置左、右两边的内补丁；若要设置上、下两边的内补丁，必须先使该对象表现为块级或内联块级。

上述提到的这些，内补白和外补白，实际工作中使用还是很多的。外补白主要就是让两个元素之间的距离方便调节。内补白主要就是让元素内部的元素和边框产生距离。对于外补白和内补白都是对称的设置的，这样才能让布局更美观。大家可以参考京东，天猫的布局，可以学到很多的。

这里希望大家对于盒模型重视起来，实际工作中有时会涉及到这些知识点。想了解盒模型的知识点的可以，点击这里

边框知识点：主要讲述border，outline和box-shadow，border-image这三个知识点。

 border: 1px solid green;主要设置的三个参数，宽度，样式，颜色。宽度的取值是数字或者百分比都可以。样式的取值：none： 无轮廓。border-color将被忽略，border-width计算值为0，除非边框轮廓为图像，即border-image。 hidden： 隐藏边框。IE7及以下尚不支持 dotted： 点状轮廓。IE6下显示为dashed效果 dashed： 虚线轮廓。 solid： 实线轮廓 double： 双线轮廓。两条单线与其间隔的和等于指定的border-width值 groove： 3D凹槽轮廓。 ridge： 3D凸槽轮廓。 inset： 3D凹边轮廓。 outset： 3D凸边轮廓。
颜色的取值：rgb，英文，hsl都可以的。
当然上述所说的三个参数，也可以单独设置，因为一个元素是包含四条边的。所以可以分别设置。

outline的取值和用法和border用法一样。
box-show主要设置阴影。这个在实际项目中，使用的还是挺频繁的。我们对这个属性好好介绍一下：取值六个参数

none： 无阴影
<length>①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<length>④： 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
<color>： 设置对象的阴影的颜色。
inset： 设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影。

border-image：对象的边框样式使用图像来填充。这个实际中用的并不是很多。大家可以了解一下。
背景的使用：background：背景更多的是背景图片的使用，颜色的设置。取值如下：我们对于每个属性进行分析一下，因为这个知识点还是比较重要的。

background-image： 指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图像”
background-position ： 指定对象的背景图像位置。
background-size ： 指定对象的背景图像的尺寸大小。
background-repeat ： 指定对象的背景图像如何铺排填充。
background-attachment ： 指定对象的背景图像是随对象内容滚动还是固定的。
background-origin ： 指定对象的背景图像显示的原点。
background-clip ： 指定对象的背景图像向外裁剪的区域。
background-color ： 指定对象的背景颜色。

颜色的使用主要就是color和opacity这两个知识点。在css中颜色的取值可以是任何，基本上主流的颜色表示方法，他都可以接受。可以使用Color Name(颜色名称), HEX, RGB, RGBA, HSL, HSLA, transparent(透明)来指定color。
opacity主要表示透明度，取值范围为数字，值被约束在[0.0-1.0]范围内，如果超过了这个范围，其计算结果将截取到与之最相近的值。
字体：font，实际项目中，对于字体的使用，很多会使用字体图标。取值可以是：

 font-style ： 指定文本字体样式 ，取值为normal(正常)，italic(斜体)，oblique(倾斜).font-variant ： 指定文本是否为小型的大写字母 normal(正常)，small-caps(小型的大写字母).font-weight ： 指定文本字体的粗细 normal： 正常的字体。相当于数字值400 bold： 粗体。相当于数字值700。 bolder： 定义比继承值更重的值 lighter： 定义比继承值更轻的值 integer： 用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 font-size ： 指定文本字体尺寸 可以指定数字也可以是百分比。line-height ： 指定文本字体的行高 font-family ： 指定文本使用某个字体或字体序列，取值为：family-name： 字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格或中文，则应使用引号括起 caption： 使用有标题的系统控件的文本字体（如按钮，菜单等） icon： 使用图标标签的字体menu： 使用菜单的字体 message-box： 使用信息对话框的文本字体 small-caption： 使用小控件的字体 status-bar： 使用窗口状态栏的字体

字体的选用，一般整个项目会使用统一的字体样式。所以，我们一般会在项目的初期就会对于字体颜色的使用，进行设定。这个选项很重要但是也很好掌握。

文本(text)：对于文本的使用，最多的就是对于布局方式text-align(多数是center)，line-height(行高)，text-indent(缩进)，字体间距(word-spacing),letter-spacing(字符间距),

在实际项目中，应用最多的就是字体文本超出隐藏或者显示为….(overflow: hidden;text-overflow:ellipsis;white-space: nowrap;一行的控制，多行也有对应的方法，大家可以自行百度)。

文本修饰(text-decoration)：取值有线性,线的颜色,线的样式。下面的取值是实际中应用最多的。

none： 指定文字无装饰
underline： 指定文字的装饰是下划线
overline： 指定文字的装饰是上划线
line-through： 指定文字的装饰是贯穿线
blink： 指定文字的装饰是闪烁。

text-shadow的使用，这个知识点算是文本修饰中比较重要的。

css完整总结：第二篇（尺寸，外补白，内补白，边框，背景，颜色，字体，文本，文本装饰）相关推荐

【前端三剑客二】CSS手术刀剖析第二篇
文章目录一.CSS常用元素属性 1.字体属性 1.1.设置字体 1.2.字体大小 1.3.字体粗细 1.4.文字样式 2.文本属性 2.1.文本颜色 2.2.文本对齐 2.3.文本装饰 2.4.文本 ...
python/改变图片尺寸及分辨率/填充透明图片背景颜色
改变图片尺寸及分辨率(dpi): from PIL import Image #调整大小和分辨率(dpi) im = Image.open('2.1.bmp') im = im.resize((188 ...
html圆角边框背景颜色,CSS之圆角边框渐变的实现
注:测试浏览器版本号--chrome 75.0.3770.80:opera 60.0.3255.109:firefox 67.0:ie 11. 对于普通的边框渐变,其作用于圆角边框渐变时会覆盖掉圆角的 ...
css编程设置网页背景,网页中cssbackground背景图和背景颜色的设置方法
CSS 背景这里指通过CSS对对象设置背景属性,如网页中通过CSS设置背景各种样式. Css background背景作用:设置纯色背景.背景background可以设置对象纯色的背景颜色,设置图为背 ...
html滚动背景色没了,css背景颜色不显示怎么解决
css背景颜色不显示怎么解决 div css新手布局会遇到布局的背景颜色无法显示,一般布局背景无法显示通常原因如下: 1.由使用float浮动造成浮动产生无法显示css背景颜色 2.高度不够而产生背景 ...
CSS控制背景颜色和背景图像的方法
Web前端培训中比较重要的一环是网页的设计,网页能通过背景图像给人留下第一印象,如节日题材的网站一般采用喜庆祥和的图片来突出效果,所以在网页设计中,控制背景颜色和背景图像是一个很重要的步骤.下面将详细 ...
CSS中如何让背景颜色半透明
目标:HTML中要在<article>中(也就是卡片中间的联系方式)添加半透明的背景颜色 <article><img src="chris.jpg" ...
css怎么恢复清背景,css如何清除背景颜色
css清除背景颜色的方法是,给背景添加background-color属性,并将属性值设置为transparent,这样背景颜色就被清除了,如[background-color: transparen ...
CSS 外补白(Margin) 内补白(Padding) 边框属性定位（positioning）属性布局(layout)属性
CSS 布局(Layout) Properties 属性 CSS Version 版本 Inherit From Parent 继承性 Description 简介 display CSS1/CSS2 ...