css

• css概述

  • css(层叠样式表) 页面化妆师 对页面进行修饰
  • css layout(布局)
  • 作用：让页面中的可视化标记变得更漂亮

• 样式的书写格式

  • 外联样式（优先级最低）
    通过link标记引入外部css文件
    拓展性强 多个页面可以使用 （上线多使用外联）
  • 内部样式（优先级其次）
    在head里面写入;
    只适用于当前页面 ，不可多个页面使用

• 内联样式（优先级最高）
  在标记里面写入：

  
  优先级最高 一般测试页面的时候使用它

• 选择器

  • 标签选择器 div{} 选择所有div元素
  • id选择器 #id{} 选择id=”id”的所有元素
  • 类选择器 .class{} 选择class=”class”的所有元素
  • 群组选择器 h1,h2,h3,h4,h5,dl,dt,dd{}
  • 嵌套选择器 div span{}
  • 伪类选择器 a：hover{用于当用户把鼠标移动到元素上面时的效果}
    a:active{用于用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动作也就完成了)}
    
    a:link {未访问的链接}
    a:visited {已访问的链接} /* 已访问的链接 */
    对于表单元素：ie7以下不支持伪类

• 选择器命名规则

  • 26个字母组合 见名知义

• 内边距、外边距

  • 含义：
    padding是控件的内容相对控件的边缘的边距．margin是控件边缘相对父空间的边距．
    
    在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。
    
    在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。
  • padding(改变盒子里的内容位置)
    
    1、语法结构
    
    （1）padding-left:10px; 左内边距
    
    （2）padding-right:10px; 右内边距
    
    （3）padding-top:10px; 上内边距
    
    （4）padding-bottom:10px; 下内边距
    
    （5）padding：10px; 四边统一内边距
    
    （6）padding:10px 20px; 上下、左右内边距
    
    （7）padding:10px 20px 30px; 上、左右、下内边距
    
    （8）padding:10px 20px 30px 40px; 上、右、下、左内边距
    
    2、可能取的值
    
    （1）length 规定具体单位记的内边距长度
    
    （2）% 基于父元素的宽度的内边距的长度
    
    （3）auto 浏览器计算内边距
    
    （4）inherit 规定应该从父元素继承内边距
    
    3、浏览器兼容问题
    
    （1）所有浏览器都支持padding属性
    
    （2）任何版本IE都不支持属性值“inherit”
  • margin
    
    1、语法结构
    
    （1）margin-left:10px; 左外边距
    
    （2）margin-right:10px; 右外边距
    
    （3）margin-top:10px; 上外边距
    
    （4）margin-bottom:10px; 下外边距
    
    （5）margin:10px; 四边统一外边距
    
    （6）margin:10px 20px; 上下、左右外边距
    
    （7）margin:10px 20px 30px; 上、左右、下外边距
    
    （8）margin:10px 20px 30px 40px; 上、右、下、左外边距
    
    （9）margin: 0 auto;实现位置居中
    
    2、可能取的值
    
    （1）length 规定具体单位记的外边距长度
    
    （2）% 基于父元素的宽度的外边距的长度
    
    （3）auto 浏览器计算外边距
    
    （4）inherit 规定应该从父元素继承外边距
    
    3、浏览器兼容问题
    
    （1）所有浏览器都支持margin属性
    
    （2）任何版本IE都不支持属性值“inherit”
    

• 盒子模型

  • 什么是盒子模型：
    盒子模型有两种，分别是w3c盒子子模型和IE盒子模型
  • w3c盒子模型包括margin border padding content，并且content不包含其他部分
  • IE盒子模型包括margin border padding content，与w3c盒子模型不同的是 content包含了border padding

• 为盒子模型设置宽度，结果只是设置了内容的宽度，这个不合理。如何解决这一问题？

  • 答案就是给盒子设置属性box-sizing:border-box

• 浮动的定义

  使元素脱离文档流，按照制定的方向进行移动，遇到父级边界或者相邻元素的浮动元素停下来

• display: inline-block;(行块级元素)

  • 块级元素在一行显示
  • 支持行内元素设置宽高
  • 换行被解析了导致盒子之间有距离。办法：在*设置｛font-size:0px;｝
  • 不设置宽度，则由盒子内容的宽度撑开
  • 在IE6/7下不支持
  • 测试bug 用到ietest

• 浮动的升级版本：float

  • 块级元素在一行显示
  • 让行内元素支持宽高
  • 不设置宽度，则由盒子内容的宽度撑开
  • 浮动会让页面元素脱离文档流
  • 提升半层层级（元素本身有上下两个半层，下半层为元素本身的属性，比如为元素的边框，背景等；上半层为元素的内容，比如为元素的文字与图片等）。

• 文档流

  • 页面文档中可显示对象在排列时所占用的位置

• 清楚浮动的三种方法

  • 方法一：添加新的元素 、应用 clear：both；

• [ ] HTML

<div class="tab">    <div class="tab_l">        <ul class="list">            <li class="active">女装</li>            <li>男装</li>            <li>女鞋</li>            <li>男鞋</li>            <li>珠宝</li>        </ul>    </div>    <div class="tab_r"></div>    <div class="clear"></div></div>

• [ ] CSS

 .clear{            clear: both;        }

• 方法二：父级div定义 overflow: auto
• [ ] 原理：使用overflow属性来清除浮动有一点需要注意，overflow属性共有三个属性值：hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动，但切记不能使用visible值，如果使用这个值将无法达到清除浮动效果，其他两个值都可以，据说auto个对seo比较友好，另个hidden对seo不是太友好

• [ ] HTML

<div class="tab over-flow"> //这里添加了一个class    <div class="tab_l">        <ul class="list">            <li class="active">女装</li>            <li>男装</li>            <li>女鞋</li>            <li>男鞋</li>            <li>珠宝</li>        </ul>    </div>    <div class="tab_r"></div></div>

• [ ] CSS

 .over-flow{    overflow: auto; zoom: 1; //zoom: 1; 是在处理兼容性问题        }

• 方法三 :after 方法：（注意：作用于浮动元素的父亲）
• [ ] 其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果

• [ ] HTML

<div class="tab outer"> //这里添加了一个class    <div class="tab_l">        <ul class="list">            <li class="active">女装</li>            <li>男装</li>            <li>女鞋</li>            <li>男鞋</li>            <li>珠宝</li>        </ul>    </div>    <div class="tab_r"></div></div>

• [ ] CSS

.outer {zoom:1;}    /*==for IE6/7 Maxthon2==*/.outer :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}   /*==for FF/chrome/opera/IE8==*/

• [x] 其中clear:both;指清除所有浮动；content: ‘.’; display:block;对于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。