定位

关于定位 
我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：

  • relative 生成相对定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移
  • absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
  • fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
  • static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性
  • inherit 从父元素继承 position 属性的值

定位元素特性 
绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素

定位元素层级 
定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级

典型定位布局 
1、固定在顶部的菜单
2、水平垂直居中的弹框
3、固定的侧边的工具栏
4、固定在底部的按钮

background属性

属性解释 
background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：

  • background-color 设置背景颜色
  • background-image 设置背景图片地址
  • background-repeat 设置背景图片如何重复平铺
  • background-position 设置背景图片的位置
  • background-attachment 设置背景图片是固定还是随着页面滚动条滚动

实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，这里面的“#00ff00”是设置background-color；“url(bgimage.gif)”是设置background-image；“no-repeat”是设置background-repeat；“left center”是设置background-position；“fixed”是设置background-attachment，各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。

举例：
下面这些例子使用下面这张图片做为背景图：

相关代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test background</title>

    <style type="text/css">

        .backshow{

            width:320px;

            height:160px;

            border:3px solid #333;

            float:left;

            margin:10px;

        }

        .bg1{background:cyan url(bg.jpg);}

        .bg2{background:cyan url(bg.jpg) repeat-x;}

        .bg3{background:cyan url(bg.jpg) repeat-y;}

        .bg4{background:cyan url(bg.jpg) no-repeat;}

        .bg5{background:cyan url(bg.jpg) no-repeat left center;}

        .bg6{background:cyan url(bg.jpg) no-repeat right center;}

    </style>

</head>

<body>

    <div class="backshow bg1"></div>

    <div class="backshow bg2"></div>

    <div class="backshow bg3"></div>

    <div class="backshow bg4"></div>

    <div class="backshow bg5"></div>

    <div class="backshow bg6"></div>

</body>

</html>

例子说明：
代码中使用到的背景图片，可以直接在页面上的背景图片上点右键另存下来，命名为：“bg.jpg”，并且和网页文件存在同一个目录下。

关于背景图片的background-position的设置，设置背景图片水平位置的有“left”、“center”、“right”，设置背景图片垂直位置的有“top”、“center”、“bottom”，水平和垂直的属性值两两组合，就可以把背景图设置到对齐盒子的四个角或者四个边的中心或者盒子的正中心位置。还可以设置具体的像素值来把背景图片精确地定位到盒子的某个位置，特别是对于背景图片尺寸大于盒子尺寸的这种情况，我们可以用数值定位，截取大图片的某一块做为盒子的背景。

比如说，我们想把下边的盒子用右边的图片作为背景，并且让背景显示图片中靠近底部的那朵花：

用上面中间那张图片作为左边那个比它尺寸小的盒子的背景，如果不设置background-position，默认背景图的左上角会和盒子的左上角对齐，如果设置，可以用两个数值定位背景图，上面右边的实现效果设置为：“background:url(location_bg.jpg) -110px -150px”，第一个数值表示背景图相对于自己的左上角向左偏移110px，负值向左，正值向右，第二个数值表示背景图相对于自己的左上角向上偏移150px，负值向上，正值向下。

实现原理示意图：

对应代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test background</title>

    <style type="text/css">

        .backshow{

            width:320px;

            height:160px;

            border:3px solid #333;

            float:left;

            margin:10px;

        }

        .bg{width:94px;

            height:94px;

            border:3px solid #666;

            background:url(location_bg.jpg) -110px -150px;

        }

    </style>

</head>

<body>

    <div class="bg"></div>

</body>

</html>

