关于CSS总览，一篇文章吃透!「属性」【选择器】

莫等闲，白了少年头，空悲切。

目录

• 一、概述1.1 盒模型1.2 CSS速览

正文

黄沙百战穿金甲，不破楼兰终不还。

一、概述

CSS(Casading Style Sheet)，层叠样式表

CSS3包含大量功能，将CSS3分为多个模块。在模块定义还不太稳定的阶段，浏览器会采用厂商前缀实现某个特征。

-webkit-

Apple Webkit团队，兼容Android, Safari, Chrome, BlackBerry等；

-moz-

Mozilla，兼容Firefox等;

-ms-

Microsoft基金会，兼容IE;

-o-

兼容Opera, Opera Mini, Opera Mobile;

1.1 盒模型

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Getting_started/Boxes

当你的浏览器展现一个元素时，这个元素会占据一定的空间。这个空间由四部分组成：由里向外content,padding,border,margin.

中间是元素呈现内容的区域。这个区域的外面是内边距。再外面是边框。最外面的是外边距，外边距将该元素与其它元素分开。

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

盒模型是有两种标准的，一个是标准模型，一个是IE模型。盒模型的宽高只是内容（content）的宽高，而在IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。

margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。

示例：

颜色

内边距总是跟元素的背景色一样，所以当你设置背景色时，你会发现背景色在元素本身和内边距上都生效了。外边距总是透明的。

边框

你可以用边线或者边框来装饰元素。

用 border 属性给元素四周指定统一的边框。在属性值中指定边框的宽度（通常是以显示到屏幕上的像素为单位）， 样式， 还有颜色。

样式包括：

你也可以通过设置样式为 none 或 hidden 来明确地移除边框，或者设置边框颜色为 transparent 来让边框不可见，后者不会改变布局。

如果一次只指定某一个方向的边框，就用属性： border-top， border-right， border-bottom， border-left。 你可以用这些属性指定某个方向上的边框，或者不同方向上的不同边框。

外边距和内边距

使用外边距和内边距调整元素的位置，并在其周围创建空间。

用 margin 属性或者 padding 属性分别设置外边距和内边距的宽度。

如果你指定一个宽度，它将会作用于元素四周（上、右、下、左）。

如果你指定两个宽度， 第一个宽度会作用于顶部和底部，第二个宽度作用于右边和左边。

你也可以按照顺序指定四个宽度： 上、右、下、左。

1.2 CSS速览

CSS就是选出元素设置其样式，选择元素要用到选择器，设置样式要用到属性。

原文：https://www.cnblogs.com/aidata/p/12249301.html

喜欢小编的可以点个赞关注小编哦，小编每天都会给大家分享文章。

我自己是一名从事了多年的前端老程序员，小编为大家准备了新出的前端编程学习资料，免费分享给大家！

如果你也想学习前端，可以观看【置顶】文章。也可以私信【1】 领取最新前端练手实战项目