CSS基础知识

1，CSS怎么写？
直接写在标签内：<div style="CSS样式"></div>
在head的style标签内定义好CSS模板，通过选择器选中标签使其生效

 

2，CSS选择器
2.1，CSS选择器
场景一：i1是id选择器，选中id=1的使其生效，不推荐适用
 　　CSS：<style>  #i1{  height: 66px; }</style> 
 　　标签：<div id='i1'></div>

 

场景二：c1是class选择器，选中id=1的使其生效，后面开始省略<style></style>
　　 CSS：.c1{……}       
 　　标签：<div class='c1'></div>
 
场景三：div{…}是标签选择器，选中所有div的使其生效
 　　CSS：div{……}           
　　 标签：<div></div>

 

场景四：层级选择器(空格)，选中c1 class中 c2 class的标签使其生效
 　　CSS：.c1 .c2{……}     
 　　标签：<div class='c1'><div class='c2'></div></div>
 
场景五：层级选择器(空格)，选中span标签中的div标签使其生效
　　 CSS：span div{……}
 　　标签：<span><div></div></span>
 
场景六：组合选择器(逗号)，同时选中多个标签使其生效，可以混合选择
 　　CSS：#c1,.c2,div{……}  
 　　标签：<a id='i1'></a>  <a class='c2'></a>  <div></div>

 

场景七：属性选择器
 　　CSS：input[type='text']{……}      /*找到input标签中，type=text的标签*/
 　　标签：<input type='text' />
 　　CSS：input[n='guxh']{……}         /*找到input标签中，自定义属性n=guxh的标签*/
 　　标签：<input type='text'  n='guxh'/>
 　　CSS：.c1[n='guxh']{……}             /*找到class='C1'标签中，自定义属性n=guxh的标签*/
 　　标签：<div class='c1' n='guxh'></div>      
 
优先级问题：
 　　CSS：.c1{……}    .c2{……}
 　　标签： <div class='c1 c2' style="color:red"></div>     
 　　优先级：该div标签一共有3个css，包括：style，c1，c2。三者没有重合则同时应用，有重合则应用次序为：style>c2>c1。

 

2.2，在单独文件中编写CSS模板
 在一个html文件里编写的CSS样式，无法在另一个CSS中使用，为了提高CSS样式的重用性，可以创建CSS文件后引入，引入方法如下：
 <link rel="stylesheet" href="commons.css" />

 

3，边框
设置加框范围：border，border-left，border-top，border-right，border-bottom
设置加框样式：4px solid red  ：宽度，样式（实线/虚线），颜色
例如四周加红色实现：style="border: 5px solid red"
   
4，字体
高度和宽度：
 　　height：设置块的高度，可以是px或者百分比
 　　width：宽度 像素，百分比

垂直居中和水平居中：
 　　line-height:48px ，垂直方向根据标签高度放置，如果text的line-height和块的height一样，都是48px，就达到了垂直居中的效果
　　 text-align: center ，水平方向居中

字体：
 　　color：字体颜色
 　　font-size：字体大小
　　 font-weight：字体加粗

滚动条：
 　　min-width：最小宽度，页面缩小到min-width会出现滚动条

 

5，float
2个块级标签设置了宽度后，默认都是独占一行，无法合占一行：
　　 <div style="20%; "> 1 </div>
　　 <div style="60%; "> 2 </div>
 
要想合占一行，就要用到float：
 　　<div style="20%; float:left;"> 1 </div>
 　　<div style="60%; float:left;"> 2 </div>
 　　如果第二个div往右飘，则中间留空20%，如果第二个div占90%，则因为超出100%另起一行
 
让消失的父亲边框回来，不允许其他元素与之同一行：
 　　在孩子float浮起来后，父亲边框会消失， 所有孩子div的最后加下面这句，可以让父亲的边框回来
 　　清除同行元素，不允许其它元素与之在一行内。否则其他元素可能会与之发生交错情况
 　　<div style="clear: both;"></div>
           