CSS（五）的更多相关文章

  1. CSS 五种方式实现 Footer 置底

    CSS 五种方式实现 Footer 置底   页脚置底(Sticky footer) 就是让网页的footer部分始终在浏览器窗口的底部. 当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推 ...

  2. css五种定位方式介绍

    1.static定位(普通流定位) -------------- 默认定位 2.float定位(浮动定位) 例:float:left; 有两个取值:left(左浮动)和right(右浮动).浮动元素会 ...

  3. Css五种定位之间的区别

    ##CSS 定位机制## CSS 有三种基本的定位机制:普通流.浮动流和定位流. 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定. 块级 ...

  4. CSS五种方式实现 Footer 置底

    页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部.当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部:但如果网页内容不够长,置底的页脚就会保 ...

  5. 豪情-CSS解构系列之-新浪页面解构-02

    前言 一.开发工具 - 前端四大利器 1. WebStorm 1). 岂今为止,业界公认的前端开发利器.优点: 2). 缺点 3). 相关资源 4). 后续展望 2. Photoshop 1).基本信 ...

  6. 前端css框架SASS使用教程（转）

    一.什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 本文总结了SASS的主要用法.我的目标是,有了这篇文章,日常的一 ...

  7. 常用[js,css,jquery,html]

    目录: 一.javascript事件和属性 二.jquery事件和方法 三.js 四.css 五.html 六.js操作cookies 七.插件 javascript事件和属性 事件 onblur   ...

  8. SCSS（SASS、CSS）学习

    看的这篇文章 http://www.frostsky.com/2014/07/sass-scss/ 写的还比较清晰 SASS是CSS3的一个扩展,增加了规则嵌套.变量.混合.选择器继承等等.通过使用命 ...

  9. sass编译css(转自阮一峰)

    一.什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 本文总结了SASS的主要用法.我的目标是,有了这篇文章,日常的一 ...

  10. CSS预处理器之SASS用法指南

    CSS预处理器之SASS用法指南 一.什么是SASS Sass是是一种基于ruby编写的CSS预处理器,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 诞生于200 ...

随机推荐

  1. python去除html标签的几种方法

    import re from bs4 import BeautifulSoup from lxml import etree html = '<p>你好</p><br/& ...

  2. SpringCloud笔记五：Feign

    目录 什么是Feign? 有了Ribbon我还要Feign干嘛? 新建consumer-feign 修改api项目 引入Maven文件 新建feign的接口 启动项目 报错 发泄发泄心情,一个段落 什 ...

  3. springboot2 pagehelper 使用笔记

    作者:cnJun 博客专栏: https://www.cnblogs.com/cnJun/ pom.xml <parent> <groupId>org.springframew ...

  4. NOI-OJ 2.2 ID:3089 爬楼梯

    整体思路 这是一个典型的递归型问题: 临界点:如果只有1级台阶,有1种走法(一次一步):如果有2级台阶,则有2种走法(一次一步或一次两步) 递归方法,对于n级台阶,如果第一次走1步,还剩n-1级台阶, ...

  5. PYTHON语言之常用内置函数

    一 写在开头本文列举了一些常用的python内置函数.完整详细的python内置函数列表请参见python文档的Built-in Functions章节. 二 python常用内置函数请注意,有关内置 ...

  6. [Android] Android 锁屏实现与总结 （一）

    实现锁屏的方式有多种(锁屏应用.悬浮窗.普通Activity伪造锁屏等等).但国内比较主流并且被广泛应用的Activity伪造锁屏方式. 实例演示图片如下: 系列文章链接如下: [Android] A ...

  7. DUMP102 企业级电商FE

    101 完成 webpack 配置后,有一套类似 live-reload 自动刷新提供 REPL 环境. [配置 webpack.config.js 别名,方便 js 文件做require 支持路径别 ...

  8. SpringMVC核心类和注解

    springMVC最重要的就是前端控制器DispatchServlet了.他是整个springMVC应用的核心. 需要将它配置在web.xml中. 1.DispatchServlet的配置 <! ...

  9. Highcharts开发图表

    1.折线图 显示一个静态的折线图,显示如下数据 星期 温度 周一 9~14 周二 4~10 周三 1~7 周四 4~9 周五 5~11 周六 8~13 周天 7~10 新建demo1.html < ...

  10. ADO五大对象

     ADO.NET五大对象, 1. Connection:与数据源建立连接. 2. Command:对数据源执行SQL命令并返回结果. 3. DataReader:读取数据源的数据,只允许对将数据源以只 ...