CSS

一.CSS和HTML的四种结合方式

• • style属性
    <div style="color:green;">
  • <style type="text/css">CSS代码</style>（写在head标签里面）
    <style type="text/css"> div { color: red; } </style>
  • <style type="text/css">@import url(div.css)</style>----某些浏览器下不起作用
  • 使用头标签link引入外部css文件---一般使用
    <link rel="stylesheet" type="text/css" href="css文件的路径">

二.选择器

• • 标签选择器
    • 并集 和 （,）
      h2,h1 {color:silver;font: 28px Verdana;}
    • 交集 中的（ ）
      h3 p {color:silver;font: 28px Verdana;}
  • class选择器（.）
  • id选择器（#）
  • 派生选择器（ >+)
    • 后代（ ）
    • 子元素（>）
    • 相邻兄弟（+）
  • 属性选择器（[]）
    p[class~="important"] {color: red;}还有开头 结尾 包含等
  • 伪
    了解，浏览器的兼容性比较差
    • 伪类选择器（:）
      • 链接伪类
        • 原始 link
        • 悬停 hover
        • 点击 active
        • 点击之后 visited
      • first-child,nth-last-child(N),nth-child(Nn),lang,target 等
    • 伪元素
      • first-line,first-letter,before,after 等
  • 权重
    继承或者* 权重是0元素和伪元素 权重是1类选择器、元素选择器、伪类 权重是10ID选择器 权重是100行内样式 权重是1000!important命令 被赋予最大的优先级
    • 继承/* <元素 <选择器 <ID选择器<行内样式 <important

三.盒子模型

• • 盒子
    • 外边距 margin: 20px
    • 边框 border：2px solid red
      上 border-top 下 border-bottom 左 border-left 右 border-right
    • 内边距 padding：20px
    • 属性
      • box-sizing
        border-box 盒子大小为width content-box  盒子大小为 width + padding + border
      • box-shadow
  • 标签显示模式
    • 块级元素、行内元素、行内块元素
      块级元素​默认宽度容器的100%，都可容纳，盒子可控；行内元素​​默认宽度为内容的宽度，只能容纳行内元素，盒子只有水平方向的margin和padding可控,其他无效行内块元素​​同行,但是之间留有空隙，默认宽度为内容的宽度，盒子可控
    • 隐藏

四.浮动 float

• • 定义
    • 脱离标准普通流的控制，移动到其父元素(element)中的指定位置

五.定位 position

• • 定位模式
    • 自动定位 static
      • 默认方式
      • 无法使用边偏移和叠放次序z-index
    • 相对定位 relative
      • 有占位，原位
      • 边偏移是相对于原来位置
    • 绝对定位 absolute
      • (子绝父相)
      • 边偏移是相对于父，没有父就相对于浏览器
    • 固定定位 fixed
      • 边偏移相对于电脑屏幕