div+css的引用形式+定位+浮动

来源：互联网发布：凯驰吸尘器知乎编辑：程序博客网时间：2024/05/28 17:07

CSS层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

一、如何引用css样式？有3种方式可引用

①直接在元素上添加一个style属性

<html lang="en"><head></head><body><div style="color: red;text-align: center;">第一种引入方式，字体红色，居中</div></body></html>

②在文件中添加style标签

<html lang="en"><head>    <style>        p{            color:blue;            text-align:center;        }    </style></head><body><p>第二种引入方式，字体蓝色，居中</p></body></html>

③引入css文件

新建一个h1.css文件：

h1{    color: pink;    text-align: center;}

在html文件中使用link语句，链接h1.css文件：

<html lang="en"><head></head><link rel="stylesheet" href="h1.css"><body><h1>第三种引用方法css</h1></body></html>

二、div+css定位

层叠式样式的定位，position中有两个非常重要的属性：absolute（绝对的）、relative（相对的）

absolute：将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过css z-index(即元素的堆叠顺序)属性定义。此时对象不具有边距，但仍有补白和边框
relative ：对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置

下面将使用relative、absolute分别布置一个简单页面：

①relative相对位置：因为页面中有三个div，彼此不可重叠，要想达到下图的效果就要不断“细微调整”才能达到目的。

<html lang="en"><head>    <style>        body{            margin: 0px;        }        #d1{            width:100%;            height: 50px;            background-color: black;            color: white;        }        #d2{            width:20%;            height: 800px;            background-color: green;            color: white;        }        #d3{            position: relative;            width:80%;            left:20%;            height:800px;            top: -800px;;            background-color: pink;            color: white;        }    </style></head><body><div id="d1">顶部栏</div><div id="d2">导航栏</div><div id="d3">内容展示</div></body></html>

②absolute绝对位置：多用于解决多对象的布局，一个页面中小对象太多，对位置的调整会变得很困难，

如果使用absolute定位，相对容易达到想要的效果，而且不会干扰到其他对象的位置。

注意：absolute是以浏览器的左上角为原点，再适当加以top、right、bottom、left属性来控制对象的位置

<html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title><style>    body{        margin:0px;        background: blue;    }    #d1{        left:10%;        position: absolute;        color: white;    }    #d2{        top:10%;        position: absolute;        color: white;    }</style></head><body><div id="d1"><img src="花.jpg"></div><div id="d2"><img src="花.jpg"></div></body></html>

最上层的对象是d2，底层的是d1：

三、浮动

float是css样式中的定位属性，用于设置标签对象
（如：<div>标签盒子、<span>标签、<a>标签、<em>标签等html标签）的浮动布局，
浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。

以下演示浮动框的效果：锁定在浏览器的左边，不会因滚动条的滑动而发生位置变动

<html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        body{            margin:0px;        }        #d1{            height:2000px;            width: 100%;        }        #d2{            background-color: blue;            height:150px;            width: 49%;            float: left;            position: fixed;            clear: right bottom;        }    </style></head><body><div id="d1">    <div id="d2">我是浮动框</div>    Stockholm, Sweden (CNN)With its brick and pastel-colored mid-rise apartment blocks, neatly-paved square and tree-lined streets, Rinkeby could be just about any town in Sweden.    Take a closer look, though, and you notice the Arabic signs in shop windows, overhear conversations in Kurdish, and see many faces of people of Somali descent.    On the surface, it may feel a world away from other troubled immigrant neighborhoods in Europe -- Molenbeek in Brussels, say, or the banlieues of Paris -- but Rinkeby, however well-kept, has its problems too.    Riots spark debate in Sweden</div></body></html>

滚动后，浮动框仍然在原位，其应用场景就是我们常见的广告栏：

1 0