CSS 基础知识
本文介绍 CSS 的概念、发展史、浏览器内核、选择器的种类的权重、盒子模型、文本属性、伪类、伪元素、浮动、定位、BFC 的含义和应以及属性的书写顺序

# CSS 基础知识

# CSS 简介

# 发展史

  1. 1990 年,蒂姆·伯纳斯·李(Tim Berners-Lee)发明万维网,创造 HTML 超文本标记语言,那时并没有提供网页装饰的方法
  2. 20 世纪 90 年代,HTML 飞速发展,加了很多功能,代码越来越臃肿,HTML 变得越来越乱,于是 CSS 诞生了
  3. 1996 年 12 月,W3C 推出了 CSS 规范的第一版本
  4. 1997 年,W3C 颁布 CSS1.0 版本 ,CSS1.0 较全面地规定了文档的显示样式,可分为选择器、样式属性、伪类等部分
  5. 1998 年,W3C 发布了 CSS 的第二个版本,目前的主流浏览器都采用这标准
  6. 2005 年 12 月,W3C 开始 CSS3 标准的制定,到目前为止该标准还没有最终定稿
  7. 经过 20 多年的发展,CSS 工程化的方案不断完善,涌现许多 CSS 预处理和后处理工具,如 Sass、PostCSS 等

# 相关概念

  1. 定义:cascarding style sheet,层叠样式表

  2. 分类:

    • 内联样式:标签的 style 属性上定义

    • 内部样式表:head 内的 style 标签定义

    • 外部样式表:link 标签引入

      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="UTF-8">
          <title>Index</title>
          <link rel="stylesheet" href="main.css">
          <style type="text/css">
              div {
                  width: 200px;
                  height: 50px;
                  background-color: red;
              }
          </style>
      </head>
      <body>
      <div style="width: 200px; height: 50px"></div>
      </body>
      </html>
      
  3. 优先级

    内联样式 > 内部样式表 > 外部样式,定义相同样式,内联优先于内部样式,内部样式优先于外部样式

# 浏览器

  1. 组成部分:shell + 内核

  2. 主流浏览器及内核

    • chrome:webkit/blink
    • safari:webkit
    • firefox:gecko
    • ie:trident
    • opera:presto

    webkit 是谷歌和苹果共同开发的内核

    opera 现在属于 360 和昆仑万维

  3. 内核包括渲染引擎和 JavaScript 引擎

# 选择器

# 种类

  1. id 选择器

    /*选择 id 为 box 的元素*/
    #box{
        width: 100px;
        height: 100px;
        background-color: red;
    }
    
    <div id="box"></div>
    
  2. 类选择器

    /*选择 class 为 box 的元素*/
    .box{
        width: 100px;
        height: 100px;
        background-color: red;
    }
    
    <div class="box"></div>
    <div class="box"></div>
    
  3. 标签选择器

    /*选择标签名为 div 的元素*/
    div{
        width: 100px;
        height: 100px;
        background-color: red;
    }
    
    <div></div>
    <div></div>
    
  4. 属性选择器

    /*选择有 href 属性的元素*/
    [href]{
        color: blue;
    }
    /*选择有 id 属性且等于 box 的元素*/
    [id="box"]{
        width: 100px;
        height: 100px;
        background-color: red;
    }
    
    <div id="box"></div>
    <a href="http://baidu.com">百度一下</a>
    
  5. 并列选择器

    /*选择是 div 标签且 id 等于 box 的元素*/
    div.box{
        width: 100px;
        height: 100px;
        background-color: red;
    }
    
    <div class="box"></div>
    <p class="box"></p>
    
  6. 后代元素选择器

    /*选择 strong 标签内的所有 em 标签元素*/
    strong em{
        color: red;
    }
    
    <strong>
        <em>123</em>
    </strong>
    <p>
        <em>123</em>
    </p>
    
  7. 子元素选择器

    /*选择 strong 标签内的所有是 em 标签的子元素*/
    strong > em{
        color: red;
    }
    
    <strong>
        <em>123</em>
        <p>
        	<em>123</em>
    	</p>
    </strong>
    
  8. 兄弟元素选择器

    /*选择 div 后的第一个 strong 标签*/
    div + strong {
        color: red;
    }
    
    /*选择 div 后所有 p 标签*/
    div ~ p {
        color: blue;
    }
    
    <div></div>
    <strong>abc</strong>
    <strong>def</strong>
    <p>123</p>
    <p>456</p>
    
  9. 分组选择器

    /*选择 strong 标签和 p 标签*/
    strong,p{
        color: red;
    }
    
    <strong>123</strong>
    <p>123</p>
    
  10. 通配符选择器

    /*选择所有标签元素*/
    *{
        margin: 0;
        padding: 0;
    }
    

# 权重

  1. 选择器权重值,256 进制
    • 通配符 0
    • 标签、伪元素 1
    • class、属性、伪类 10
    • id 100
    • 内联样式 1000
    • !important 正无穷
  2. 权重值求和比较,可以得到有效样式,这里的正无穷加一大于正无穷

