CSS基础知识(5)

页面布局：
    盒子模型(框模型)
      margin、padding、border
    float 排列盒子
      clear清除浮动，修正浮动造成的bug
      overflow：hidden  解决子元素浮动后，父元素不自动调整高度的问题
    position
      static  默认
      absolute  绝对  元素可以重叠
      relative  相对  元素设置偏移，不能重叠
      偏移  relative 相对于父级元素偏移
            absolute  相对离他最近的已定位父级元素偏移，如果没有已定位的父级元素，则相对于body偏移
       fixed 可以实现一个固定在浏览器某个位置并且不会随着页面滚动而滚动的元素，永远相对于body偏移，不会在页面中占空间，不存在标准流
    z-index定义元素的层叠顺序，值越大越靠上，可取值范围是正值、负值、0.如果要手动调整元素层叠顺序，要求元素已定位。

基础选择器
    标签选择器
    通用选择器
    自定义选择器
         类选择器:可反复多次调用，一个元素可以有多个类
         id选择器：一个id只能用一次，一个元素只能有一个id
复合选择器
    群组选择器：多个选择器，用逗号隔开，多个选择器的关系是并列
    后代选择器：多个选择器，用空格隔开，表达的是父元素中所有的某个子元素
    子代选择器：多个选择器，用大于号连接，只选择父元素中的直接子元素
伪类选择器
    链接伪类：定义链接样式
    动态伪类：:hover   :avtive  :focus

兄弟选择器：有同一个父级元素
    相邻兄弟选择器：有同一个父级元素，且两个元素位置是紧挨的，且是选择的是一个元素后面的紧挨元素，不能选择前面的紧挨元素。用“+”号相连，如p+b选择的是p的相邻兄弟选择器b
    通用兄弟选择器：两个元素有同一个父级元素，但是不一定必须是紧挨着的，用“~”连接。选择的是某元素后面的所有元素，前面的元素不行。

属性选择器：能够将元素附带的属性用于选择器中，从而对带有属性的元素设置样式，用方括号[]括起来，如[title]{color:red;}选择带有title属性的所有元素，并将其颜色定义为red。
    例：
       [id]  附带id属性的元素
       p[id] 附带id属性的<p>元素
       p[id][class] 附带id属性和class属性的<p>元素
       p[id="summary"]  附带id属性的<p>元素，其中id属性的值为summary
       p[class~="myclass"] 附带class属性的<p>元素，其中class属性的值是以空格隔开的单词列表，myclass也是单词列表中的一个单词
       p[class^="b"] class属性值以“b”开头的所有<p>元素
       p[class*="b"] class属性值包含子串“b”的所有<p>元素
       p[class$="b"] class属性值以“b”结尾的所有<p>元素

目标伪类：指向一个目标，突出显示活动的HTML的锚，用于选取当前活动的目标元素。只用于锚点链接。活动状态指的是点击了哪个锚点，那个就处于活动状态。一次只能有一个活动状态。
语法： E:target  选择匹配E的所有元素，且匹配元素被URL指向

元素状态伪类
:enabled 匹配每个已启用的元素（大多用在表单元素上）只要没有加disabled，都是enabled
:disabled 匹配每个被禁用的元素（大多用在表单元素上）
:checked 匹配每个已被选中的input元素（只用于单选按钮和复选框，单选框和复选框会有点不好使看不到效果，可以给单选框或复选框加宽和高配合js使用制作特殊的效果）

结构伪类
:first-child 匹配属于其父元素的首个子元素
:last-child 匹配属于其父元素的最后一个子元素
:empty 匹配没有子元素（包括文本节点）的每个子元素，只要是空的元素都符合
:only-child 匹配属于其父元素的唯一子元素
如：li:first-child{}匹配其父元素ul的第一个子元素

否定伪类
:not(selector) 匹配非指定元素/选择器的每个元素
如 input:not([type="text"])

伪元素选择器
伪元素
:first-letter 选取指定选择器的首字母或第一个字，常用于排版细节，如首字母突出显示、下沉等
:first-line 选取指定选择器的首行
::selection 选择器匹配被用户选取的部分（页面文本可以使用鼠标拖拽的方式直接选中）::selection里面不是所有属性都好使的，只有color和background好使。前面可以加上标签如p::selection

