[19/06/07-星期五] CSS基础_布局&定位&背景样式
一、固定布局（不适应设备的浏览器的变化）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单布局</title>
<style type="text/css">
/*清除默认样式*/
*{
margin: 0;
padding: 0;
}
.header{
width: 1000px;
height: 100px;
background-color: yellowgreen;
margin: 0 auto;
}
.content{
width: 1000px;
height: 400px;
background-color: orange;
margin: 10px auto;
}
.left{
width: 200px;
height: 100%;
background-color: skyblue;
/*设置向左浮动*/
float: left;
}
.center{
width: 580px;
height: 100%;
background-color: royalblue;
float: left;
margin: 0 10px; }
.right{
width: 200px;
height: 100%;
background-color: cyan;
float: left;
}
.footer{
width: 1000px;
height: 100px;
background-color: salmon;
margin: 0 auto;
} </style>
</head>
<body>
<!--头部信息-->
<div class="header"> </div> <!--主体内容-->
<div class="content">
<!--左中右3个div-->
<div class="left"> </div>
<div class="center"> </div>
<div class="right"> </div>
</div> <!--底部信息-->
<div class="footer"> </div> </body>
</html>
扩展：高度塌陷
在文档流中，父元素的高度默认被子元素撑开，也就是子元素多高，父元素就多高。
在浮动流中，当为子元素设置浮动以后，子元素会完全脱离文档流，此时会导致子元素无法撑起父元素的高度，即会导致父元素的塌陷。由于父元素的高度塌陷，所以
会导致父元素下边的元素向上移动，这样页面会很混乱。所以一定要避免高度塌陷。
解决方案1：可以将父元素的高度写死，但是这样父元素的高度不能自动适应子元素高度的改变。所以这种方案不推荐。
解决方案2：
根据W3C的标准，在页面中的元素都有一个隐含的属性叫Block Formatting Context 简称BFC，该属性可以打开或关闭，默认是关闭的。
当设置开启之后，元素会具有如下的特性：
1、父元素的垂直外边距不会和子元素重叠。
2、开启BFC的元素不会被浮动元素所覆盖；
3、开启BFC的元素可以包含浮动的子元素。
如何开启？（只能间接开启）
1、设置元素浮动（即让父元素也浮动起来）：可以撑开高度，但是可以导致父元素的宽度丢失，而且也会导致下边元素上移
2、设置元素的绝对定位：跟方案1一样效果
3、设置元素为inline-block：可以解决问题，但是也是导致父元素的宽度丢失。
4、将元素的overflow设置为一个非visible的值。一般设置为auto或hidden是最好的方案，推荐设置为hidden，副作用最小。
注意：IE6及以下不支持BFC,它具有一个隐含属性叫haslayout，作用和BFC类似，可以开启这个。
开启方式：直接将元素的zoom（放大）设置为1即可，副作用最小。zoom： 1 表示不放大元素，可以使用这种方式。只在IE中支持，其他不支持。
解决方案3：
前言：如何清除浮动的影响？
使用clear来清除其他浮动元素（上边元素）对当前元素（下边元素）的影响（即下边往上移动），其他元素该浮动还浮动，下边的不动即在原来的位置。
none：默认值，不清除浮动
left：清除左侧浮动
right：清除右侧浮动
both：清除两侧浮动元素对当前元素的影响，即清除对他影响最大的元素的浮动
可以在高度塌陷的父元素后边，添加一个空白的div,由于这个div没有浮动，可以撑开父元素的高度，然后再对它清除浮动，这样可以通过这个空白的div撑开高度，
基本没有副作用。使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。
通过after伪类，选中父元素的后边添加一个空白的块元素，然后清除浮动，原理跟div一样，效果一样，而且不会添加多余的div，最推荐的方式。在IE6不支持，所以
还需要使用haslayout来处理。
二、定位
指的是将指定的元素摆放在页面的任意位置。通过position属性来设置
可选值： static，默认值，元素没有开启定位
relative，元素开启相对定位
absolute，元素开启绝对定位
fixed，元素开启固定定位（也是绝对定位的一种）
当开启定位时，可以通过left、right、top、bottom来设置（是相对于自身定位位置的）左侧、右侧、上侧、下侧设置偏移量。通常只使用2个偏移量就可以对元素
定位。一般选择水平和垂直方向的偏移量来为元素定位。相对于自身定位的。
1、相对定位（relative）
当开启相对定位但是不设置偏移量时，元素不会产生任何变化。
相对定位的元素不会脱离文档流。
相对定位会使元素提升一个层级。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
position: relative;
left: 100px;/*开启左偏移，是相对于自身所在位置*/
}
.box3{
width: 200px;
height: 200px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<!--div.box$*3 快捷键 创建3个div名字叫box1-3 -->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
2、绝对定位（absolute）
绝对定位会使元素脱离文档流。
开启绝对定位如果不设置偏移量，元素的位置不会发生变化。
绝对定位是相对于窗口的左上角，即浏览器窗口的左上角坐标是（0，0），是相对于最左上角定位的。准确说是相对于离他最近的开启了定位的祖先
元素来定位的。如果祖先没有开启定位，是相对于浏览器窗口来定位，一般开启子元素的定位都会开启父元素的定位。
绝对定位会提升一个层级，会改变元素的性质。
3、固定定位（fixed）
固定定位也是一种绝对定位，是种特殊的绝对定位。IE6不支持。
不同点：永远都会相对于浏览器窗口进行定位。固定定位会固定在浏览器的位置不会随着滚动条向下的移动而移动，如网站的广告，二维码。
【扩展】元素的层级和透明度
如果元素的层级一样，则下边的元素会盖住上边的元素，这里的上下指的是代码结构上的上下。
通过z-index属性来指定元素的层级，可以设置为一个正整数来指定层级。层级越高，即整数的数字越大，越优先显示。对于没有开启定位的元素则不能使用z-index。
父元素的层级再高也盖不住子元素。
通过opacity来设置元素背景的透明度，它需要一个0-1之间的值。0，完全透明；1，完全不透明；0.5，半透明。在IE8及以下的浏览器不支持，需要使用如下属性：
filter（滤镜）属性。filter：alpha（opacity=50）；50表示半透明，它需要一个0-100之间的值。
三、背景相关的样式
1、使用图片做网页的背景（属性： background-image: url(../img/zhifou.jpg); ）
2、设置背景图片的位置（background-position）
3、设置背景图片是否随着页面滚动（background-attachment）
简写样式：background #bfa center no-repeat; 中间空格隔开，没有没有顺序要求，也没有数量的要求。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景图片</title>
<style type="text/css">
.box1{
width: 500px;
height: 500px;
margin: 0 auto;
/*这里：如果背景图片大于指定的尺寸500*500，默认显示左上角的部分
要显示全部：1、把指定尺寸设置为图片的大小，即一样大就可以全部显示
* */
background-image: url(../img/zhifou.jpg);
/*如果背景图片小于指定尺寸，则把图片平铺，就是把图片多复制几个充满指定的尺寸。
* 可以同时为一个元素指定背景颜色和图片，这样背景颜色会作为背景图片的底色。
* 一般都会同时设置背景颜色和图片
*
* 如果不想让图片平铺？
* 采取background-repeat: no-repeat; 不让图片重复，有多大显示多大。
* 默认双方向重复
* repeat-x:背景图片水平方向重复
* repeat-y:背景图片垂直方向重复
*
*/ /* background-position:
* 调整背景图片在元素中的位置、可选值：left、right、top、bottom、center 选择其中的2个值
也可以使用具体偏移量
* */
background-position:left top ;/* 实际上就是9宫格，使用这5个值来确定*/
background-position:100px 100px ;
/*2个值表示水平和垂直偏移量，正数表示向右和向下，负数表示相反的方向*/ /*background-attachment:设置背景图片是否随着页面滚动
fixed:背景图片固定在某个位置，不随着页面滚动。 如博客的背景图片
scroll：默认值，背景图片随着窗口滚动
不随窗口滚动的图片一般设置给body * */
background-attachment: fixed; }
</style>
</head>
<body>
<div class="box1"> </div> </body>
</html>
四、把图片做为按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>按钮</title>
<style type="text/css">
.more{
display: block;/*将a转成块元素*/
width: 200px;
height: 200px;
background-image: url(../img/更多.png);
background-repeat:no-repeat ;
}
.phone{
display: block;
width: 48px;
height: 48px;
background-image: url(../img/phone_black_48.png);
}
.phone:hover{/*伪类：设置鼠标放到图片上有变化的 可以换张背景图*/
background-image:url(../img/phone_blue_48.png) ;
}
/*同理也可以设置active这个伪类，当点击图片时有变化*/
/*问题：
* 背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独发送一次请求。
*但是浏览器的外部资源不是同时加载的，用的时候才会去加载。但是加载有时间差，有段时间背景图片
* 无法显示，一般不会注意到。解决措施将2个图片整合成一个图片，这样可以将3个图片同时加载出来，
* 然后使用图片的偏移量来切换图片的显示位置，这种技术叫图片的整合技术(CSS-Sprite,雪碧图)
* 优点：
* 1、浏览器只需发送一次请求，提高访问效率，提高用户体验。
* 2、将多个图片整合成一张图片即雪碧图，减小了图片的大小。注意找好雪碧图中每个小图片的坐标。
*
* */
</style>
</head>
<body>
<a class="more" href="https://www.baidu.com/"> </a>
<a class="phone" href=""></a>
</body>
</html>
最新文章
- HBase Zookeeper 安装学习
- jQuery Panorama Viewer – 360度全景展示插件
- [PHP]swoole_server几个进程的分工
- Archlinux 添加无线网络
- session绑定线程
- 数据库备份还原工具EMS SQL Angel for SQL Server发布1.3版本
- MAC上的包管理利器
- PHP 5 Calendar 函数
- [已解决]python FileNotFoundError: [WinError 3] for getsize(filepath)
- @ResponseBody ResponseEntity
- CentOS6.5 切换 图形界面 与 命令行界面
- UI自动化（三）css优先级
- luogu P4198 楼房重建——线段树
- C++11 AUTO 类型实践
- Linux系统和性能监控之CPU篇
- 白话js this指向问题
- Jenkins 发布.NetCore 项目
- 在 arc里面打印 引用计数的方法
- redis windows dll 下载
- 20155339 第七周加分项目 mybash的实现