CSS笔记--day03

5.5 插入图片和背景图片区别

• 插入图片我们用的最多，比如产品展示类 移动位置只能靠盒模型 padding margin
• 背景图片我们1一般用于小图标 或者 超大背景图片。背景图片只能通过background-position

img {
        width:200px;    /*插入图片更改大小width和height*/
        height:210px;
        margin-top: 30px;    /*插入图片更改位置 可以用margin或padding 盒模型*/
        margin-left: 50px;   /*插入当图片也是一个盒子*/
}

div {
        width: 400px;
        height: 400px;
        border: 1px solid purple;
        background: #fff url(images/sun.jpg) no-repeat;
        background-position: 30px 50px; /* 背景图片更改位置 我用 background-position*/
}

 5.6清除元素的默认内外边距（重要）

• 代码：

* {
    padding: 0;    /* 清除内边距 */
    margin: 0;    /* 清除外边距 */
}

• 注意：
  • 行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距

5.7相邻元素垂直外边距的合并

      1.当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom

       2.下面的元素有上外边距margin-top，则它们之间的垂直间距不是margin-                   bottom与margin-top之和

       3.取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称              外距塌陷）

       4.解决方案：尽量只给一个盒子添加margin值

5.8嵌套块元素垂直外边距的合并（塌陷）

     1.对于两个嵌套关系的块元素，如果父元素没有上内边距及边框

     2.父元素的上外边距会与子元素的上外边距发生合并

     3.合并后的外边距为两者中的较大者

     4.解决方案：

           a.可以为父元素定义上边框

           b.可以为父元素定义上内边距

           c.可以为父元素添加overflow:hidden

           d.其他办法：浮动、固定、绝对定位的盒子不会有问题          

5.9去掉列表默认的样式

因为无序列表和有序列表前面默认的列表样式，在不同浏览器显示效果不一样。所以，我们一般上来就直接去掉这些列表样式。代码如下

li {list-style: none;}

拓展：

1.圆角边框（CSS3）

border-radius: length;

• 其中每一个值可以为数值或百分比的形式
• 技巧：让一个正方形变化圆圈

border-radius: 50%;

•  
•  上面效果图矩形的圆角，就不要用百分比了，因为百分比会是高度和宽度的一半
• 而我们这里矩形就只用高度的一半就好，精确单位

2.盒子模型

• 语法

box-shadow: 2px 2px 2px 2px rgba(0,0,0,.3)

/*box-shadow: 水平阴影  垂直阴影  模糊距离(虚实)  阴影尺寸(影子大小)  阴影颜色  内/外阴影；*/

• 前两个属性是必须要写的，其余可以省略。
• 外阴影(outset)是默认的 但是不能写 
• 想要内阴影可以写inset