web前端小白入门笔记6

css笔记

Div和Span标签
div标签一般用于配合css完成网页的基本布局。
Span标签一般用于配合css修改网页中的一些局部信息
显示模式
在HTML中HTML将所有的标签分为两类, 分别是容器级和文本级。
常见容器级的标签: div h ul ol dl li dt dd ...
常见文本级的标签:span p buis stong em ins del ...
CSS中CSS也将所有的标签分为两类, 分别是块级元素和行内元素(其实还有一类, 行内块级)。
块级元素会独占一行，行内元素不会独占一行。
常见块级元素: p div h ul ol dl li dt dd
常见行内元素: span buis strong em ins del
背景图片

可以通过background-image: url();设置背景图片，图片的地址必须放在url()中, 图片的地址可以是本地的地址, 也可以是网络的地址。如果图片的大小没有标签的大小大, 那么会自动在水平和垂直方向平铺来填充。如果网页上出现了图片, 那么浏览器会再次发送请求获取图片。
背景平铺
可以通过background-repeat属性控制背景图片的平铺方式的。
取值：repeat 默认, 在水平和垂直都需要平铺；
no-repeat 在水平和垂直都不需要平铺；
repeat-x 只在水平方向平铺；
repeat-y 只在垂直方向平铺。
例：

       <style>
    div{
            width: 500px;
            height: 500px;
        }
        .box1{
         background-color: blue;
            background-image: url(images/girl.jpg);
            background-repeat: repeat-x;
        }
</style>
<div class="box1"></div>  

背景定位
可以用 background-position，就是专门用于控制背景图片的位置。可以应用在当图片比较大的时候, 可以通过定位属性保证图片永远居中显示。
格式:background-position: 水平方向 垂直方向;
取值：水平方向: left center right
垂直方向: top center bottom
水平方向和垂直方向也可以是具体的像素
具体的像素是可以接收负数的 ，但是一定要写单位(px);
例如:

 background-position: 100px -200px;

背景属性连写
和font属性一样, background属性也可以连写。
格式：
background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;
其中一个都可以被忽略。
背景关联
默认情况下背景图片会随着滚动条的滚动而滚动， 如果不想让背景图片随着滚动条的滚动而滚动， 那么我们就可以修改背景图片和滚动条的关联方式。就是用background-attachment的属性， 这个属性就是专门用于修改关联方式的。
格式：
background-attachment：scroll；
取值：
scroll 默认值， 会随着滚动条的滚动而滚动
fixed 不会随着滚动条的滚动而滚动
插入图片和背景图片的区别
背景图片仅仅是一个装饰, 不会占用位置；插入图片会占用位置
背景图片有定位属性, 所以可以很方便的控制图片的位置；插入图片没有定位属性, 所有控制图片的位置不太方便
插入图片的语义比背景图片的语义要强, 图片想被搜索引擎收录, 那么推荐使用插入图片。
css精灵
CSS精灵图是一种图像合成技术, 全称CSS Sprite
可以减少请求的次数, 以及可以降低服务器处理压力
CSS的精灵图需要配合背景图片和背景定位来使用。
例：

<style>
        .box{
            width: 56px;
            height: 76px;
            background-image: url(images/weibo.png);
            background-position: -457px -54px;
        }
    </style>
    <div class="box"></div>