1.盒子模型

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。

以苹果手机盒子为例:

盒子的挡板---------->边框：border

填充的泡沫---------->内边距：padding

盒子中装的物体---->内容

盒子与盒子之间的距离----->外边距：margin

CSS盒子模型.png

2.内外边距

内边距属性

padding属性用于设置内边距，也是复合属性，相关设置如下：

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

padding:[上内边距 右内边距 下内边距 左内边距]

还有一种是:

padding: 10px 20px 30px;

padding: 上内边距 左右内边距 下内边距;

外边距属性

margin属性用于设置外边距，也是复合属性，相关设置如下：

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:上外边距

margin: [上外边距 右外边距 下外边距 左外边距]

还有一种是:

margin: 0 auto; /*让元素居中 */

为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：

*{

padding:0; /*清除内边距*/

margin:0; /*清除外边距*/

}

内外边距使用单位: px

3.边框

border-style 确定边框的显示样式

None:没有边框

Solid：实线

Dashed：虚线

Dotted：点线

Double：双线

Border-width 边框宽度： 具体的像素值px

Border-color 边框颜色

表单的边框通常改为 0；

border:0 none;

表格的细线边框

table { border-collapse:collapse; }

轮廓 (链接有虚线 和 文本框 有 蓝色边框)

outline-style:none;

边框样式的连写方式：

Border:Border-width border-style Border-color;

4.行高 line-height:

两个基线之间的距离叫做行高。行高是可以继承。

行高.png

百分比：

如果行高使用百度比，那么这个行高的基数为当前标签字体大小。

120%,150%

em:

跟百分比的使用是一样一样的。唯一不同的是它是以倍数出现。

1.5em,1.2em

什么单位也不带：

不带单位和em是一样的。

直接用px作单位,一般会配合设置水平居中

text-align: center;

5.背景

Background-color 设置背景颜色

Background-image 设置背景图片 url(图片的路径)

background-repeat 背景是否平铺：

No-repeat:不平铺

repeat-x:在x轴平铺

repeat-y:在y轴平铺

Background-position 设置背景图片的位置

取值：

top 上center中 bottom下y轴

Left左 center中 right 右 x轴

注意：如果使用上面的关键字x轴和y轴的设置不分先后。

其实还可以设置成具的像素值:

注意：如果使用了具体的像素值那么x，y轴是分先后的，先是x轴，后是y轴。

background-attachment 背景是否固定

Fixed：固定

背景的连写方法：

Background: color image repeat position attachment;

eg:

Background:url(图片的路径) no-repeat top center;

伪类

每一个元素都有自己的伪类(但是不建议使用其它元素的伪类)，伪类一般应用在a标签上：

爱恨：LOVE HATE 设置a标签的伪类

我们必须按照一定的顺序来设置,由此就有了爱恨原则: l v h a

a: link 标签的样式

a: visited 访问之后的样式

a: hover 鼠标悬停的样式

a: active 点击时的样式

focus 得到焦点时候的样式

获得焦点.

大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：

盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和

盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和

CSS相关文章

我是楚简约，感谢您的阅读，

喜欢就点个赞呗，“❤喜欢”，

鼓励又不花钱，你在看，我就继续写~

非简书用户，可以点右上角的三个“...”，然后"在Safari中打开”，就可以点赞咯~