知识点
- 定位的盒子居中显示
- 标签包含规范
- 规避脱标流
- 图片和文字垂直居中对齐
- CSS隐藏/可见
- CSS之内容移除（网页优化）
- 精灵图
- 属性选择器
- emmet快捷键
定位的盒子居中显示
-
margin:0 auto;只能让标准流的盒子居中对齐。 - 定位的盒子居中：先向左走父元素盒子的一半50%，在向左走子盒子的一半(margin-left:负值。)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.fater{
height: 500px;
background: #ccc;
position: relative;
}
.box{
width: 996px;
height: 56px;
background: pink;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -498px;
}
</style>
</head>
<body>
<div class="fater">
<div class="box"></div>
</div>
</body>
</html>
案例
顺丰banner导航
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,ul,li{
padding: 0;
margin: 0;
}
.banner{
width: 1259px;
height: 472px;
margin: 0 auto;
position: relative;
}
.search{
width: 960px;
height: 60px;
background: #464646;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -480px;
}
.search ul li{
list-style: none;
float: left;
}
.search ul li a{
display: inline-block;
width: 160px;
height: 60px;
line-height: 60px;
text-align: center;
color: #fff;
}
.search ul li a:hover{
background: #fff;
color: #000;
}
.search ul li a.one:hover{
background: #464646;
color: #fff;
}
.login{
position: absolute;
left: 149px;
bottom: 56px;
}
.sanjiao{
position: absolute;
left: 218px;
bottom: 47px;
z-index: 2;
}
</style>
</head>
<body>
<div class="banner">
<div class="pic"></div>
<div class="search">
<ul>
<li><a href="#" class="one">运单追踪</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>
<div class="sanjiao"></div>
<div class="login"></div>
</div>
</body>
</html>
顺丰导航
标签包含规范
- div可以包含所有的标签。
- p标签不能包含div h1等标签。
- h1可以包含p，div等标签。
-
行内元素尽量包含行内元素，行内元素不要包含块元素。
标签的所有包含规范
规避脱标流
- 尽量使用标准流。
- 标准流解决不了的使用浮动。
- 浮动解决不了的使用定位。
- 使用margin-left:auto 规避脱标
margin-left:auto 让盒子左侧充满
margin-right:auto 让盒子右侧充满
margin:0 auto 居中对齐的由来
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.father{
width: 300px;
height: 300px;
background: #ccc;
}
.son{
width: 50px;
height: 50px;
background: pink;
margin-left: auto;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
不使用浮动和定位也能靠右
图片和文字垂直居中对齐
使用vertical-align对行内、行内块元素设置垂直距离。默认属性是:vertical-align:baseline;
vertical-align:middle 常与display:inline-block配合使用， 表格对此属性最敏感
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
img{
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box">
nihhhhhh</img>
</div>
</body>
</html>
| vertical-align属性值 | 描述 |
|---|---|
| baseline | 默认。元素放置在父元素的基线上 |
| sub | 垂直对齐文本的下标 |
| super | 垂直对齐文本的上标 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| text-top | 把元素的顶端与父元素字体的顶端对齐 |
| middle | 把此元素放置在父元素的中部 |
| bottom | 把元素的顶部与行中最低的元素的顶部对齐 |
| text-bottom | 把元素的底部与父元素字体的底端对齐 |
| length | |
| % | 使用line-height属性的百分比值来排列此元素。允许使用负值 |
| inherit | 规定应该从父元素继承vertical-align属性的值 |
CSS隐藏/可见
| 方式 | 功能 |
|---|---|
| overflow:hidden; | 溢出隐藏 |
| visibility:hidden; | 隐藏元素 隐藏之后还占据原来的位置。 |
| display:none; | 隐藏元素 隐藏之后不占据原来的位置。 |
| display:block; | 元素可见 |
Display:none 和display:block 常配合js使用。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.red{
width: 50px;
height: 50px;
background: red;
visibility: hidden;
}
.green{
width: 50px;
height: 50px;
background: green;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
</body>
</html>
盒子的位置还在
将上面
visibility: hidden;改为display: none;
盒子隐藏并且不占位置
- tab切换
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box,.div1,.div2,.div3{
width: 300px;
height: 300px;
}
.box{
overflow: hidden;
}
.div1{
background: red;
}
.div2{
background: green;
}
.div3{
background: pink;
}
</style>
</head>
<body>
<a href="#div1">新闻</a>
<a href="#div2">体育</a>
<a href="#div3">明星</a>
<div class="box">
<div class="div1" id="div1">新闻</div>
<div class="div2" id="div2">体育</div>
<div class="div3" id="div3">明星</div>
</div>
</body>
</html>
css之内容移除（网页优化）
- 使用
text-indent:-5000em;
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.logo{
width: 143px;
height: 76px;
background: url('img/logo.png');
}
.logo a{
display: inline-block;
text-indent: -5000em;
}
</style>
</head>
<body>
<div class="logo">
<h1><a href="http://www.baidu.com">搜狐</a></h1>
</div>
</body>
</html>
- 将元素高度设置为0,使用内边距将盒子撑开，给盒子使用overflow:hidden;将文字隐藏。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 300px;
height: 0px;
padding-top: 100px;
overflow: hidden;
background: red;
}
</style>
</head>
<body>
<div class="box">Web大前端威武</div>
</body>
</html>
精灵图
-
精灵图的由来
上图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。
然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites）。
简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图，如下图所示为淘宝网站中的一个精灵图。
- 精灵图工作原理
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图）。然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。
例如：我们要使用上图中的一个图标
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 54px;
height: 54px;
background: url('img/qq.png') -700px -110px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
传智导航
hot、new使用精灵图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,ul,li{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
.nav{
background: #000;
height: 48px;
margin-top: 100px;
}
.nav-con{
width:1182px;
height: 48px;
margin: 0 auto;
position: relative;
}
.nav-con ul li{
float: left;
}
.nav-con ul li a{
display: inline-block;
height: 48px;
font: 16px/48px microsoft yahei;
color: #fff;
padding: 0 13px;
text-decoration: none;
}
.nav-con ul li a:hover{
background: #3A92DD;
}
.hot{
width: 31px;
height: 21px;
background: url('img/sprite.png') -57px 0px;
position: absolute;
left: 245px;
top: -10px;
}
.new{
width: 31px;
height: 21px;
background: url('img/sprite.png') -135px 0px;
position: absolute;
left: 634px;
top: -10px;
}
</style>
</head>
<body>
<div class="nav">
<div class="nav-con">
<div class="hot"></div>
<div class="new"></div>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">UI设计</a></li>
<li><a href="#">前端与移动开发</a></li>
<li><a href="#">问答专区</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">C/C++</a></li>
<li><a href="#">python</a></li>
<li><a href="#">网络营销</a></li>
<li><a href="#">活动专区</a></li>
</ul>
</div>
</div>
</body>
</html>
精灵图用法总结：
1：精灵图只能用打开的方式，不能使用导入得方式打开
2：使用精灵图的时候注意坐标位置的正负取值
制作精灵图
注意事项：
1：制作精灵图，小背景图片之间必须有间隙
2：保存精灵图要保存为拼合png格式
属性选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
input[type=text][id]{
width: 200px;
height: 20px;
background: pink;
}
input[type=text][class="username"]{
width: 100px;
height: 20px;
background: red;
}
</style>
</head>
<body>
<input type="text" id="mytxt">
<input type="text" class="username">
<input type="password">
</body>
</html>
emmet快捷键
emmet是我们在sublime中的一个插件在这个插件中集成很多的快捷键。
html:
- 生成结构的快捷键：
！+ tab可以生成html5的结构代码。 - 生成id名和类名
标签名.类名#id名+tab
没有标签名：.类名+tab ==>生成div - 生成同级元素：
标签名+标签名+标签名+ tab - 生成子类标签
标签名>子标签名>子标签名>子标签名+tab
标签名>子标签名>子标签名>子标签名^^子标签名+tab
注意：^是指返回一级，与父节点同级 - 带固定数量的标签:
ul>li*5+tab - 带有序号名称
ul>li.abc$*3+ tab - 生成带有内容的标签：
ul>li>a{item}*5+tab
css
- width:30px==>
w30+tab - Height:30px==>
h30+tab - Margin:30px==>
mg30+tab - Padding:30px==>
pd30+tab - Line-height:12px==>
lh12px+tab - Background==>
bg+tab
