web前端之CSS设计指南一：定位元素

来源：互联网发布：php 编译 with zlib 编辑：程序博客网时间：2024/04/29 04:52

web前端之CSS设计指南一：定位元素

为文档添加样式的三种方法：
行内样式：
行内样式是写在特定HTML标签的style属性里面的，比如：

<p style="font-size:12px;font-weight:bold;...">I am fzw</p>

嵌入样式：
嵌入的CSS样式是放在HTML文档的head元素中的，比如：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>CSS工作原理</title>    <style>    h1{        font-size:16px;    }    p{        color:blue;    }    </style></head>

嵌入样式的应用范围仅限于当前页面。页面样式会覆盖外部样式表中的样式，但是会被行内样式覆盖。像书本前面例子中那样使用前如方法为某个组件（比如菜单）设计样式是很方便的，因为HTML和CSS同一页，可以互相参照。但是，如果CSS样式设计完毕，组件功能齐全之后，还是应该把相应的样式转移到外部样式表，以便其他页面公用这个样式。

链接样式：

<link rel="stylesheet" type="text/css" href="xx.css">

链接样式的作用范围可以使整个网站，只要使用link标签把样式表链接到每个页面，相应的页面就可以使用其中的样式。随后，只要修改了样式表中的样式，改动就会在所有被选中的元素上体现出来，无论这个元素在哪个页面。这样，既可以做到全站页面外观统一，又便于整站样式更新。

除了上面三种方法，也可以在链接样式里面应用@import指令
@import url(css/style2.css)
要注意的是， @import 指令必须出现在样式表中其他样式之前，否则@import 引用的样式表不会被加载。

CSS设计了float属性的主要目的是为了实现文本环绕图片的效果，然而，这个属性居然也成了创建多栏布局最简单的方式。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>定位元素</title>    <style type="text/css">    body{        width:300px;    }    p{        margin: 0;        border: 1px solid red;    }    img{        float: left;        margin: 0 4px 4px 0;    }    </style></head><body>    <img src="1.jpeg">    <p>嵌入样式的应用范围仅限于当前页面。页面样式会覆盖外部样式表中的样式，但是会被行内样式覆盖。像书本前面例子中那样使用前如方法为某个组件（比如菜单）设计样式是很方便的，因为HTML和CSS同一页，可以互相参照。但是，如果CSS样式设计完毕，组件功能齐全之后，还是应该把相应的样式转移到外部样式表，以便其他页面公用这个样式。</p></body></html>

p元素中再添加一个float: left;属性，就可以看到这两个东西分栏了。

围住浮动元素的三种方法：下面这样我们能够看到，footer顶上来了，那么如何处理呢？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>定位元素</title>    <style type="text/css">    section{        border: 1px solid blue;        margin: 0 0 10px 0;    }    p{        margin: 0;    }    img{        float: left;    }    footer{        border: 1px solid red;    }    </style></head><body>    <section>        <img src="1.jpeg">        <p>嵌入样式的应用范围仅限于当前页面。页面样式会覆盖外部样式表中的样式，但是会被行内样式覆盖。像书本前面例子中那样使用前如方法为某个组件（比如菜单）设计样式是很方便的，因为HTML和CSS同一页，可以互相参照。但是，如果CSS样式设计完毕，组件功能齐全之后，还是应该把相应的样式转移到外部样式表，以便其他页面公用这个样式。</p>    </section>    <footer>        Here is footer    </footer></body></html>

第一种方法：为父元素应用 overflow:hidden，以强制它包围浮动元素。
overflow:hidden 声明的真正用途是防止包含元素被超大内容撑大。应用overflow:hidden 之后，包含元素依然保持其设定的宽度，而超大的子内容则会被容器剪切掉。除此之外， overflow:hidden 还有另一个作用，即它能可靠地迫使父元素包含其浮动的子元素。

第二种方法：同时浮动父元素，促使父元素包括其浮动子元素的浮动。

方法三：添加非浮动的清除元素
给父元素的最后添加一个非浮动的子元素，然后清除该子元素。由于包含元素一定会包围非浮动的子元素，而且清除会让这个子元素位于（清除一侧）浮动元素的下方，因此包含元素一定会包含这个子元素——以及前面的浮动元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>定位元素</title>    <style type="text/css">    section{        border: 1px solid blue;        margin: 0 0 10px 0;    }    .content:after{        content:'';        display: block;        clear:both;    }    p{        margin: 0;    }    img{        float: left;    }    footer{        border: 1px solid red;    }    </style></head><body>    <section class="content">        <img src="1.jpeg">        <p>嵌入样式的应用范围仅限于当前页面。页面样式会覆盖外部样式表中的样式，但是会被行内样式覆盖。像书本前面例子中那样使用前如方法为某个组件（比如菜单）设计样式是很方便的，因为HTML和CSS同一页，可以互相参照。但是，如果CSS样式设计完毕，组件功能齐全之后，还是应该把相应的样式转移到外部样式表，以便其他页面公用这个样式。</p>    </section>    <footer>        Here is footer    </footer></body></html>

定位：CSS 布局的核心是 position 属性。
定位：CSS 布局的核心是 position 属性。
position属性：static、relative、absolute、fixed，默认值是static。解释

背景位置：
用于控制背景位置的background-position属性，是所有背景属性中最复杂的。background-position属性有 5个关键字值，分别是 top、left、bottom、right和 center，

1 0