一、盒子模型

1.5 边框会影响盒子实际大小

边框会额外增加盒子的实际大小。因此我们有两种方案解决:

如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

    1．测量盒子大小的时候,不量边框.
    2．如果测量的时候包含了边框,则需要width/height 减去边框宽度
如果盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小.

1.6 内边距padding

1. padding属性用于设置内边距，即边框与内容之间的距离。

2. padding简写属性可以有一到四个值。

1.7 外边距margin

1. margin属性用于设置外边距，即控制盒子和盒子之间的距离。

2. margin简写方式代表的意义跟padding完全一致。

3. 外边距可以让块级盒子水平居中，但是必须满足两个条件:

   盒子必须指定了宽度( width )。 盒子左右的外边距都设置为auto 。 常见的写法，以下三种都可以∶

   margin-left: auto;margin-right auto; margin: auto; margin: 0 auto; 注意:以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align.center即可。

1.8 外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

1. 嵌套块元素垂直外边距的塌陷

    对于两个嵌套关系(父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
   

2. 解决方案:

    可以为父元素定义上边框。
    可以为父元素定义上内边距。
    可以为父元素添加
    还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题
   

1.9 清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

注意:行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了

二、PS操作

三、圆角边框

在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。
border-radius属性用于设置元素的外边框圆角。

1. 语法：

2. radius半径(圆的半径)原理:(椭)圆与边框的交集形成圆角效果

     · 参数值可以为数值或百分比的形式
     · 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%
     · 如果是个矩形,设置为高度的一半就可以做
     ·该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
     ·分开写: border-top-left-radius、border-top-right-radius、    border-bottom-right-radius和border-bottom-left-radius

四、盒子阴影

CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。

1. 语法：

2. 注意∶

     1、默认的是外阴影(outset),但是不可以写这个单词,否则导致阴影无效
     2、盒子阴影不占用空间，不会影响其他盒子排列。

3. 可以做成鼠标移动到盒子上才有阴影的效果

五、文字阴影

    在CSS3中，我们可以使用text-shadow属性将阴影应用于文本。

1. 语法