CSS详解
一.简介
CSS 指层叠样式表 (Cascading Style Sheets),外部样式表可以极大提高工作效率,外部样式表通常存储在 CSS 文件中,多个样式定义可层叠为一
二.CSS的引入方式
- 行内式
- 嵌入式
- 导入式
- 链接式
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!--行内样式--> <h1 style="background-color: aqua;color: brown">JD</h1>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--嵌入式--> <style> p{ color: red; font-size: 14px; } .t{ font-size: 20px; background-color: rosybrown; } a.t{ font-size: 30px; color: darkblue; } </style> </head> <body> <p>Hello</p> <div class="t"> Test </div> <a class="t">aaaaaaaa</a> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> @import "ex1.css"; </style> </head> <body> <p>Hello</p> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--css模块导入--> <link href="ex1.css" type="text/css" rel="stylesheet"> </head> <body> <p>Test</p> </body> </html>
当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?
一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表(位于 <head> 标签内部)
- 内联样式(在 HTML 元素内部)
因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:<head> 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)
三.CSS选择器
1.派生选择器
通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁
派生选择器允许你根据文档的上下文关系来确定某个标签的样式
例
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <!--派生选择器--> <head> <meta charset="UTF-8"> <title>Title</title> <style> li strong { font-style: italic; font-weight: normal; } </style> </head> <body> <p><strong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用</strong></p> <ol> <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li> <li>我是正常的字体。</li> </ol> </body> </html>
2. 组合选择器
E,F 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔 Div,p { color:#f00; }
2.1后代选择器
后代选择器(descendant selector)又称为包含选择器。
后代选择器可以选择作为某元素后代的元素
例:如果您希望只对 div 元素中的 p 元素应用样式,可以这样写
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <!--后代选择器--> <head> <meta charset="UTF-8"> <title>Title</title> <style> div p{ font-weight: bold; font-size: 19px; } </style> </head> <body> <div> <p>Hello</p> <br> World!!! </div> </body> </html>
2.2子元素选择器
与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素
当不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)
例:只想对div下的子div进行更改而非子元素下的div更改时
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> [test]{ color: blueviolet; } .he>div{ color: bisque; } </style> </head> <body> <div class="he">111 <p class="fr">222 <div>333</div> </p> <div>444</div> </div>
2.3相邻兄弟选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素
选择相邻兄弟
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)
例如:如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
h1 + p {margin-top:50px;}
这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”
相邻兄弟选择器使用了加号(+),即相邻兄弟结合符(Adjacent sibling combinator)
3.基础选择器
* : 通用元素选择器,匹配任何元素 * { margin:0; padding:0; }
E : 标签选择器,匹配所有使用E标签的元素 p { color:green; }
.info和E.info: class选择器,匹配所有class属性中包含info的元素 .info { background:#ff0; } p.info { background:blue; }
#info和E#info id选择器,匹配所有id属性等于footer的元素 #info { background:#ff0; } p#info { background:#ff0; }
注意嵌套规则:
- 块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。
- 块级元素不能放在p里面。
- 有几个特殊的块级元素只能包含内联元素,不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
- li内可以包含div
- 块级元素与块级元素并列、内联元素与内联元素并列。(错误的:<div><h2></h2><span></span></div>)
4.伪类
4.1锚伪类
在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态
a:link(没有接触过的链接),用于定义了链接的常规状态。
a:hover(鼠标放在链接上的状态),用于产生视觉效果。
a:visited(访问过的链接),用于阅读文章,能清楚的判断已经访问过的链接。
a:active(在链接上按下鼠标时的状态),用于表现鼠标按下时的链接状态
例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a {color:#000000;text-decoration:none;outline:none;} a:hover {color:#0000ff;text-decoration:underline;} </style> </head> <body> <a href="https://www.baidu.com">百度</a> </body> </html>
5.属性选择器
对带有指定属性的 HTML 元素设置样式
可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性
注释:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择
下面的例子为带有 p 属性的所有元素设置样式
[p]
{
color:red;
}
属性和值选择器 - 多个值
下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值
[title~=hello] { color:red; }
下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> [lang|=en] { color:red; } </style> </head> <body> <p lang="en">Hello!</p> <p lang="en-us">Hi!</p> <hr />
四.CSS样式
1.背景属性
背景色
可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值
例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <!--CSS背景属性--> <head> <meta charset="UTF-8"> <style type="text/css"> body {background-color: gray} p {background-color: rgb(250,0,255)} p.no2 {background-color: palegoldenrod; padding: 20px;} </style> </head> <body> <p>这是段落</p> <p class="no2">这个段落设置了内边距。</p> </body> </html>
背景图像
要把图像放入背景,需要使用 background-image 属性。background-image 属性的默认值是 none,表示背景上没有放置任何图像。
如果需要设置一个背景图像,必须为这个属性设置一个 URL 值
例
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <!--css背景图片--> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{margin: 0} p{background: url("mac.jpg"); width: auto; height: 1000px; } </style> </head> <body> <p></p> </body> </html>
背景重复
如果需要在页面上对背景图像进行平铺,可以使用 background-repeat 属性。
属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺
例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <!--背景重复--> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ background-image: url("a.png"); background-repeat: repeat; } </style> </head> <body> </body> </html>
背景定位
可以利用 background-position 属性改变图像在背景中的位置。
下面的例子在 body 元素中将一个背景图像居中放置
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}
为 background-position 属性提供值有很多方法。首先,可以使用一些关键字:top、bottom、left、right 和 center。通常,这些关键字会成对出现,不过也不总是这样。还可以使用长度值,如 100px 或 5cm,最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异
下面是等价的位置关键字:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> body{ background-image: url('a.png'); background-repeat: no-repeat; background-attachment:fixed; background-position: 50px 100px; } </style> </head> <body> <p><b>注释:</b>为了在 Mozilla 中实现此效果,background-attachment 属性必须设置为 "fixed"。</p> </body> </html>
CSS 背景属性
2.文本属性
CSS 文本属性可定义文本的外观。
通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等
缩进文本
通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值
例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <!--文本缩进--> <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ text-indent: 5em; color: red; font-weight: bold; } </style> </head> <body> <p>使用text-indent来实现文本缩进</p> </body> </html>
水平对齐
text-align 是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式
值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中
例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <!--水平对齐--> <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ text-align: center; color: red; font-weight: bold; } h1{ text-align: right; color: blue; font-weight: bold; } </style> </head> <body> <p>居中</p> <p>居中</p> <p>居中</p> <h1>居右</h1> <h1>居右</h1> </body> </html>
提示:将块级元素或表元素居中,要通过在这些元素上适当地设置左、右外边距来实现
字间隔
word-spacing 属性可以改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的
word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。为 word-spacing 设置一个负值,会把它拉近
例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <!--文本字间距--> <head> <style type="text/css"> p.spread {word-spacing: 30px;} p.tight {word-spacing: -0.5em;} </style> </head> <body> <p class="spread">This is some text. This is some text.</p> <p class="tight">This is some text. This is some text.</p> </body> </html>
字符转换
text-transform 属性处理文本的大小写
3.文本装饰
text-decoration 属性有 5 个值:
- none
- underline
- overline
- line-through
- blink
underline 会对元素加下划线,就像 HTML 中的 U 元素一样。overline 的作用恰好相反,会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线,等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁,类似于 Netscape 支持的颇招非议的 blink 标记
例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p.down{ text-decoration: underline; } p.up{ text-decoration: overline; } p.line{ text-decoration: line-through; } p.bk{ text-decoration: blink; } </style> </head> <body> <p class="down">我是下划线</p> <p class="up">我是上划线</p> <p class="line">我是贯穿线</p> <p class="bk">我会闪烁</p> </body> </html>
CSS 文本属性
4.字体属性
CSS 字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)
使用 font-family 属性 定义文本的字体系列
font-style 属性最常用于规定斜体文本
例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <!--字体属性--> <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ font-size: 25px; font-weight: bold; font-family: sans-serif; font-style: inherit; } </style> </head> <body> <p>字体样式</p> </body> </html>
5.链接属性
设置链接的样式
能够设置链接样式的 CSS 属性有很多种(例如 color, font-family, background 等等)。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
链接的四种状态:
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
当为链接的不同状态设置样式时,请按照以下次序规则:
- a:hover 必须位于 a:link 和 a:visited 之后
- a:active 必须位于 a:hover 之后
例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <!--导航栏--> <head> <meta charset="UTF-8"> <title>鲜果园</title> <style> @import "init_demo.css"; .u1{} li{ float:left; } a:link,a:visited{ display:block; width:120px; font-weight:bold; color:#FFFFFF; background-color:cornflowerblue; text-align:center; padding:4px; text-decoration:none; text-transform:uppercase; } a:hover,a:active{ background-color:#bebebe; } </style> </head> <body> <!--商城顶部--> <div> <ul> <li><a href="">八方资源网首页</a></li> <li><a href="">登录</a></li> <li><a href="">免费注册</a></li> <li><a href="">我的八方</a></li> <li><a href="">帮助</a></li> <li><a href="">投诉举报</a></li> </ul> </div> <!--商城中部--> </body> </html>
6.列表属性
要影响列表的样式,最简单(同时支持最充分)的办法就是改变其标志类型
列表属性
例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<html> <head> <meta charset="UTF-8"> <style type="text/css"> ul.none {list-style-type: none} ul.disc {list-style-type: disc} ul.circle {list-style-type: circle} ul.square {list-style-type: square} ul.decimal {list-style-type: decimal} ul.decimal-leading-zero {list-style-type: decimal-leading-zero} ul.lower-roman {list-style-type: lower-roman} ul.upper-roman {list-style-type: upper-roman} ul.lower-alpha {list-style-type: lower-alpha} ul.upper-alpha {list-style-type: upper-alpha} ul.lower-greek {list-style-type: lower-greek} ul.lower-latin {list-style-type: lower-latin} ul.upper-latin {list-style-type: upper-latin} ul.hebrew {list-style-type: hebrew} ul.armenian {list-style-type: armenian} ul.georgian {list-style-type: georgian} ul.cjk-ideographic {list-style-type: cjk-ideographic} ul.hiragana {list-style-type: hiragana} ul.katakana {list-style-type: katakana} ul.hiragana-iroha {list-style-type: hiragana-iroha} ul.katakana-iroha {list-style-type: katakana-iroha} </style> </head> <body> <ul class="none"> <li>"none" 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="disc"> <li>Disc 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="circle"> <li>Circle 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="square"> <li>Square 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="decimal"> <li>Decimal 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="decimal-leading-zero"> <li>Decimal-leading-zero 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="lower-roman"> <li>Lower-roman 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="upper-roman"> <li>Upper-roman 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="lower-alpha"> <li>Lower-alpha 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="upper-alpha"> <li>Upper-alpha 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="lower-greek"> <li>Lower-greek 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="lower-latin"> <li>Lower-latin 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="upper-latin"> <li>Upper-latin 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="hebrew"> <li>Hebrew 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="armenian"> <li>Armenian 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="georgian"> <li>Georgian 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="cjk-ideographic"> <li>Cjk-ideographic 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="hiragana"> <li>Hiragana 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="katakana"> <li>Katakana 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="hiragana-iroha"> <li>Hiragana-iroha 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="katakana-iroha"> <li>Katakana-iroha 类型</li> <li>茶</li> <li>可口可乐</li> </ul> </body> </html>
7. dispaly属性
- none
- block
- inline
8.边框属性
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度
例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> p { border: red solid thin; } p.dotted {outline-style: dotted} p.dashed {outline-style: dashed} p.solid {outline-style: solid} p.double {outline-style: double} p.groove {outline-style: groove} p.ridge {outline-style: ridge} p.inset {outline-style: inset} p.outset {outline-style: outset} </style> </head> <body> <p class="dotted">A dotted outline</p> <p class="dashed">A dashed outline</p> <p class="solid">A solid outline</p> <p class="double">A double outline</p> <p class="groove">A groove outline</p> <p class="ridge">A ridge outline</p> <p class="inset">An inset outline</p> <p class="outset">An outset outline</p> <p><b>注释:</b>只有在规定了 !DOCTYPE 时,Internet Explorer 8 (以及更高版本) 才支持 outline-style 属性。</p> </body> </html>
9.盒子模型
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式
padding:用于控制内容与边框之间的距离;
margin: 用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的
术语翻译
- element : 元素。
- padding : 内边距,也有资料将其翻译为填充。
- border : 边框。
- margin : 外边距,也有资料将其翻译为空白或空白边
例
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <!--外边距--> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ margin: 12px auto; background-color: #2459a2; width: 980px; height: 100px; } div p{ margin: 100px; background-color: #bebebe; width: 100px; height: 50px; } </style> </head> <body> <div> <p></p> </div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<html> <head> <style type="text/css"> td{ padding-top: 10% } </style> </head> <body> <table border="1"> <tr> <td> 这个表格单元拥有上内边距。 </td> </tr> </table> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<html> <head> <style type="text/css"> p.one { border-style: solid; border-color: #0000ff } p.two { border-style: solid; border-color: #ff0000 #0000ff } p.three { border-style: solid; border-color: #ff0000 #00ff00 #0000ff } p.four { border-style: solid; border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255) } </style> </head> <body> <p class="one">One-colored border!</p> <p class="two">Two-colored border!</p> <p class="three">Three-colored border!</p> <p class="four">Four-colored border!</p> <p><b>注释:</b>"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p> </body> </html>
边框属性
CSS 内边距属性
外边距属性
注意一.
边框在默认情况下会定位于浏览器窗口的左上角,但是并没有紧贴着浏览器的窗口的边框,这是因为body本身也是一个盒子(外层还有html),在默认情况下, body距离html会有若干像素的margin,具体数值因各个浏览器不尽相同,所以body中的盒子不会紧贴浏览器窗口的边框了
注意二.边界塌陷或者说边界重叠
外边距的重叠只产生在普通流文档的上下外边距之间,这个看起来有点奇怪的规则,其实有其现实意义。设想,当我们上下排列一系列规则的块级元素(如段 落P)时,那么块元素之间因为外边距重叠的存在,段落之间就不会产生双倍的距离
五.css浮动
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样
首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流
浮动可以使元素脱离文档流
在 CSS 中,我们通过 float 属性实现元素的浮动。
例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1{ width: 100px; height: 100px; background-color: #bebebe; float: left; } .div2{ width: 100px; height: 100px; background-color: bisque; float: left; } </style> </head> <body> <div class="div1"> Hello </div> <div class="div2"> World </div> </body> </html>
行框和清理
浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。
因此,创建浮动框可以使文本围绕图像:
例
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1{ width: 100px; height: 100px; background-color: #bebebe; float: left; } .div2{ width: 100px; height: 100px; background-color: bisque; float: left; } </style> </head> <body> <div class="div1"> Hello </div> <div class="div2"> World </div> <p> 浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。因此,创建浮动框可以使文本围绕图像 </p> </body> </html>
要想阻止行框围绕浮动框,需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。
为了实现这种效果,在被清理的元素的上外边距上添加足够的空间,使元素的顶边缘垂直下降到浮动框下面
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1{ width: 100px; height: 100px; background-color: #bebebe; float: left; } .div2{ width: 100px; height: 100px; background-color: bisque; float: left; } .clean{ clear: both; } </style> </head> <body> <div class="div1"> Hello </div> <div class="div2"> World </div> <p class="clean"> 浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。因此,创建浮动框可以使文本围绕图像 </p> </body> </html>
六.CSS定位
定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置
CSS 定位机制
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度
CSS position 属性
position 属性值的含义:
- static
- 元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
- relative
- 元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
- absolute
- 元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
- fixed
- 元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
-
<html> <head> <style type="text/css"> h2.pos_left { position:relative; left:-20px } h2.pos_right { position:relative; left:20px } </style> </head> <body> <h2>这是位于正常位置的标题</h2> <h2 class="pos_left">这个标题相对于其正常位置向左移动</h2> <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2> <p>相对定位会按照元素的原始位置对该元素进行移动。</p> <p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p> <p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
<html> <head> <style type="text/css"> h2.pos_abs { position:absolute; left:100px; top:150px } </style> </head> <body> <h2 class="pos_abs">这是带有绝对定位的标题</h2> <p>通过绝对定位,元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px,距离页面顶部 150px。</p> </body> </html>
<html> <head> <style type="text/css"> p.one { position:fixed; left:5px; top:5px; } p.two { position:fixed; top:30px; right:5px; } </style> </head> <body> <p class="one">一些文本。</p> <p class="two">更多的文本。</p> </body> </html>