# 盒子模型

  1. Box Model,一般我们将双标签、具有宽高属性的 HTML 元素成为盒子、容器
  2. 盒子的组成
    • Margin(外边距) - 清除边框外的区域,是透明的
    • Border(边框) - 围绕在内边距和内容外的边框
    • Padding(内边距) - 清除内容周围的区域,是透明的
    • Content(内容) - 盒子的内容,宽高所划分的区域
  3. box-sizing 属性
    • content-box:在 width/height 之外绘制 border、padding
    • border-box:在 width/height 之内绘制 border、padding
  4. body 元素的 margin
    • 一般浏览器默认 8px
    • IE8 16px 8px, IE7 16px 11px
  5. 背景 backgroud 属性
    • backgroud-image: 通过url() 指定路径
    • background-position: 指定横纵坐标上背景图片的起始位置,如top left/top right/center center/50% 60%/100px 200px
    • background-repeat: 指定横纵坐标上背景图片是否重复,no-repeat/repeat/repeat-x/repeat-y
    • background-siz: 指定背景图片的尺寸100px 100px|40% 60%|cover|contain,cover 将图片放大以至于完全能覆盖内容区域,contain 将图片放大且使内容区域恰好可以容纳其尺寸
    • background-attachment: 指定背景图片随页面滚动的方式,scroll|fixed

# 文本属性

  1. font-family设置字体,当属性值是中文或多个英文单词组成的时候,要用双引号包起来

    font-family: Arial,"微软雅黑","Times New Roman"
    
  2. color设置字体颜色,可使用颜色英文单词、十六进制颜色、rgb()

  3. font-weight设置字体粗细,bolder/bold/normal/100—900(400 相当于 normal)

  4. text-align设置对齐方式,left/right/center

  5. text-decoration设置文本修饰,none/underline/overline/line-through

  6. text-indent设置缩进,数值或百分比

  7. line-height设置行高,文本会在行高范围内居中

  8. 单行文本截断

    text-overflow: ellipsis
    overflow-x:  hidden
    white-space:  nowrap
    
  9. 容器内多行文本垂直居中

    容器,如 div,设置 display 为 table

    容器内文本元素,如 span,设置为 display 为 table-cell,vertical-align 为 middle

# 伪类、伪元素

  1. 伪类:用于定义元素特殊状态下的样式

    • :hover鼠标悬停
    • :foucs获得焦点
    • :checked单选或多选按钮被选中
    • first-chirld/last-chirld在所有兄弟元素中处于第一个或最后一个
    • first-of-type/last-of-type在所有兄弟元素中的相同标签中处于第一个或最后一个
    • nth-childnth-of-type 同上,可指定第几个
    • :target当前活动的 HTML 锚点
  2. 伪元素

    ::before::after,在元素的内容前或后插入新内容

    必须通过 content 属性指定内容,content 可以使用字符串、attr(元素属性)、url(图片等的资源链接)

# 浮动

  1. float属性指定元素浮动的方向,浮动的元素脱离当前文档流,进入浮动流

  2. 块级元素无法识别浮动元素的位置,内联、内联块、普通文本可以识别

  3. 将几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻

  4. clear 属性定义了元素的哪边上不允许出现浮动元素,常用来用来清除浮动

    .clearfix::after {
        content: "";
        display: block;
        clear: both;
    }
    

# 定位

  1. position属性指定定位的方式

    • static: 默认
    • relative: 相对自身原位置定位,不影响原位置所占空间
    • fixed: 相对于浏览器窗口定位,不占空间
    • absolute: 相对于最近的已定位父元素定位,没有符合的父元素则相对于整个文档定位,不占空间
    • sticky: 类似于relative,当元素滚动出可视范围后,表现为 fixed
  2. top/bottom/left/right属性调整定位的相对位置

  3. z-index属性控制多个定位元素的层叠顺序,作用于最近的已定位父元素相同的定位元素之间

    具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面

    如果两个定位元素重叠,没有指定 z-index,在 HTML 代码中最后定位的元素将被显示在最前面

# BFC

  1. BFC:block formating context,块级格式化上下文

  2. 文档流分为普通流 normal flow 和浮动流 float flow,BFC 属于普通流,不会影响其他元素

  3. 几种 BFC 场景

    • body 元素

    • 浮动元素

    • position 为 absolute 或 fixed

    • display 为 inline-block 或 tabe-cell

    • overflow 为 hidden auto scroll

  4. margin 塌陷指当子元素设置浮动时,父元素高度将无法被撑开,解决方法如

    • 设置父元素为 BFC
    • 利用伪元素::after清除浮动
  5. margin 合并指两个普通的兄弟元素,在垂直方向上的 margin 是合并的,也可通过设置 BFC 来解决

# 属性书写顺序

  1. 位置属性(position, top, right, z-index, display, float 等)
  2. 尺寸属性(width, height, padding, margin, border)
  3. 文字属性(font, line-height, letter-spacing, color- text-align 等)
  4. 装饰属性(background, box-shadow 等)
  5. 其他属性(animation, transition 等)
Comment here, be cool~

Copyright © 2020 CadeCode

Theme 2zh powered by VuePress

本页访问次数 0

Loading