CSS

标签：imp   无效   sha   方式   指定位置   继承   border   line   并集   

• 一.CSS和HTML的四种结合方式
  • style属性
    
  • （写在head标签里面）
    
  • ----某些浏览器下不起作用
  • 使用头标签link引入外部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命令 被赋予最大的优先级
      • 继承/*
  • 三.盒子模型
    • 盒子
      • 外边距 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
        • 边偏移相对于电脑屏幕

  CSS

  标签：imp   无效   sha   方式   指定位置   继承   border   line   并集   

  原文地址：https://www.cnblogs.com/margot921/p/12419291.html