background
background: blue url(img) no-repeat 10px 50px fixed;
repeat 重复
repeat-x
repeat-y
no-repeat
10px(x轴) 50px(y轴)
center 0 水平居中 center top
0 center 垂直居中
fixed
背景固定,不会随着页面的滚动移动
border
border: 10px solid red;
solid dashed dotted
只加上边框
border-top: 1px, solid, red;
padding
内边距
内边距相当于给一个盒子加了填充厚度,会影响盒子的大小
padding: top right bottom left;
padding: 30px 40px; top = bottom = 30px left = right = 40px
padding: 30px 40px 20px; top = 30px left = right = 40px bottom = 20px
magin
外边距
外边距问题:
上下边距会叠压
父子级包含的时候子级的margin-top会传递给父级
可以通过使用父级的内边距来达到移动子级块的目的
margin-right: auto;
margin-left: auto;
配合使用会使得块元素居中,改变浏览器窗口大小 也不会影响居中
font
font-size
font-family
color
line-height #文字在行高的上下居中,与盒子相等则在盒子中居中
text-align #文本对齐方式
text-indent # 首行缩进,1em缩进一个字
font-weight # 文字着重
font-style # 文字倾斜
text-decoration # 文字修饰
letter-spacing # 字母间距
word-spacing # 单词间距(以空格为解析单位)
a
target=”_blank”
target=”_self”
在title标签下定义, 定义所有a标签的跳转方式
a标签的作用
链接
下载
在href中添加文件路径,达到下载的目的
锚点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#box1">aaa</a>
<a href="#box2">bbb</a>
<a href="#box3">ccc</a>
<a href="#box4">ddd</a>
<div style="height: 1000px;" id="box1">
aaa
<br/>
----------------------------------
</div>
<div style="height: 1000px;" id="box2">
bbb
<br/>
----------------------------------
</div>
<div style="height: 1000px;" id="box3">
ccc
<br/>
----------------------------------
</div>
<div style="height: 1000px;" id="box4">
ddd
<br/>
----------------------------------
</div>
</body>
</html>
其他标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>段落</p>
<strong>粗体</strong>
<em>斜体</em>
<span style="color: red;">区分样式</span>在同一行的其他内容
<ol>
<li>列表</li>
<li>列表</li>
<li>列表</li>
<li>列表</li>
</ol>
<ul>
<li>列表</li>
<li>列表</li>
<li>列表</li>
<li>列表</li>
</ul>
<dl>
<dt>列表标题</dt>
<dd>列表项</dd>
<dd>列表项</dd>
<dd>列表项</dd>
</dl>
</body>
</html>
群组 选择符“,”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#box1,#box2{
width:100px;
height:100px;
background: red;
}
</style>
<body>
<div id="box1">aaa</div>
<div id="box2">bbb</div>
</body>
</html>
子类选择符“ ”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div h1{
width:100px;
height:100px;
background: red;
}
</style>
<body>
<div>
<h1>hello</h1>
</div>
</body>
</html>
样式优先级
类型 < class < id < style行间样式 < js
A. #header#div1 .box1 div .section p .link{}
B. #some .base #font #call a{}
从高优先级开始计算,数量越多优先级越高,上述例子中可以看出B中有更多的id选择符,所有B的优先级更高
a标签伪类
a:link 未访问
a:hover 鼠标悬停
a:active 链接激活
a:visited 访问过后
默认样式重置
body, p , p1, h2, h3, h4, h5, h6, dl, dd{margin:0; }
ol, ul{list-style: none; padding: 0; margin: 0;}
a{text-decoration: none}
img{border: none;}
块元素和内嵌元素
块的特征:
默认独占一行
没有宽度时,默认撑满一排
支持所有css命令
内嵌(内联,行内)的特征:
同排可以继续跟同类的标签
内容撑开宽度
不支持宽高
不支持上下的margin 和 padding
html文件中代码换行被解析为一个空格
span{display:block}
display: block; 显示为块
display: inline; 显示为内嵌
img 标签
既不是内嵌也不是块,是inline-block
inline-block特性
1. 块在一行显示
2. 行内属性标签支持宽高
3. 没有宽高的时候内容撑开宽度
存在的问题:
代码内的换行是会别解析为一个空格的
ie6 ie7 不支持inline-block
雅虎面试题
<P> 哥写的不是HTML,是寂寞。<br><br>
我说: <br>不要迷恋哥,哥只是一个传说
<p>哥写的不是<abbr title="Hypertext Markup Language">HTML</abbr>></p>
<p><cite>我</cite>说:<br/><q>不要迷恋哥,哥只是个传说</q></p><pre
前端规范
1. 所有书写均在半角状态下小写
2. id, class 必须以字母开头
3. 所有标签必须闭合
4. html标签用tab键缩进
5. 属性值必须带引号
6. <!--html注释-->
7. /*css 注释*/
8. ul, li/ol, li/dl, dt, dd拥有父子级关系的标签
9. p, dt, h标签里面不能嵌套块属性标签
10. a标签不能嵌套a
11. 内联元素不能嵌套块
浮动原理
display: inline-block
1. 使得块元素可以同行显示
2. 使得内嵌支持宽高
3. 换行被解析了
4. 不设置宽高时宽度由内容撑开
5. IE6 7不支持块元素
float: left:
1. 使块元素在同一行显示
2. 是内嵌支持宽高
3. 不设置宽度的时候宽度由内容撑开
4. 支持IE6, 7
5. 脱离文档流
脱离文档流的表现形式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
width:100px;
height:100px;
background: red;
float: left;
}
.box2{
width:200px;
height:200px;
background: blue;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html><pre style="background-color:#2b2b2b;color:#a9b7c6;font-family:'DejaVu Sans Mono';font-size:11.3pt;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> .box1{
width:100px;
height:100px;
background: red;
float: left;
}
.box2{
width:200px;
height:200px;
background: blue;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html></pre>
执行结果如下所示:
元素加了浮动之后,会脱离文档流,按照指定的一个方向移动,知道碰到父级的边界或者另一个浮动元素停止
clear
left right both none
元素的某个方向上不能有浮动元素
在.box2
中添加clear: both
后
将整个页面分成三部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
.box{
width:900px;
margin:0 auto;
}
.left{
width: 300px;
float: left;
}
.left div{
height: 298px;
background: #99aecd;
border: solid 1px #ffffff;
}
.center{
width: 300px;
float: left;
}
.center div{
height: 198px;
background: #2459a2;
border: solid 1px #ffffff;
}
.right{
width: 300px;
float: left;
}
.right div{
height: 298px;
background: #204982;
border: solid 1px #ffffff;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
<div></div>
<div></div>
</div>
<div class="center">
<div></div>
<div></div>
<div></div>
</div>
<div class="right">
<div></div>
<div></div>
</div>
</div>
</div>
</body>
</html>
效果如下所示:
清浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 300px;
margin: 0 auto;
border: 10px solid #000;
}
.d{
width:200px;
height:200px;
background: red;
float: left;
}
.clear{zoom: 1} /*处理IE6 7*/
.clear:after{ /*处理其他处理器*/
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="box clear">
<div class="d"></div>
</div>
</body>
</html>
IE6, 7元素浮动要并在同一行的元素都要加浮动
IE6双边距bug:
在IE6下,块元素有浮动和横向的margin, 横向的margin值会被放大成两倍
解决办法:
display-inline
IE6 7下li下几个px的间隙问题:
在IE6 7下li本身没有浮动,但是内容浮动了,li下就多出几个px
解决办法:
1. 给li加浮动
2. 给li加vertical-align: top;
vertical-align的另一个作用:清除img下的几个px的间隙
在IE6下高度小于19px的元素,高度会被当作19px来处理
解决办法:overflow: hidden;
css相对定位
position: relative
不影响元素本身特性
不使元素脱离文档流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div{font-size: 20px;}
.box1{width:100px; height:100px; background: red;}
.box2{width:100px; height:100px; background: blue;}
.box3{width:100px; height:100px; background: green;}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
变为这样