定位

关于定位 
我们可以使用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. Linux设备树(三 属性)

    三 属性(property) device_type = "memory"就是一个属性,等号前边是属性,后边是值.节点是一个逻辑上相对独立的实体,属性是用来描述节点特性的,根据需要 ...

  2. nginx缓存设置（expires）

    一.expires功能说明 nginx缓存的设置可以提高网站性能,对于网站的图片,尤其是新闻网站,图片一旦发布,改动的可能是非常小的,为了减小对服务器请求的压力,提高用户浏览速度,我们可以通过设置ng ...

  3. 分布式监控系统开发【day38】:监控trigger表结构设计（一）

    一.需求讨论 1.zabbix触发器的模板截图 1.zabbix2.4.7 2.zabbix3.0 2.模板与触发器关联的好处 好处就是可以批量处理,比如我说我有1000机器都要监控cpu.内存.IO ...

  4. Entity Framework入门教程（4)---EF中的实体关系

    这一节将总结EF是怎么管理实体之间的关系.EF与数据库一样支持三种关系类型:①一对一 ,②一对多,③多对多. 下边是一个SchoolDB数据库的实体数据模型,图中包含所有的实体和各个实体间的关系.通过 ...

  5. NOI-OJ 1.13 ID:5 素数回文数的个数

    整体思路 使用埃拉拖色尼算法提前计算出1000以内的素数表. 设计一个回文判断函数isHW(int n),难点在于数字回文的判断.一个简单的方法是将数字n使用sprintf输出在一个数组中,然后从数组 ...

  6. [物理学与PDEs]第4章第1节 引言

    1.  本章讨论可燃流体在流动过程中同时伴随着燃烧现象的情况. 2.  燃烧有两种, 一种是爆燃 (deflagration): 火焰低速向前传播, 此时流体微元通常是未燃气体.已燃气体的混合物; 一 ...

  7. Jquery+php 动态web表单增删改查

    如这类效果: 例一:简单 <html> <head> <meta http-equiv="content-type" content="te ...

  8. 16、使用limit offset 分页时，为什么越往后翻越慢？如何解决？

    在mysql中limit可以实现快速分页,但是如果数据到了几百万时我们的limit必须优化才能有效的合理的实现分页了,否则可能卡死你的服务器哦. 当一个表数据有几百万的数据的时候成了问题! 如 * f ...

  9. 基于 Webhooks gitlab 自动化构建

    基于gitlab webhooks 自动构建流程 1.服务器安装 git 服务 安装成功 配置 PHP 脚本: <?php // 接受头部信息 if (!isset($_GET['youpara ...

  10. 20175204 张湲祯 2018-2019-2《Java程序设计》第二周学习总结

    20175204 张湲祯 2018-2019-2<Java程序设计>第二周学习总结 教材学习内容总结 -第二章基本数据类型与数组要点: -标识符与关键字:标识符的第一个字符不能是数字字符: ...