CSS基础

Posted 2021-08-15 w0000

选择器

• 标签选择器
  • p{}
• 类选择器
  • .class1{}
• id选择器

  • • class1{}

• 通配符 *
• 后代选择器 匹配标签下所有元素//
  • ul li a{}
  • .className li a{}
• 子元素选择器 仅匹配子元素/
  • .className > a{}
• 并集选择器|
  • div,ul {}
• 伪类选择器
  • 链接伪类选择器
    • a:link /选择所有未被访问过的链接/
    • a:visited /选择所有已被访问过的链接/
    • a:hover /选择鼠标悬停的链接/
      • .classA:hover .classB {}//鼠标经过classA时，对classB操作
    • a:active /选择活动链接(鼠标按下未弹起的链接)/
  • focus 伪类选择器 选取获得焦点（光标）的表单元素
    • 一般情况类表单元素才能获取，因此这个选择器主要针对表单元素
    • input: focus{}

字体

• font-style//字体样式（italic斜体,normal正常）
• font-weight//字体粗细（700加粗，400正常）
• font-size/line-height//字体大小（px）// 12px/1.5（1.5：行高为当前文字大小1.5倍）
• font-family//字体系列，取首位有效字体
• 字体复合属性顺序， font-style font-weight 可省略
  body{
  font: font-style font-weight font-size/line-height font-family
  }

文本

• color red/#FFFFFF/rgb(0,0,0)
• text-align 文本对齐
  • left(默认)
  • right
  • center
• text-decoration 下划线
  • underline
  • line-through
  • overline
  • none
• text-indent 缩进
  • text-indent: 3em;//3个当前文字距离
  • text-indent: 30px;
• line-height 行间距
  • line-height: 25px
  • 垂直居中：行高==盒高
