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