前端开发初学者日记

学习前端开发所遇到的知识点浅谈

层叠与继承的的概念

1.继承：

• 是指应用在某个标签/元素上的CSS属性传递给了内部嵌套的标签。

• 通常来说文本类的会被继承（字体、字号、颜色）

• chrome里面是灰色的表示没有继承

• 子元素会自动拥有父元素的某些CSS属性，文本类的属性会被继承

2.层叠：

• 层叠是一种机制，用于解决CSS声明冲突

• 层叠的过程

  1. 比较优先级（优先级低的淘汰）
  2. 比较特殊性（特殊性低的淘汰）
  3. 比较源次序（源次序靠前的声明淘汰）

• 一个声明的优先级与他的来源和重要性有关

  1. 来源
     • 作者样式表
     • 浏览器默认样式表
     • 用户样式表（可忽略不计）
  2. 重要性
     • 若属性值后跟上 !important 则表示一条重要声明
       • color:red; ==>普通声明
       • color:red!important; ==>重要声明

计算选择器的权重值

• 在声明冲突时用于决定最终的效果

  	嵌入	id	class	元素
  	a	b	c	d
  style	1	0	0	0
  id	0	1	0	0
  class、属性、伪类	0	0	1	0
  元素、伪元素	0	0	0	1
  通配符		0
  !important		最高

选择器的优先级

CSS选择器如下：

1. 标签名选择器 div { color：Red;} /即页面中的各个标签名的css样式
　　2.类选择器 .divClass {color:Red;} /即定义的每个标签的class 中的css样式
　　3.ID选择器 #myDiv {color:Red;} /即页面中的标签的id
　　4.后代选择器（类选择器的后代选择器） .divClass span { color:Red;} /即多个选择器以逗号的格式分隔 命名找到准确的标签
　　5.群组选择器 div,span,img {color:Red} /即具有相同样式的标签分组显示
　　选择器的优先级
　　1.最高优先级是 (直接在标签中的设置样式，假设级别为1000)
　　3.其次优先级是（类选择器，假设级别为10）
　　4.最后优先级是 （标签选择器，假设级别是 1）
　　5.那么后代选择器的优先级就可以计算了啊
　　比如 .divClass span { color:Red;} 优先级别就是：10+1=11
　　
所以我们得到了以下的选择器优先级：
内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 元素选择器 = 关系选择器 = 伪元素选择器 > 通配符选择器

盒模型

盒子的分类——元素如何显示（display）

1. 块级元素

   • 占据所有可用宽度，以换行开始
   • 常用于较大的内容块，如标题或结构化元素

2. 行内元素

   • 只占内容所需的宽度，在同一行内一个接一个摆放

   • 常用于较小的内容块，如被选设为粗体或斜体的一些词

• 注意：

  ​ 不同元素产生的盒子类型也不同，取决于它的display属性值，每个元素都有一个默认的display属性值，不过也可以被重写。

• display的常用属性值

  属性值	含义
  none	将元素隐藏且不保留其物理空间
  inline	行内元素
  block	块级元素
  inline-block	行内块元素

  • 行内块元素——既像行内元素一样并排显示，又像块级元素一样可设宽高

盒子的组成

• content——内容（最里层）

• padding——内边距

• border——边框

• border——边框

• margin——外边距（最外层）——与其他盒子之间的距离

1. padding和margin的取值：

​ padding：10px; 四周

​ padding：10px 20px; 上下 左右

​ padding：10px 20px 30px; 上 左右 下

​ padding：10px 20px 30px 40px; 上 右 下 左（顺时针）

• padding是内容和边框之间的可选距离，可有可无，但不可取负值。

2. 指定方向的padding和margin的取值：

​ padding-top:0; == padding:0 __ __ __;

​ padding-right:0;

​ padding-bottom:0;

​ padding-left:0;

3. border简写

• border：10px solid pink; ==> border-width:10px;

  ​ border-style:solid;

  ​ border-color:pink;

  • solid 实线
  • dashed 虚线
  • dotted 点线

标准盒模型的计算

• content的宽/高+padding+border=盒子自身的的大小
• 盒子自身的大小不计算margin值

IE盒

• 在自己设置的宽/高里扣除padding和border的值，为content实际的宽/高
• 通过box-sizing:border-box可直接设置，得到IE盒

可视化模型（视觉格式化模型）

• 视口：浏览器可视窗口，指浏览器的可视区域

• 包含块:

  <div>
      <h1></h1>		 
      <p></p>			==>	h1、p包含块：div的内容盒
  </div>
  

元素在页面上的定位体系

定位体系

概述

1、什么是定位体系

视觉格式化模型规定，定位体系共有三种

a.常规流（normal flow）

b.浮动（float）

c.绝对定位（absolute posotioned）

任何一个元素，必须属于其中一种定位系统

1、常规流
又叫普通流、文档流、普通文档器，是最常见的，默认状态下的定位

a.常规流块盒水平方向上的居中（常用）

step1 给块盒设宽度

水平方向的尺寸，必须等于包含快的宽度

step2 给块盒margin设置 ：0 auto

b.垂直方向上居中

若两个外边距相邻，则进行合并（折叠）

合并:
两个包含块均为正值，则取最大的值
两个包含块均为负值，则取最小的值
两个包含块一正一负，则取两个值相加
注：水平方向的外边距不会合并

2、浮动 float
取值：float：right/left；

清浮动，即，找回父级

3、绝对定位
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

普通流中其它元素的布局就像绝对定位的元素不存在一样：

#box_relative {
position: absolute;
left: 30px;
top: 20px;
}

注：positio后可取值
relative — 表示相对定位
static — 表示默认静态定位
absolute — 表示绝对定位
fixed — 表示 固定定位

常规流的概述

常规流（normal flow）

也叫文档流，是指在没有CSS的干预下，块级元素独占一行，宽高可设；行内元素并排显示，宽高自动。