CSS第二节
div做页面布局的建议
把整个网页从上到下分成若干块（一般分三块：头，中间，尾部）,每一块都按下面的思路
先写第一层，可以设置背景色，或者高度和垂直居中（line-height保证内容不超出高度），不设高度，这个div的高度由内容撑起来
再写第二层，这个可以设置一个宽度=像素的值，这样整个内容就在这个区域内，如果页面宽度太小，页面下方会出现滚动条，不会造成内容混乱
第三次可以开始写你的内容，可以继续用div或者别的标签，宽度可以用百分比，也可以用像素，如果用了float，要使用clear
<body> <div class="lv1" style="background-color: #dddddd;height: 48px;line-height: 48px;"> <div class="lv2" style="width: 800px;"> <div style="width: 30%;float: left;">左边的内容</div> <div style="width: 70%;float: left;">中间的内容</div> <div style="clear: both;"></div> </div> </div>
CSS样式重用
可以给一个标签设置多个class值，可以为每个class应用一个样式，标签有多个class,就可以应用多个样式
要设置多个class，只需在class名间加空格即可
<style> 如果整个页面的宽度 > 900px时： { .c{ 共有 } .c1{ 独有 } } .c2{ 独有 } </style>
实例如下：
.c1 { background-color: aliceblue; height: 40px; width: 60px; } .c2 { width: 40px; } .c3 { border: 1px pink dotted; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="common.css"/> </head> <body> <div class="c1">c1</div> <div class="c2">c2</div> <div class="c3">c3</div> <div class="c1 c2">c1 c2</div> <div class="c1 c3">c1 c3</div> <div class="c1 c2 c3">c1 c2 c3</div> </body> </html>
img标签的优化
在a标签里的img标签（图片），可能在IE上打开的时候，在最外面有一圈蓝色的边框。这个边框的颜色是超链接字体的颜色，只需要写个img标签选择器，设置border为0，
<head> <meta charset="UTF-8"> <title>Title</title> <style> img { border: 0px; } </style> </head> <body> <a href="https://www.cnblogs.com/Aline2/"> <img src="mv.jpg" /> </a> </body>
定位-position
fixed-固定在窗口的某个位置，一直在浏览器上显示
position: fixed; 固定在窗口的某个位置，结合top,left,right,bottom固定位置，使用position后，会让块级标签变为行内标签，我们需要设置left,top等属性撑满，并且该标签是浮在页面上的。
如下实例为在页面右下角放置返回按钮的实例：
<body style="margin: 0 auto"> <div style="width: 50px;height: 50px;background-color: #dddddd; color: yellow;position: fixed;right: 0;bottom: 0">返回顶部</div> <div style="background-color: lightskyblue;height: 5000px"></div> </body>
菜单始终置顶实例
<body style="margin: 0 auto"> <div style="height: 50px;background-color: #dddddd; color: yellow;position: fixed;top: 0;right: 0;left: 0">菜单</div> <div style="background-color: lightskyblue;height: 5000px;margin-top: 50px">内容</div> </body>
absolute-绝对定位
一般配合relative一起使用，单独只设置relative不起任何作用，
这个和fixed都是决定定位。所以主要来看看和fixed的差别。将上面的实例由fixed改为 absolute ，会发现标签是随着滚动条移动的，不会一直显示在窗口上
应用场景;
将某个标签定位在父标签里面
<body> <div style="position: relative;width: 400px;height: 200px;border: 1px solid red;margin: 0 auto"> <div style="position: absolute;width: 50px;height: 50px;background-color: #dddddd; left: 0;bottom: 0"></div> </div> <div style="position: relative;width: 400px;height: 200px;border: 1px solid red;margin: 0 auto"> <div style="position: absolute;width: 50px;height: 50px;background-color: #dddddd; right: 0;bottom: 0"></div> </div> <div style="position: relative;width: 400px;height: 200px;border: 1px solid red;margin: 0 auto"> <div style="position: absolute;width: 50px;height: 50px;background-color: #dddddd; left: 0;top: 0"></div> </div> </body>
溢出处理-overflow
一般设置一个div的高度和宽度，而内容比宽高要大，就会出现溢出现象
如在一个div中放置一张图片，而不定义图片大小，此时图片会按照原图显示，不会出现显示的div的大小
<div style="height: 500px;width: 300px;"> <img src="mv.jpg" /> </div> <div style="background-color: red;">溢出</div>
此时就需要overflow属性了，这样不会改变原图的大小
在div中设置overflow：
overflow: hidden; 内容会被修剪或隐藏
overflow: auto; 浏览器会显示滚动条以便查看其余内容
overflow: scroll; 和auto一样
然而实际应用中可以在图片标签中加宽高来实现，应此更多应用于文字上
<div style="background-color: #dddddd;height: 100px;width: 150px;overflow: auto;"> 这个属性定义溢出元素内容区的内容会如何处理。 如果值为 scroll 或 auto，则会提供一种滚动机制。 如果值为 hidden，则溢出的部分会被修剪并隐藏。 默认值是 visible。 </div>
hover 伪类
当鼠标移动到元素上时，才会生效的css样式，
<head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ height: 48px; line-height: 48px; background-color: #dddddd; position: fixed; left: 0; right: 0; top: 0; } .pg-body{ margin-top: 48px; background-color: lightskyblue; } .m{ width: 100%; text-align: center; margin: 0 auto; } .pg-header .menu{ color: aqua; padding: 0 10px; } .pg-header .menu:hover{ color: red; background-color: green; } </style> </head> <body style="margin: 0 auto"> <div class="pg-header"> <div class="m"> <a class="menu">增加</a> <a class="menu">删除</a> <a class="menu">修改改</a> <a class="menu">查寻</a> </div> </div> <div class="pg-body"> <div class="m">以下为主要内容</div> </div> </body>
背景图片-background
<div style="background-image: url('1.png');height: 800px;width: 1900px;">
默认背景图片会平铺整个div，并且图片的比例不变，多余的会被裁减
限制平铺的方向
<div style="background-image: url('1.png');height: 800px;width: 1900px;background-repeat: repeat-y;"> #垂直方向平铺
background-repeat: no-repeat ：不允许平铺background-repeat: repeat-x ：横向平铺background-repeat: repeat-y ：纵向平铺
定位背景图（抠图）
主要使用：
background-position
需要实现只显示其中的一个图标，图片宽高都是20px,
设计如下：
<div style="background-image: url('icon_18_118.png');background-repeat: no-repeat; border: 1px solid darkgray;height: 20px;width: 20px; background-position-y: -40px;">
</div>
background-position-y: 垂直偏移量
background-position-x: 水平偏移量
也可以直接使用 background-position：0 -20px表示，参数分别为水平偏移和垂直偏移
以上关于背景图的参数都可以简写成
background: url(1.png) 1px -119px no-repeat; ，图片路径、纵向位移、横向位移、是否平铺。
像这样的把多张图片放一起的好处是：一次请求能获取多个图标，减少了客户端和服务的的交互，而如果是每个图标弄张图片，就需要每次发送一个请求练习
实现如下网页，将图片放在输入框的右侧
分析：需要分两层，一层是输入框，第二层是图标，需要用绝对定位让图标悬浮在输入框右侧
代码：
<body> <div class="m" style="height: 40px;width: 350px;position: relative;"> <form action=""> user:<input type="text" style="height: 40px;width: 250px;padding-right: 30px" /> <span style="display:inline-block;background: url('2.png') no-repeat ; height: 30px;width: 30px;position: absolute;right: 35px;top: 10px"> </span> </form> </div> </body>
先设置外面div的宽高，
再设置输入框
最后设置背景图片的大小，位置等
这里需要注意的是输入框的内容，因为图标悬浮在输入框中应此会挡住一部分内容，这里就需要设置内容的宽度了，内容宽度+图标宽度不能超过输入框的宽度
