CSS笔记
CSS
CSS简介
什么是 CSS?
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
注意: 样式通常保存在外部的 .css
文件中。通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。
CSS/CSS3 API 中文文档
引用方式
内联样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body style="background-color:#b0c4de;">
<h1>我的 CSS web 页!</h1>
<p>你好世界!这是来自 runoob 菜鸟教程的实例。</p>
</body>
</html>
内部样式表
内部样式,指的就是把CSS代码和HTML代码放在同一个文件中,其中CSS代码放在<style>``<style/>
标签对内。并且<style>
标签是放在<head>
标签内的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body {
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>我的 CSS web 页!</h1>
<p>你好世界!这是来自 runoob 菜鸟教程的实例。</p>
</body>
</html>
外部样式表
推荐使用。所谓的“外部样式表”
,就是把CSS代码和HTML代码都单独放在不同文件中,然后在HTML文档中使用link标签来引用CSS样式表。
mystyle.css
文件:
body {
background-color:#b0c4de;
}
HTML
页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<!-- 在HTML页面中引用文件名为newfile的css文件 -->
<link type="text/css" rel="stylesheet" href="mystyle.css"/>
</head>
<body>
<h1>我的 CSS web 页!</h1>
<p>你好世界!这是来自 runoob 菜鸟教程的实例。</p>
</body>
</html>
多重样式优先级
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中,在 HTML 页的头元素中,或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
一般情况下,优先级如下:
内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式
注意: 如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。
CSS 语法
CSS 规则
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:
选择器 {
样式属性1:取值1;
样式属性2:取值2;
……
}
CSS 注释
以" /*
" 开始, 以 "*/
"结束:
/*这是个注释*/
p{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}
CSS 选择器
id 和 class 选择器
id
和class
是HTML元素中两个最基本的公共属性。
id
属性被赋予了标识页面元素的唯一身份。 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#
” 来定义。
class
,顾名思义,就是“类
”。它采用的思想跟其他C、Java等编程语言的“类”相似。我们可以为同一个页面的相同元素或者不同元素设置相同的class,然后使得相同的class具有相同的CSS样式。 class
选择器在HTML中以class
属性表示, 在 CSS 中,类选择器以一个点".
"号来定义。
如果你要为两个元素或者两个以上元素定义相同的样式,建议使用class属性。
选择器 | HTML属性 | CSS |
---|---|---|
id选择器 | id | # |
class选择器 | class | . |
id 选择器
#para1
{
text-align:center;
color:red;
}
<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
class 选择器
/*所有拥有 center 类的 HTML 元素均为居中*/
.center {text-align:center;}
/*所有的 p 元素使用 class="center" 让该元素的文本居中:*/
p.center {text-align:center}
此外,需要注意一下:
- 一个标签可以同时定义多个class;
- id也可以写成name,区别在于name是HTML中的标准,而id是XHTML中的标准,现在网页的标准都是使用id,所以大家尽量不要用name属性;
标签选择器
// 标签即HTML标签,比如body,div,p等
div{text-align:center;}
属性选择器
/*把包含标题(title)的所有元素变为蓝色*/
[title]
{
color:blue;
}
属性和值选择器
示例一:
/*标题title='runoob'元素的边框样式*/
[title=runoob]
{
border:5px solid green;
}
示例二:
/*匹配到下文中的第三个div元素*/
div[title="height"]{
width:100px;
height:100px;
margin-top:2px;
background:pink;<br>
}
<body>
<div title="width"></div>
<div></div>
<div title="height"></div>
</body>
属性和值的选择器 - 多值
/*指定值的title属性的元素样式的例子,使用(~)分隔属性和值:*/
[title~=hello] { color:blue; }
/*适用如下:*/
<h1 title="hello world">Hello world</h1>
<p title="student hello">Hello CSS students!</p>
/*指定值的lang属性的元素样式的例子,使用(|)分隔属性和值*/
[lang|=en] { color:blue; }
/*适用如下:*/
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>
表单样式
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}
子选择器
子元素选择器,就是选中某个元素下的子元素(包括子、孙),然后对该子元素设置CSS样式。
说明:
父元素与子元素必须用空格隔开,从而表示选中某个元素下的子元素。
语法:
父选择器 子元素选择{
样式属性1:取值1;
样式属性2:取值2;
……
}
相邻选择器
相邻选择器,就是选中该元素的下一个兄弟元素,在这里注意一点,相邻选择器的操作对象是该元素的同级元素。
语法:
元素A + 元素A相邻兄弟元素{
样式属性1:取值1;
样式属性2:取值2;
……
}
示例一:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
/*选择“id为lv的元素”的相邻的下一个兄弟元素div,也就是第3个div元素。*/
#lv+div{color:red;}
</style>
</head>
<body>
<div>111</div>
<div id="lv">
<p>222</p>
</div>
<div>333</div>
<div>444</div>
</body>
</html>
示例二:
/*这个只能选择到下面第二行的那个p元素 最后一个不满足紧接在div元素后面这个条件*/
div+.box{width:100px; height:100px; background:pink;}
<div></div>
<p class="box"></p>
<p class="box"></p>
<div></div>
<p></p>
<p class="box"></p>
群组选取
群组选择器,就是同时对几个选择器进行相同的操作。
说明:
对于群组选择器,两个选择器之间必须用“,”(英文逗号)隔开,不然群组选择器无法生效。
语法:
选择器A,选择器B,选择器C{
样式属性1:取值1;
样式属性2:取值2;
……
}
示例一:
/*同时匹配到下文中的div标签和id为box的p标签*/
div,#box{width:100px; height:100px; background:#000;}
<div></div>
<p id="box"></p>
伪类选择器(:hover)
:hover
在鼠标移到链接上时添加的特殊样式。
提示: :hover
选择器器可用于所有元素,不仅是链接。
示例一:
img:hover{border:1px solid gray;}
CSS Background(背景)
属性 | 说明 | 示例 |
---|---|---|
background-color | 背景颜色 | body {background-color:#b0c4de;} |
background-image | 背景图像 | body {background-image:url(‘paper.gif’);} |
background-image 属性描述了元素的背景图像.
默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体.
页面背景图片设置实例:
body {background-image:url('paper.gif');}
默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。
一些图像如果在水平方向与垂直方向平铺,这样看起来很不协调,
body{
background-image:url('gradient2.png');
}
如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:
body{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
让背景图像不影响文本的排版(如果你不想让图像平铺,你可以使用 background-repeat
属性):
body{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
以上实例中,背景图像与文本显示在同一个位置,为了让页面排版更加合理,不影响文本的阅读,我们可以改变图像的位置。
可以利用 background-position 属性改变图像在背景中的位置:
body{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
CSS Text(文本)
文本颜色
/*颜色的名称*/
body {color: red;}
/*十六进制值*/
h1 {color: #00ff00;}
/*一个RGB值*/
h2 {color:rgb(255,0,0);}
字体样式(Font)
属性 | 说明 |
---|---|
font-family | 字体类型 |
font-size | 字体大小 |
font-weight | 字体粗细 |
font-style | 字体斜体 |
color | 颜色 |
字体类型(font-family)
默认情况下,浏览器的字体是宋体
。中文字体常用的有宋体、微软雅黑,英文字体比较常用的是Times New Roman
、Arial
。
字体大小(font-size)
font-size
的属性值可以有两种方式,一种是使用关键字
(实际开发中,比较少使用这种方式来表达字体大小,一般都是采用像素作为单位的数值);二是使用像素做单位的数值
。
p {font-size:15px;}
px
全称“pixel”(像素)。px就是一张图片中最小的点,或者是计算机屏幕最小的点。
字体颜色(color)
p {color:red;}
字体粗细(font-weight)
字体粗细和字体大小(font-size
)是不一样的,粗细指的是字体的“肥胖”,大小指的是高和宽。
粗细值可以取关键字(常用normal
和bold
)和100~900的数值(不建议使用数值)。
font-weight属性值 | 说明 |
---|---|
normal | 默认值,正常体。相当于数值400 |
lighter | 较细 |
bold | 较粗。相当于数值700 |
bolder | 很粗(其实效果跟bold差不多) |
字体斜体(font-style)
font-style属性值 | 说明 |
---|---|
normal | 默认值,正常体 |
italic | 斜体,这是一个属性 |
oblique | 将字体倾斜,将没有斜体变量(italic)的特殊字体,要应用oblique |
文本样式(Text)
属性 | 说明 |
---|---|
text-decoration | 下划线、删除线、顶划线 |
text-transform | 文本大小写 |
font-varient | 将英文文本转换为“小型”大写字母 |
text-indent | 段落首行缩进 |
text-align | 文本水平对齐方式 |
line-height | 行高 |
letter-spacing | 字距 |
word-spacing | 词距 |
下划线、删除线、顶划线(text-decoration)
属性值 | 说明 |
---|---|
none | 默认值,可以用这个属性值也可以去掉已经有下划线或删除线或顶划线的样式 |
underline | 下划线,在HTML中使用<u> 表示。一般用于文章的重点标明。 |
line-through | 删除线,在HTML中使用<s> 表示。一般出现在电子商务网站中用于促销。 |
overline | 顶划线 |
text-decoration
属性用来设置或删除文本的装饰。
从设计的角度看 text-decoration
属性主要是用来删除链接的下划线:
a {text-decoration:none;}
/*眉题(上划线)*/
h1 {text-decoration:overline;}
/*贯穿线*/
h1 {text-decoration:line-through;}
/*下划线*/
h1 {text-decoration:underline;}
文本大小写转换(text-transform)
文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母,或每个单词的首字母大写。
属性值 | 说明 |
---|---|
none | 默认值,无转换发生 |
uppercase | 转换成大写 |
lowercase | 转换成小写 |
capitalize | 将每个英文单词的首字母转换成大写,其余无转换发生 |
/*大写字母*/
p.uppercase {text-transform:uppercase;}
/*小写字母*/
p.lowercase {text-transform:lowercase;}
/*大写字母:首字母大写 This is some text. -- >This Is Some Text. */
p.capitalize {text-transform:capitalize;}
文本首行缩进(text-indent)
文本缩进属性是用来指定文本的第一行的缩进。text-indent
的属性值应该是字体font-size
属性值的两倍。
/*缩进*/
p {text-indent: 50px}
文本水平对齐(text-align)
/*默认值,左对齐*/
p.main {text-align:left;}
/*居中对齐*/
body {text-align:center;}
/*右对齐*/
p.date {text-align:right;}
文本行高(text-height)
很多书本上称line-height
为行间距
,这是不严谨的叫法。行高,顾名思义就是“一行的高度
”,而行间距指的是“两行文本之间的距离”,大家稍微想一下就知道这是两个不一样的概念。
/*行高度设置*/
p {text-height: 20px}
字符间距(letter-spacing)
一个中文算一个字,一个英文字母也叫一个字。
<style>
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>
字间距(word-spacing)
定义词间距,以空格为基准进行调节,如果多个单词被连在一起,则被word-spacing
视为一个单词;如果汉字被空格分隔,则分隔的多个汉字就被视为不同的单词,word-spacing
属性此时有效。
p {
word-spacing:30px;
}
边框(Border)
边框样式(border-style)
边框宽度(border-width)
边框颜色(border-color)
p.one {
border-style:solid;
border-color:red;
}
p.two {
border-style:solid;
border-color:#98bf21;
}
边框简写(border)
/*正常写法*/
border-width:5px;
border-style:solid;
border-color:red;
/*简写等效于如上*/
border:5px solid red;
对于border:1px solid gray;
这种简洁写法,第一个值指的是框的大小(border-width
),第二个值指的是框的样式(border-style
),第三个值指的是框的颜色(border-color
)。
背景(background)
属性 | 说明 |
---|---|
background-color | 定义背景颜色 |
background-image | 定义背景图像的路径 |
background-repeat | 定义背景图像显示方式,例如纵向平铺、横向平铺 |
background-position | 定义背景图像在元素哪个位置 |
background-attachment | 定义背景图像是否随内容而滚动 |
背景颜色(background-color)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>background-color属性</title>
<style type="text/css">
/*设置所有div元素的共同样式*/
div {
width:100px;
height:60px;
}
/*设置3个div元素的个别样式*/
#div1{background-color:red;}
#div2{background-color: #F3DE3F;}
#div3{background-color: #0AF7FB;}
</style>
</head>
<body>
<div id="div1">背景颜色值为red</div>
<div id="div2">背景颜色值为#F3DE3F </div>
<div id="div3">背景颜色值为#0AF7FB </div>
</body>
</html>
color和background-color区别
#p1 {
width:290px;
/*指文字颜色*/
color:white;
/*背景色*/
background-color:red;
}
背景图像(background-image)
默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体.
页面背景图片设置实例:
body {background-image:url('paper.gif');}
默认情况下 background-image
属性会在页面的水平
或者垂直方向
平铺。
一些图像如果在水平方向与垂直方向平铺,这样看起来很不协调,
<style type="text/css">
#div1 {
/*给某个元素设置背景图像,元素要有一定的宽度和高度,背景图片才会显示出来。*/
width:143px;
height:220px;
background-image:url("piece.jpg");
}
</style>
图像显示方式(background-repeat)
属性值 | 说明 |
---|---|
no-repeat | 表示不平铺 |
repeat | 默认值,表示在水平方向(x轴)和垂直方向(y轴)同时平铺 |
repeat-x | 表示在水平方向(x轴)平铺 |
repeat-y | 表示在垂直方向(y轴)平铺 |
如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:
body {
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
让背景图像不影响文本的排版(如果你不想让图像平铺,你可以使用 background-repeat
属性):
body{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
以上实例中,背景图像与文本显示在同一个位置,为了让页面排版更加合理,不影响文本的阅读,我们可以改变图像的位置。
可以利用 background-position
属性改变图像在背景中的位置:
body {
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
背景图像位置(background-position)
背景位置属性用于设置背景图像的位置,这个属性只能应用于块级元素和替换元素。其中替换元素包括img
、input
、textarea
、select
和object
。
/**/
background-positon:像素值/关键字;
像素值
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>background-position属性</title>
<style type="text/css">
#div1 {
width:400px;
height:300px;
border:1px solid gray;
background-image:url("../App_images/lesson/run_cj/one piece.jpg");
background-repeat:no-repeat;
background-position:80px 40px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
关键字
属性值 | 说明 |
---|---|
top left | 左上 |
top center | 靠上居中 |
top right | 右上 |
left center | 靠左居中 |
center center | 正中 |
right center | 靠右居中 |
bottom left | 左下 |
bottom center | 靠下居中 |
bottom right | 右下 |
背景固定样式(background-attachment)
设置背景图像是随对象滚动还是固定不动。
/*scroll表示背景图像随对象滚动而滚动,是默认选项;fixed表示背景图像固定在页面不动,只有其他的内容随滚动条滚动。*/
background-attachment:scroll/fixed;
超链接(Link)
链接样式
属性 | 说明 |
---|---|
a:link | 定义a元素未访问时的样式 |
a:visited | 定义a元素访问后的样式 |
a:hover | 定义鼠标经过显示的样式 |
a:active | 定义鼠标单击激活时的样式 |
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
/*注意: a:hover 必须在 a:link 和 a:visited 之后,需要严格按顺序才能看到效果。*/
/*注意: a:active 必须在 a:hover 之后。*/
文本修饰
/*text-decoration 属性主要用于删除链接中的下划线:*/
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
背景颜色
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
图片样式
图片大小
/*语法*/
width:像素值;
height:像素值;
图片边框(border)
/*语法*/
border-width:像素值;
border-style:属性值
border-color:颜色值
/*如上简写*/
border:1px solid red;
图片水平对齐(text-align)
text-align
一般只用在两个地方:文本水平对齐和图片水平对齐。也就是说,text-align
只对文本和img
标签有效,对其他标签无效。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>图片水平对齐</title>
<style type="text/css">
div
{
width:300px;
height:80px;
border:1px solid gray;
}
.div_img1{text-align:left;}
.div_img2{text-align:center;}
.div_img3{text-align:right;}
img{width:60px;height:60px;}
</style>
</head>
<body>
<div class="div_img1">
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</div>
<div class="div_img2">
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</div>
<div class="div_img3">
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</div>
</body>
</html>
图片垂直对齐(vertical-align)
vertical-align属性取值 | 说明 |
---|---|
top | 顶部对齐 |
middle | 中部对齐 |
baseline | 基线对齐 |
bottom | 底部对齐 |
文字环绕(float)
loat属性值 | 说明 |
---|---|
left | 元素向左浮动 |
right | 元素向右浮动 |
设置图片与文字的间距(margin)
/*上外边距*/
margin-top:像素值;
/*下外边距*/
margin-bottom:像素值;
/*左外边距*/
margin-left:像素值;
/*右外边距*/
margin-right:像素值;
列表样式(list style)
列表项符号(list-style-type)
/*语法*/
list-style-type:属性值;
/*去除列表项符号*/
list-style-type:none;
有序列表(ul)
list-style-type属性值 | 说明 |
---|---|
decimal | 默认值,数字1、2、3…… |
lower-roman | 小写罗马数字i、ii、iii…… |
upper-roman | 大写罗马数字I、II、III…… |
lower-alpha | 小写英文字母a、b、c…… |
upper-alpha | 大写英文字母A、B、C…… |
无序列表(ul)
list-style-type属性值 | 说明 |
---|---|
disc | 默认值,实心圆“●” |
circle | 空心圆“○” |
square | 实心正方形“■” |
自定义列表项符号(list-style-image)
不管有序列表还是无序列表,都有他们自身的列表项符号。但默认的列表符号都比较丑。使用自定义列表项符号。
/*语法*/
list-style-image:url(图像地址);
表格样式()
表格边框合并(border-collapse)
表格特有的属性。除了表格,其他地方用不上。
只需要在<table>
元素中设置border-collapse
属性值就行,没必要在<th>
、<td>
这些元素也设置,造成代码冗余。
border-collapse属性值 | 说明 |
---|---|
separate | 默认值,边框分开,不合并 |
collapse | 边框合并,如果相邻,则共用一个边框 |
表格边框间距(border-spacing)
/*语法*/
border-spacing:像素值;
/*定义了单元格之间水平方向的间距为5px,垂直方向的间距为10px。*/
{border-spacing:5px 10px}
表格标题位置(caption-side)
caption-side属性值 | 说明 |
---|---|
top | 默认值,标题在顶部 |
bottom | 标题在底部 |
盒子模型(Box Model)
详见参考
详见参考
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距
,边框
,填充
,和实际内容
。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
属性 | 说明 |
---|---|
border | (边框)元素边框 |
margin | (外边距)用于定义页面中元素与元素之间的距离 |
padding | (内边距)用于定义内容与边框之间的距离 |
content | (内容)可以是文字或图片 |
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。
元素的宽度和高度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div {
/*背景颜色*/
background-color: lightgrey;
/*宽*/
width: 300px;
/*边框:宽度25px;样式实线;颜色green;*/
border: 25px solid green;
/*内容与边框之间的距离*/
padding: 25px;
/*元素与元素之间的距离*/
margin: 25px;
}
</style>
</head>
<body>
<h2>盒子模型演示</h2>
<p>CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。</p>
<div>这里是盒子内的实际内容。有 25px 内间距,25px 外间距、25px 绿色边框。</div>
</body>
</html>
内边距(padding)
/*语法*/
padding-top:像素值;
padding-right:像素值;
padding-bottom:像素值;
padding-left:像素值;
/*简洁写法*/
padding:像素值;
padding:像素值1 像素值2;
padding:像素值1 像素值2 像素值3 像素值4;
/*表示四个方向的内边距都是20px*/
padding:20px;
/*表示padding-top和padding-bottom为20px,padding-right和padding-left为40px。*/
padding:20px 40px;
/*表示padding-top为20px,padding-right为40px,padding-bottom为60px,padding-left为80px。大家按照顺时针方向记忆就可以了。*/
padding:20px 40px 60px 80px;
外边距(margin)
/*语法*/
margin-top:像素值;
margin-right:像素值;
margin-bottom:像素值;
margin-left:像素值;
/*简洁写法*/
margin:像素值;
margin:像素值1 像素值2;
margin:像素值1 像素值2 像素值3 像素值4;
/*表示四个方向的外边距都是20px*/
margin:20px;
/*表示margin-top和margin-bottom为20px,margin-right和margin-left为40px。*/
margin:20px 40px;
/*表示margin-top为20px,margin-right为40px,margin-bottom为60px,margin-left为80px。大家按照顺时针方向记忆就可以了。*/
margin:20px 40px 60px 80px;
浮动布局
定位布局(Position)
浮动布局比较灵活,但是不容易控制。而定位布局的出现,使得用户精准定位页面中的任意元素成为可能,使得网页布局变得更加随心所欲。当然由于定位布局缺乏灵活性,也给空间大小和位置不确定的版面布局带来困惑。
定位的方法有很多种,它们分别是固定定位(fixed
)、相对定位(relative
)、绝对定位(absolute
)和静态定位(static
)。
position
属性的五个值:
固定定位(fixed)
/*语法*/
position:fixed;
top:像素值;
bottom;像素值;
left:像素值;
right:像素值;
/*position:fixed;”是结合top、bottom、left和right这4个属性一起使用的,其中“position:fixed;”使得元素成为固定定位元素,接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。*/
相对定位(relative)
/*语法*/
position:relative;
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;
/*“position:relative;”是结合top、bottom、left和right这4个属性一起使用的,其中“position:relative;”使得元素成为相对定位元素,接着使用top、bottom、left和right这4个属性来设置元素相对原始位置。相对定位的容器浮上来后,其所占的位置仍然留有空位,后面的无定位元素仍然不会“挤上来”。*/
绝对定位(absolute)
绝对定位在几种定位方法中使用最广泛,这种方法能够很精确地把元素移动到任意你想要的位置。
一个元素变成了绝对定位元素,这个元素就完全脱离正常文档流了,绝对定位元素的前面或者后面的元素会认为这个元素并不存在,即这个元素浮于其他元素上面,它是独立出来的。
/*语法*/
position:absolute;
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;
静态定位(static)
如果没有指定元素的position
属性值,也就是默认情况下,元素是静态定位。只要是支持position属性的html对象都是默认为static。static是position属性的默认值,它表示块保留在原本应该在的位置,不会重新定位。
说白了,平常我们根本就用不到“position:static
”,不过呢,如果有时候我们使用javascript来控制元素定位的时候,如果想要使得其他定位方式的元素变成静态定位,就要使用“position:static;
”来实现。
在CSS入门阶段,大家只需要深入学习固定定位(fixed
)、相对定位(relative
)和绝对定位(absolute
)就已经可以走得很远了。