CSS基础第五天学习笔记：盒子模型与边框设置.pdfVIP

第五天内容

一.复习盒子模型

盒子模型：

内容content

边框border

填充物padding

外边距margin

１content:

一般情况下给一个元素设置宽高都是给内容设置。

２border:

border:1pxsolid#000000;=border:border-widthborder-style

border-color;

如果按照上的面方式来设置，那么我们四边都设置为一样的边框。如果

要给某一边的边框单独设置：

border-top,border-right,border-bottom,border-left

第五天内容第五天

内容

一。复习盒子模型复习盒

子模型

盒子模型：

内容‑‑‑‑content边框‑‑‑

border填充物‑‑‑

paddingpadding外边

距‑‑‑margin

1内容：

一般情况下给一个元素设置宽高都是给内容设置。一般情况下给一个元素设

置宽高都是给内容设置。

2边界：

边界：1PX实心＃000000;=边界：边界宽度边界式边框彩色；

如果按照上的面方式来设置，那么我们四边都设置为一样的边框。如果：：

边界，边界，边界底，边界左侧

３padding

设值的方式：

padding:20px;上右下左设置了20px的内边距

padding:20px30px;上下设置了20px的内边距，左右设置了30px的内边距。

padding:20px30px40px;上设置了20px的内边距，左右设置了30px的内边距，下

设置了40px的内边距。

padding:20px30px40px50px;上20，右30，下40，左50.

单独设置：

padding-top,padding-right,padding-bottom,padding-left

设置盒子的大小（在日常生活中盒子的大小是不变的，但是在页面上的盒子的大

小是会动态变化）：

width:border-left+padding-left+width+padding-right+border-right

height:border-top+padding-top+height+padding-bottom+

border-bottom。

情形：有一种情况，设置padding值不会影响盒子的大小。

在一个父盒子中放一个子盒子，子盒子的宽度没有设置那么默认情

况是从父盒子中继承，如果设置paddding值，那么将来子盒子的宽度是不会变

的，唯一变的是如果padding越大，那么内容越小。

４margin:

赋值方式：与padding一样也有四种。

单独设置

3个填充

设值的方式：

填充：20px;上右下左设