前端基础知识梳理，从css开始

greet_eason
389 阅读5分钟

前端基础知识梳理，从css开始

背景

“

近日打算对自己的基础知识来一次梳理，就从html跟css开始。

1. 主流浏览器及内核

作为前端工程师，平常打交道最多的毫无疑问是浏览器，我们众所周知的主流浏览器有：IE，Firefox，Google，Safari，opera。IE的内核为trident，Firefox内核为Gecko，Google与Safari的内核是webkit 新版谷歌内核自研blink， Opera内核为presto

2. CSS引入

页面中css的引入方式主要有：

  1. 在head标签内用style标签引入
  2. 在标签内使用style 行内样式
  3. 在head标签内使用link标签，用href指向css文件

3. 选择器

常用选择器有：

  1. id选择器 id=""
  2. class选择器 class=""
  3. 标签选择器 div
  4. 通配符选择器 *{}
  5. 属性选择器 [id=""]{}
  6. 伪类选择器 a:hover{}
  7. 伪元素::before ::after

4. 选择器权重

!important>行间样式>id>class|| 属性选择器>标签选择器>通配符。

选择器 权重
!important 正无穷
行间样式 1000
id 100
class/属性选择器/伪类选择器 10
标签选择器/伪元素选择器 1
通配符 0

权重之间进制：256，只要写在一行的选择器，权重可以相加

5. 行级元素，块级元素，行级块元素

  1. 常见行级元素：span, strong, em, a, del。特点是：不独占一行，不可以css改变宽高
  2. 常见块级元素：div, p, ul, li, ol, form。特点是：独占一行，css可以改变宽高。
  3. 行级块元素：img。 内容决定大小(不独占一行)，可以改变宽高

6. 盒子模型

抽象盒子由4部分组成：内容（content），内边距（padding），边框（border），外边距（margin）。

  • 盒子模型分为两种：IE盒子模型，标准盒子模型。
  • IE盒子模型：box-sizing:content-box;他的宽高为border+padding+content。
  • 标准盒子模型：box-sizing:border-box；他的宽高就是content的宽高。

6.css知识(细节知识)

  1. font-size设置字体大小（设置的是字体的高）
  2. font-style:italic 斜体
  3. color颜色 rgb光学三原色 每个原色00到ff代表饱和度
  4. 单行文本垂直居中，标准做法是line-height=height
  5. 首行缩进用text-indent:2em 首行缩进2单位
    • px：像素 相对单位（像素px是相对于显示器屏幕分辨率而言的，而且在特定设备上总是一个近似值），
    • em：相对单位（相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。特点：继承父元素字体大小），
    • rem：相对单位（与em类似，但是特别是相对于根元素）
  7. a标签去除下划线 text-decoration:none
  8. 绝对定位absolute：脱离原来位置进行定位（相对于最近的有定位的父级进行定位，如果没有，就相对于文档进行定位）。相对定位：保留原来位置进行定位（相对于自己原来的位置进行定位）。固定定位fixed：以不变应万变。

知识拓展：css画三角形可以使用border：

   <div class="div"></div>
    <div class="box"></div>
     .div {
        width: 0px;
        height: 0px;
        border: 100px solid #f40;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
      }
      .box {
        width: 0px;
        height: 0px;
        border-left: 100px solid #f40;
        border-right: 100px solid transparent;
        border-bottom: 100px solid transparent;
        border-top: 100px solid transparent;
      }

展示：

7. BFC

  • 全称：block format context（块级格式化上下文）。是一个独立不干扰外界也不受外界干扰的盒子。
  • 创建bfc的常用方式有：position：absolute;display:inline-block;float:left/right;overflow:hidden;
  • BFC布局规则： 1.内部的Box会在垂直方向，一个接一个地放置。 2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 4.BFC的区域不会与float box重叠。 5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 6.计算BFC的高度时，浮动元素也参与计算。

8. 浮动

浮动元素产生了浮动流，会有以下效果：

  • 产生了浮动流的元素，块级元素看不到
  • 产生了bfc的元素和文本类属性元素（带有inline属性），以及文本都可以看到浮动元素
  • 浮动清除可以用伪元素::after{content:"",display:block;clear:both} 知识拓展：absolute和浮动在内部把元素转换成了inline-block 块级元素：
<div class="div1"></div>
<div class="div2"></div>
 .div1 {
        width: 100px;
        height: 100px;
        background-color: black;
        float: left;
      }
      .div2 {
        width: 200px;
        height: 200px;
        background-color: green;
      }

效果：

文本：

<div class="div1"></div>123
 .div1 {
        width: 100px;
        height: 100px;
        background-color: black;
        float: left;
      }

效果：

文本类属性元素（img标签）：

<div class="div1"></div>
    <img
      src="http://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1587989144&t=66c390a0a7ee36119717f6669127d126"
      alt=""
    />

效果：

触发bfc：

 .div1 {
        width: 100px;
        height: 100px;
        background-color: black;
        float: left;
      }
      .div2 {
        overflow: hidden;
        width: 200px;
        height: 200px;
        background-color: red;
      }

效果：




本文参考：

[布局概念] 关于CSS-BFC深入理解

总结：

由于本人技术能力所限，如果相关错误请及时与我联系修改，谢谢！

avatar
文章
阅读
粉丝