• css 引入
  • 内部样式表

       .red_box {
           width: 500px;
           height: 200px;
           color: red;
           background-color: aqua;}</style>```
    

  • 行内样式表
    • <p style = "color: red;">风雨过后</p>
  • 外部样式表
    • <link rel="stylesheet" href="style.css">
• padding 属性是以下各内边距属性的简写属性：
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

块元素 行内元素 行内块元素

• 块元素

  • -

    • 等
    • 可以控制宽度高度内边距
    • 宽度默认是父级宽度100%
    • 独占一行
    • 容器
    • 文字类元素内不能使用块级元素

      -

  • 行内元素
    • 等
    • 一行可以显示多个行内元素
    • 高宽度设置无效
    • 默认宽度是它本身的宽度
    • 行内元素只能容纳文本或其他行内元素
    • 链接内不能放标签
    • 特殊情况里面可以块级元素， 转换块级模式
  • 行内块元素
    • 和相邻行内元素（行内块）在一行上，但是他们之间会有空白间隙，一行可以显示多个
    • 默认宽度就是它本身内容的宽度
    • 高度行高外边距可控制
  • 元素显示模式转换
    • 行内元素a转换为块级元素

    • 转换为行内元素（不能设置宽高）
      • display: inline
    • 转换为行内块
      • display: inline-block

  背景

  • 背景颜色
    • background-color :transparent; //默认透明
  • 背景图片
    • background-image: (url)
  • 默认水平和垂直方向平铺
    • background-repeat: repeat | no-repeat | repeat-x | repeat-y
  • 位置
    • background-position: x y;background-position: left top;
    • background-position: top|center|bottom|left|center|right
    • 使用方位名词与顺序无关,省略时居中
  • 是否滚动
    • background-attachment: fixed|scroll...
  • 复合属性 background :颜色 地址 平铺 滚动 位置
    • background: transparent url(x.png) no-repeat fixed top
  • 背景色半透明
    • background: rgba(0,0,0,0.3)//a 不透明度 仅背景颜色
      • background: rgba(0, 0, 0, 0.6) url(./pic/bgi.png) no-repeat fixed top;
    • opacity: 0.3;//所有子元素继承相同透明度

  CSS特性

  • 层叠性 //就近
  • 继承性 //子继承父
  • 优先级
    • 继承或* < 元素选择器< 类选择器 < id选择器 < 行内style < important // color: xxx!important 权重((0,0,0,0) (0,0,0,1) 0010,0100,1000,无穷大)
    • 权重的叠加,不进位
    • 继承：0
      • 不继承:
        -li: .nav li(10+1=0011)

  盒子模型

  • border边框 (border/border-top/border-left...)

    • border-width//边框的粗细px
    • border-style//边框样式//实线 solid 虚线dashed 点线dotted...
    • boeder-color
    • border-collapse//表格细线边框
    • border 复合写法 border: 1px solid transparent
    • 边框影响盒子大小（边框width独立于盒子宽高）
    • border-radius: 5px;
      • border-radius: 50%;//长度50%
      • border-radius: 10px 20px 30px 40px;//左上-顺时针
      • border-top-left-radius: 10px;//左上

  • content 内容px

  • padding 内边距

    • 边框与内容之间的距离
    • 复合写法
      • 一个值:padding: 2px;上下左右
      • 两个值:padding: 2px 5px;上下2，左右5
      • 三个值:padding: 1px 2px 3px;上1 左右2 下3
      • 四个值padding:1px 2px 3px 4px;上1 右2 下3 左4 (顺时针)
    • 影响盒子大小
      • 盒子本身没有指定width/height属性，则此时padding不会撑开盒子宽/高

  • marjin 外边距 盒子之间距离

    • marjin-botton/top/
    • 复合同padding
    • 水平居中块级盒子
      • 盒子必须指定宽度
      • 左右外边距设置为auto
      • marjin-left: auto;marjin-right: auto;
      • marjin: 0 auto
    • 水平居中行内元素
      • 父元素添加 text-aline: center
    • 水平居中行内块元素
      • 父元素添加 text-aline: center
    • 外边距合并-嵌套块元素塌陷
      • 父子块同时添加marjin，仅父块移动(max 2)，子块相对父块不动
        • 为父元素定义(单/多)边框 border 分离块
          • border: 1px solid transparent;
        • 为父元素定义内边距
        • 为父元素添加overflow:hidden

  • 清除内外边距 * { margin: 0; padding: 0; }

  • 行内元素为了照顾兼容性，尽量只设置左右内外边距，不设置上下内外边距(可以转换成行内块元素 display:inline-block)

  • 阴影

    • box-shadow: h-shadow v-shadow blur spread color inset;
    • 水平位置允许负值
    • 垂直位置的阴影
    • (可选)模糊距离//虚实
    • (可选)尺寸
    • (可选)颜色
    • (可选)将外阴影(outset)改为内阴影inset

  布局方式

  • 多个块级元素纵向排列-标准流
  • 多个块级元素横向排列-浮动（ - 行内块空隙）

  标准流

  • 块级，行内元素

  浮动

  • 浮动元素会脱离标准流(脱标)
    • 不保留原先的位置，（浮动图层）
  • 浮动元素会一行内显示并且元素顶部对齐
  • 浮动元素会具有行内块元素的特性
    • 行内元素/块元素添加浮动->行内块元素(width,height)
  • 与标准流父级一起使用；一浮全浮
  • 浮动只影响后面的标准流，不影响前面的标准流
    • 元素浮动，后面的标准流占据浮动元素（重叠），
    • 不影响浮动元素前面的标准流（浮动元素前面的标准流独占一行，浮动元素另起一行，上限为标准流底部）
  • 清除浮动
    • 清除浮动元素脱离标准流造成的影响
    • 闭合浮动 只让浮动在父盒子内部影响不影响父盒子外面的其他盒子
    • 父级盒子不方便给高度，浮动盒子不占有位置，导致父级盒子高度为0
      • 额外标签法（隔墙法）
        • 在浮动元素末尾添加一个空的块级标签
        • div{clear: both;}
      • 父级元素添加overflow: //hidden
      • :after伪元素 父级添加clearfix类

        .clearfix:after {
          content: "";
          display: block;
          height: 0;
          clear: both;
          visibility: hidden;
        }
        .clearfix
        {
          *zoom:1;
        }
        

      • 双伪元素

      .clearfix:before,
      .clearfix:after {
        content: "";
        display: table;
      }
      .clearfix:after
      {
        clear:both;
      }
      .clearfix
        {
          *zoom:1;
        }
      

  定位position

  • 静态定位 static
  • 相对定位 relative
    • 相对原来的位置
    • 不脱标，保留原来位置
  • 绝对定位 absolute
    • 没有父元素或父元素未定位，以浏览器为基准(Document)
    • 父元素有定位（相对，绝对，固定定位），则以最近一级有定位的父元素为参看点(子绝父相)
    • 脱标，不占有位置
    • 水平/垂直居中
      • left: 0%
      • margin-left: -1/2width px;
  • 固定定位 fixed
    • 固定于浏览器可视区的位置（浏览器页面滚动时元素位置不会改变）
    • 不占有原来位置
  • 粘性定位 sticky
    • 以浏览器可视窗口为参照点（fixed）
    • 占有原先的位置（relative）
    • 必须添加top/left/right/bottom之一才有效
    • 不兼容ie
  • 定位叠放次序 z-index
    • 只有定位的盒子有z-index
    • 数值越大越靠上
    • z-index: 1;
  • 定位特殊特性
    • 行内元素添加绝对定位或固定定位，可以直接设置高度和宽度
    • 块级元素添加绝对定位或固定定位，如果不给高度或宽度，默认大小是内容的大小
    • 浮动元素只会压住下面标准流的盒子，不会压住文字或图片（文字环绕）
    • 决定定位或固定定位会压住所有内容

  元素显示 隐藏

  • display
    • display: none;//隐藏，位置不保留
    • display: block;//显示/块
  • visibility
    • visibility: visible;
    • visibility: hidden;//隐藏后继续保留原来位置
  • overflow
    • 溢出
    • visible(默认)
    • hidden
    • scroll//显示滚动条（溢出and不溢出）
    • auto//溢出显示滚动条
    • 可能隐藏有溢出的定位元素

  精灵

  • 精灵图
    • 将多个小背景图整合到一个大图片 减少请求次数

本文来自博客园，作者：w0000，转载请注明原文链接：https://www.cnblogs.com/w0000/p/15141190.html