6，display
6.1，块级标签和行内标签的互相转换
display: inline;   让块级标签变成行内标签，相当于div变成span
display: block;   让行内标签变成块级标签，相当于span变成div

 

6.2，让标签同时具备块级和行内的属性
行内标签：无法设置高度，宽度，padding，margin，自己有多高多宽就占多少
块级标签：可以设置高度，宽度，padding ，margin，默认占父级标签的100%
display: inline-block;  块级标签具有行内标签的属性，默认自己有多少占多少；行内标签具有块级标签的属性，可以设置高度，宽度，padding，margin

 

6.3，让标签消失
display: none;   让标签消失
            
7，padding和margin
padding和margin是设置子标签离开父级标签的距离，line-height和text-align是设置文字居中
padding和margin设置的时候有四个方向，依次为上/右/下/左，如果只设置两个方向则是上下/左右

 

<div style="border: 1px dotted red; height: 100px;">
    <div style=" height: 50px;"></div>
</div>

默认父亲div下的孩子div，会从上往下仅挨着父亲div放
如果上面留点边距，可以设置孩子div的margin，例如孩子div设置margin-top:25px，相当于居中了
如果下让孩子div占满父亲div，除了改变height，还可以孩子div设置padding-top:50px，相当于50+50=100占满了父亲div
调整外边距margin时，相当于孩子div的外部，即和父亲div之间的间距加大了
调整内边距padding时， 相当于孩子div自己内部的内容增加了

 

margin： 外边距，默认margin边距是8，如果想去掉边距，需要margin:0
margin:0 auto ， 上下去掉边距，左右自动即居中，相当于上下0px，左右auto，效果相当于margin:0 auto 0 auto
margin: auto， 上下左右自动居中，相当于上下左右auto

设置margin：margin，margin-top，margin-bottom，margin-left，margin-right
设置padding：padding，padding-top，padding-bottom，padding-left，padding-right

 

样例，收藏本站，登录注册放在两边

<div style='background-color: green; height: 90px; line-height: 90px;'>
    <div style="980px; margin: 0 auto">
        <div style="float:left;"> 收藏本站 </div>
        <div style="float:right;"> <a>登录</a> <a>注册</a> </div>
        <div style="clear:both"></div>   # 实验这句不加也能实现效果
    </div>
</div>

8，postion
重点掌握1)position: fixed，2)父position:relative + 子position: absolute

 

fixed：
 　　style="position: fixed"
　　 固定在某个位置，可以设置离开上下左右(top,bottom,left,right)的距离，滚动滑轮时该位置不会变化
 　　设置为fixed后，相当于float了，可以完成头部菜单和内容的分离
 
absolute：
 　　style="position: absolute"
　　 单独存在场景非常少，一般和relative结合使用
 　　固定在某个位置，可以设置离开上下左右(top,bottom,left,right)的距离，滚动滑轮时该位置会变化
 
relative：
 　　<div style="position: relative;">
  　　　　<div style="pisition: absolute;"> xxx </div>
 　　</div>
 　　单独relative存在时没有任何意义，relative + absolute 可以实现子标签根据夫标签定位
 
样例一，结合JavaScript可以实现返回顶部的例子：

 <div onclick="GoTop()" style="position:fixed; bottom:20px; right:20px">
 <script>
  function GoTop(){
       document.body.scrollTop = 0;
  }
 </script>

样例二，position:fixed实现头部和内容的分离

 <div style="height: 48px;  position: fixed;  top: 0; left:0; right:0">头部</div>
 <div style="margin-top: 50px; height: 3000px;">内容</div>

9，分层
 z-index：层级顺序，越大越在上面。
 opasity：明度，0~1
 用position:fixed去覆盖底层，想要居中靠margin:auto 0；会失效，可以通过距离边缘百分比和px搞定，参考下面样例的顶层
 
样例：实现三层模态对话框功能：
 　　顶层-中间遮罩层-底层，上面2层需要有position:fixed确保光标不管移动到哪都能跳出来，另外默认需要display:none，点击按钮后才触发呈现

