手记

06_CSS居中、文档流、精灵图、网页优化

知识点

  • 定位的盒子居中显示

  • 标签包含规范

  • 规避脱标流

  • 图片和文字垂直居中对齐

  • 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">![](img/sf.png)</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">![](img/sanjiao.png)</div>         <div class="login">![](img/3.png)</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">         ![](img/3.png)nihhhhhh</img>     </div> </body> </html>

       

vertical-align属性值描述
baseline默认。元素放置在父元素的基线上
sub垂直对齐文本的下标
super垂直对齐文本的上标
top把元素的顶端与行中最高元素的顶端对齐
text-top把元素的顶端与父元素字体的顶端对齐
middle把此元素放置在父元素的中部
bottom把元素的顶部与行中最低的元素的顶部对齐
text-bottom把元素的底部与父元素字体的底端对齐
length
%使用line-height属性的百分比值来排列此元素。允许使用负值
inherit规定应该从父元素继承vertical-align属性的值

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



作者:对方不想理你并向你抛出一个异常
链接:https://www.jianshu.com/p/d8be2c54dca8


0人推荐
随时随地看视频
慕课网APP