内容生成：
内容属性 content:"内容";就是在选择器中添加该内容
p:before{  
    content:"台词：";
}伪元素：:before 和 :after
content属性与:before及:after伪元素配合使用，来插入生成内容。 常用的取值有： url（图像）， 字符串(纯文本), 计数器。

计数器：
案例：
body  {counter-reset:chapter;}h1:before  {content:“第” counter(chapter) "章 ";}
h1  {counter-increment:chapter;}总结：
counter-reset 属性用于定义计数器，并设置其初始值 默认为0，可以设置或重置为正值或负值。 如果希望所定义的计数器在整个页面都能使用，则可以为 <body> 元素声明计数器 ，多个计数器名称之间使用空格隔开。 必须结合counter()函数和counter-increment属性使用 。
counter() 函数用于为指定计数器创建计数字符串    语法为：counter(name) name 为计数器的名称
counter-increment 属性用于设置某个选择器每次出现的计数器增量，默认增量是1， 计数器可以递增（或递减）某个值 ，可以是正值或负值。
多列属性：
column-count属性：规定元素应该被分隔的列数column-gap属性:规定列之间的间隔column-rule属性:规定列之间的分隔线宽度、样式和颜色 。语法为column-rule: width style color; 如column-rule:2px solid red;

多列属性有浏览器兼容性问题，解决方式：
Internet Explorer 10 和 Opera 支持多列属性
Firefox 需要前缀 -moz-
Chrome 和 Safari 需要前缀 -webkit-

CSS Hack利用浏览器的漏洞来实现想要的效果，但是这种方式可能会出现不可预料的后果。现在主要用来解决高版本对低版本兼容性问题。
浏览器的类型及版本的不同会造成CSS效果不尽相同，不同厂商的浏览器会有所不同，同一厂商的浏览器的不同版本也会有所不同，需要针对不同的浏览器编写不同的CS，或者为不同版本的浏览器定制编写不同的CSS效果，从而实现浏览器兼容。在IE6中，margin和padding会变大，另外text-align也会不一样，元素的高度也会随内容变化，不管设置的是多高

浏览器在解析代码时，为什么会不一样呢，主要是因为存在着标准模式和混杂模式。IE6之前，不同浏览器间没有兼容性可言，IE6之后浏览器厂家间开始寻求标准统一，但仍允许向前兼容，于是产生了不同的运行模式。浏览器运行模式可分为：混杂模式、标准模式、准标准模式

总结：
复杂选择器：
   兄弟选择器   相邻兄弟（+）通用兄弟（~）  p+b   p~b
   属性选择器   筛选出指定的属性   input<value="text">
   目标伪类：:target 指定作为链接目标的元素
             <a href="#target">文字</a>
             <div id="target">点击时会变红</div>
            div:target{color:red}
   元素状态伪类：多用于表单
         :enabled   :disabled  :checked单选与多选专用
   结构伪类：:first-child   :last-child  :empty  :only-child  定义元素的父元素的（第一个）子元素
   否定伪类：:not(选择器)    :not([id])
   伪元素选择器：
         :first-line
         :first-letter
         ::selected
  内容生成：
       p:before:content:"段落"  content:url(图像路径)
  计数器
       counter-reset声明计数器并定义初始值，可以为负值
       counter（name）调用计数器
       counter-increment 定义计数器增量
  多列
      column-count:n;
      有兼容性问题，火狐需要加
  兼容性处理
      因浏览器对CSS代码解析的标准不同，所以会出现
   css hack 
  IE条件注释
      <!-[if IE 6]>
           针对IE6的CSS样式
      <![endif]-->
   if IE N   指定的IE版本
   if !IE N  排除指定的版本
   if lt IE 8  低于
   if lte IE 8  低于等于
   if gt IE 8  高于
   if gte IE 8  高于等于
   IE条件注释最多只支持到IE8,8以上不支持
   出现兼容性，可以给出问题的浏览器版本写可支持的css样式 写的时候要注意顺序，先写标准的，再写特殊的