<div style="z-index: 10; position: fixed; height:400px; 500px; background-color: white; top: 50%; left:50%;  margin-left: -250px; margin-top: -200px;" ></div>
<div style="z-index: 9; position: fixed; background-color: black; top:0; right:0; left:0; bottom: 0; opacity: 0.5;"></div>
<div style="height:5000px; background-color: green">asdf</div>

10，图片超出父级标签的范围时，overflow
 hidden ：多的部分隐藏
 auto：出现滚动条
 
样例，图片如果超出200px+200px，超出部分会被隐藏掉：

 <div style="height:200px; 200px; overflow:hidden" >
      <img src="1.jpg"> 
 </div>

11，hover
 鼠标移动当前标签上式，hover样式才会生效
 　　.pg-header .menu : hover{ background-color: blue}

 

样例，头顶部分离，居中菜单，应用hover
 

<head>
     <style>
         .pg-header{
             position: fixed;
             right: 0;
             left:0;
             top:0;
             bottom: 0;
             height: 48px;
             background-color: #2459a2;
             line-height: 48px;   /*让头部菜单内容上下居中*/
         }
         .pg-body{
             margin-top: 50px;
         }
         .w{
             width: 980px;
             margin: 0 auto;    /*让头部菜单内容左右各自留空些，如果是想居中，可以直接在.header里text-align: center;*/
         }
         .pg-header .menu{
             display: inline-block;  /*行内标签页可以设置一些块级标签的属性*/
             padding: 0 20px;   /*上下留0px，左右留10px*/
         }
 
         .pg-header .menu:hover{     /*鼠标移动到当前标签上时，以下CSS属性才生效*/
             background-color: blue;
         }
     </style>
 </head>
 <body>
     <div class="pg-header">
         <div class="w">
             <a class="LOGO"> LOGO </a>
             <a class="menu"> 全部 </a>
             <a class="menu"> 42区 </a>
             <a class="menu"> 段子 </a>
             <a class="menu"> 笑话 </a>
         </div>
     </div>
     <div class="pg-body">
         <div class="w"> 内容 </div>
     </div>
 </body>

12，Background，背景图片
 background-image: url('image/x.gif')；  # 如果div大，则图片会重复堆叠放
 Background-repeat: no repeat;   # 可以让图片不再重复堆叠
 Background-position-x: 3px  # 只横着加
 Background-position-y: 4px  # 只竖着加
 等效于：background-position: 3px，4px

 简写方法：background: url()  3px  4px  no-repeat;  # 直接在background属性下加值

 

样例一，一幅竖着很长的图片，实现选中不同位置的小图标呈现（大网站图标都是靠这种方式实现，减少请求次数）

 <div style="background-image: url('image/x.jpeg');  
       background-repeat: no repeat;       <!--默认会堆叠放，加上no-repeat后就不会堆叠放了-->
       height:80px;
         height: 20px;    20px;
       Background-position-x: 0px;        <!--默认就是0px，可以省略-->
       Background-position-y: -30px; ">    <!--靠移动y轴改变图片，2句可以合并为background-position: 0px，-30px -->
 </div>  

样例二，input登陆框边上加上个小图标，用到了background，position，padding，display

 <div style="height: 35px;  400px; position: relative">
  <input type="text" style="height: 35px;  370px; padding-right: 30px">
  <span style="background-image: url(x.jpg); right:5px; top:10px; height: 20px;  20px; display: inline-block; position: absolute"></span>
 </div>

13，其他
自适应：media
IE中，默认img标签，有一个1px的边框，如果不需要，可以<style>img{border:0;}</style>

 

 

CSS需要掌握的属性：
 position：位置，absolute+relative，fixed
 background-color：背景色
 text-align：
 margin
 padding
 font-size
 z-index
 over-flow
 :hover
 opacity
 float
 clear:both
 line-height
 border
 color
 display
 height：高度