1 html 基础

1. html头部

1.1 标题

2. 文字处理

2.1 标题

• h1~h6
• 标题标签的特性:
• 加粗
• 标题标签独占一行

2.2. 段落和换行标签

• 段落标签: P
• 段落和段落直接有较大缝隙
• 换行标签: br

2.3. 文本格式化标签

• 粗体: strong 或者 b
• 斜体: em 或者 i
• 删除线: del 或者 s
• 下划线: ins 或者 u

3. 布局标签

div 和 span

• div 是division 的缩写, 表示分割,分区
• span 意为跨度,跨距.

4. 图像处理

4.1 图像标签

img 标签用于定义html中的图像
例如:

<img src="path" />

img 是imaged额缩写, 意为图像

4.1.1 img 标签属性说明:

• src 是img 标签的必须属性, 它用于指定图像文件的路径和文件名
• alt 文本 替换文本,图像不能显示的文字
• title 提示文本, 鼠标放到图像上, 显示的文字
• width 设置图像的宽度
• height 设置图像的高度
• border 设置图像边框的粗细

例如

<!-- width height border 的单位为像素px -->
<img src="photo.jpg" alt="my favorite movie star" title="andy liu"
  width="500" height="300" border="5"/>

5. 超链接

5.1 超链接标签

• 在html标签中, a标签用于定义超链接, 作用是从一个页面链接到另一个页面
• a 为单词anchor的缩写, 意为: 锚
  例如:

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

a标签属性说明

• href: 用于指定链接目标的url地址,
• target: 用于指定链接页面的打开方式, 其中_self为默认值, _blank为在新窗口中打开, target有一下四种取值:

_blank: 浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self: 这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。
_parent:
_top:

链接分类

外部链接: 例如 http://www.philoenglish.com/

内部链接: 例如:

 <a href="home.html">主页</a>

空链接:

 <a href="#">开发中</a>

下载链接:

 <a href="artifacts.zip">下载</a>

网页元素链接:

• 在网页中的各种网页元素都可以被链接, 如文本, 图像, 音频, 视频都可以添加超链接, 例如:

<a href="http://www.baidu.com"> <img src="img.jpg" /> </a>

锚点链接:

• 在链接文本的href属性中, 设置属性值为#名字的形式, 例如

  <a href="#two"> 第二集</a>
  

• 找到目标位置标签, 里面添加一个id属性=刚才的名字, 例如

  <h3 id="two"> 第二集介绍</h3>
  

6. 注释和特殊字符

注释:

<!-- 注释语句-->

特殊字符:

空格:  
大于号: >

7 表格

7.1 表格标签

• table:
  • tr: 行 table row
  • td: 数据 table data
  • th: 表头 table title

7.2 表格属性

• table 标签的属性

• align: 表格对齐方式 选项left, center, right

• border: 表格边框

• cellpadding: 单元格内容和边框之间的距离

• cellspacing: 单元格和单元格之间的距离

• width:

  • 实例:

    <table align="center" border="1" cellpandding="0" cellspacing="0" width="500" height="249">
        <tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
        <tr><td>刘德华</td><td>男</td><td>56</td></tr>
        <tr><td>张学友</td><td>男</td><td>58</td></tr>
        </table> 
    

7.3 表格结构标签

• thead: 表格头部区域
• tbody: 表格主体区域

7.4 合并单元格

• 跨行合并: rowspan="合并单元格的个数"
• 夸列合并: colspan="合并单元格的个数"

8. 列表

8.1 无序列表

实例:

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

8.2 有序列表

实例:

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

8.3 自定义列表

实例:

<dl>
    <dt>列表项1</dt>
    <dd>列表项2</dd>
    <dd>列表项3</dd>
</dl>

9 表单标签

9.1 表单域 form

<form action="demo.php" method="post" name="name">
</form>

9.2 表单控件(表单元素)

9.2.1 input表单元素

• input type:
  • text
  • password
  • radio
  • checkbox
  • file
  • hidden
  • image
  • reset
  • submit: 提交表单按钮
  • button: 定义可点击按钮, 多数情况下通过js启动脚本

9.2.2 input表单元素属性

• name:定义表单元素的名称
• value:规定input元素的值
• checked:规定input元素首次加载时被选中
• maxlength: 规定输入字段的字符的最大长度

9.2.3 label 标签

• label标签经常和input标签搭配使用
• label 标签为为input元素定义标注
• label 标签用于绑定一个表单元素, 当点击label标签内的文本时, 浏览器就会自动将焦点转到或者选择对应的表单元素上, 用来增加用户体验.
• label 标签的for属性
• 实例:

  <label for="sex"> male</label>
  <input type="radio" name="sex" id="sex"/>
  

• 核心: label标签的for属性应当与相关元素的id属性相同.

9.2.4 select表单控件

• 使用场景: 在页面中, 如果有多个选项让用户选择, 并且想要节约页面空间时, 我们可以使用select标签控件定义下拉列表.

• 语法:

  <select>
      <option>选项1</option>
      <option>选项2</option>
      <option selected="selected">选项3</option>
      ...
  </select>
  

• 注意事项:

  • select 中至少包含一对option
  • 在option 中添加selected属性设置默认选中

9.2.5 textarea 控件

• 实例:

  <textarea cols="50" rows="5"> 此处为默认输入文本</textarea>
  

10. 查阅html参考文档

• 百度: www.baidu.com
• W3C: www.w3school.com.cn
• MDN: https://developer.mozilla.org/zh-CN/

2. CSS基础

2.1 CSS简介

• CSS是层叠样式表(Cascading Style Sheets)的简称
• 有时我们也称之为CSS样式表或者级联样式表
• CSS也是一种标记语言
• CSS主要用于设置HTML页面的文本内容(字体, 大小, 对齐方式), 图片的外形(宽高, 边框样式, 边距等) 以及版面的布局和外观显示样式.

2.2 CSS语法规范

• CSS规则由两个主要的部分构成, 选择器以及一条或多条申明

  h1 {color:red; font-size: 25px;}
  

• 其中h1为选择器, 大括号里的内容为样式申明

• 选择器是用于指定CSS样式的HTML标签, 大括号内容是对对象设置的具体样式

• 属性和属性值以键值对的形式出现

• 属性是对指定的对象设置的样式属性, 例如字体大小, 文本颜色等

• 属性和属性值之间使用冒号":"分割

• 多个键值对之间用英文";"进行区分

2.3 CSS 代码风格

2.3.1 样式格式书写

1. 紧凑格式

h3 { color: deeppink; font-size: 20px;}

2. 展开格式

h3 { 
    color: deeppink; 
    font-size: 20px;
}

• 强烈推荐第二种格式, 更直观

2.3.2 样式大小写

h3 { 
    color: pink; 
}

H3 { 
    COLOR: pink; 
}

• 强烈推荐样式选择器, 属性名, 属性值关键字全部使用小写字母, 特殊情况除外.

2.3.3 空格规范

h3 { 
    color: pink; 
}

1. 属性值前面, 冒号后面, 保留一个空格
2. 选择器(标签)和大括号中间保留空格

2.4 CSS 基础选择器

选择器参考文档

2.4.1 标签选择器

2.4.2 类选择器

2.4.3 类选择器-多类名

2.4.4 id选择器

• id选择器 以 "#" 来定义
• id选择器经常和javascript搭配使用

2.4.4 通配符选择器

实例:

  * {
      margin: 0;
  }

2.5 CSS字体属性

2.5.1 字体系列font-family

1. 中午字体, 或字体名称有多个单词组成最好使用双引号引起来
2. 一般给body指定统字体来为页面设置统一的字体
3. 如果设置了多个字体, 浏览器将会按顺序选择系统中存在的字体, 应用到文字上

实例:

  body {
      font-family: "宋体",  "Microsoft Yahei", Arial, Helvetica, sans-serif;
  }

2.5.2 字体大小font-size

实例:

  body {
      font-size: 18px;
  }

2.5.3 字体粗细font-weight

取值范围
<font-weight-absolute> = normal | bold | lighter | bolder| Numeric value>

说明: 1. 数字400相当于normal, 700相当于bold
2. lighter, bolder 不是绝对粗细, 是相对于父元素的粗细更细一些或更粗一些
3. 实际开发中更喜欢使用数字来表示粗细

实例:

  p {
      font-weight: bold;
  }

  p {
      font-weight: 700;
  }

2.5.3 文字样式font-style

CSS使用font-style属性设置文本的风格
说明:

1. 取值范围: normal, italic, oblique, oblique 400deg;
2. Italic 样式一般是指书写体，相比无样式的字体，通常会占用较少的高度，而 oblique 字形一般只是常规字形的倾斜版本。斜体（italic） 和倾斜体（oblique）都是通过人工倾斜常规字体的字形来模拟的（使用 font-synthesis 对此进行控制）。
3. 如果关键字是 oblique，则可附加一个可选的角度。
   实例:

p {
    font-style: normal;
}

2.5.3 CSS 符合属性

实例:

p {
    font: normal 16px;
}

2.6 CSS 文本属性

CSS text(文本)属性可以定义文本的外观, 比如文本的颜色, 对齐方式, 装饰文本, 文本缩进, 行间距等

2.6.1 文本颜色 color

取值范围:

1. 预定义的颜色值: red, green, blue等等
2. 16进制颜色值: #FF0000
3. RGB代码: rgb[255, 0, 0] 或rgb[%100, 0, 0]

• 开发中最常用的是16进制颜色值

  div {
      color: red;
  }
  

2.6.1 文本对齐 text-align

• text-align 属性用于设置元素内文本的水平对齐方式
• 取值范围: left, center, right
• 默认值为left

2.6.2 文本装饰 text-decoration

• text-decoration属性规定添加到文本的修饰, 可以给文本添加下划线, 删除线, 上划线等.
• 取值范围: none, underline, overline, line-through

  div {
      text-decoration: underline
  }
  

2.6.3 文本缩进

• 取值: 缩进数值 10px, 2em
• 使文本的第一行缩进多少距离

  p {
      text-indent: 2em;
  }

2.6.4 行间距line-height

p {
      text-height: 26px;
  }

2.7 CSS引入方式

1. 内部样式表

    <style>
   p {
      color: pink;
   }    
    </style>

2. 外部样式表

<link rel="stylesheet" href="css文件路径">

3. 行列样式表

  <div style="color:red; width:10px"></div>

2.8 Emmet语法

Emmet语法的前身是Zen coding, 它使用缩写, 来提高html/css的编写速度, Vscode内部已经集成该语法.

1. 快速生成HTML结构语法
2. 快速生成CSS样式语法

2.8.1 快速生成HTML结构语法

1. 生成标签直接输入标签名按tab键即可, 比如div然后tab键, 就可以生成

<div></div>

2. 如果想要生成多个相同标签, 加上就可以了, 比如div*3就可以快速生成3个div

3. 如果有父子级关系的标签, 可以用> 比如 ul>li就可以了

4. 如果有兄弟关系的标签,用+就可以了比如div+p

5. 如果生成带有类名或者id名字的, 直接写.demo或者#two tab键就可以了

6. 如果生成的div类名是有顺序的, 可以用自增符合$

2.9 复合选择器

2.9.1 什么是复合选择器

在CSS中, 可以根据选择器的类型把选择器分为基础选择器和复合选择器, 复合选择器是建立在基础选择器之上, 对基本选择器进行组合形成的.

1. 复合选择器可以更准确, 更高效选择目标元素
2. 复合选择器是由两个或多个基础选择器, 通过不同的方式组合而成的
3. 常用的复合选择器包括: 后代选择器, 子选择器, 并集选择器, 伪选择器

2.9.2 后代选择器

2.9.3 子元素选择器

2.9.4 伪类选择器

1. 链接伪类

2. 结构伪类

11.8 元素显示模式

11.8.1 什么是元素显示模式

• 作用: 网页标签非常多, 在不同地方会用到不同类型的标签, 了解他们的特点可以更好的布局我们的网页.
• 元素显示模式就是元素以什么方式显示, 比如div自己占一行, 比如一行可以放多个span
• HTML元素一般分为块元素和行内元素两种类型

11.8.2 块元素

常见的块元素有h1~h6, p, div, ul, ol, li 等, 其中div是最典型的块元素

块元素的特点:

1. 比较霸道, 自己独占一行
2. 高度, 宽度, 外边距以及内边距都可以控制
3. 宽度默认是容器的100%
4. 是一个容器及盒子, 里面可以放行内或块级元素

注意:

• 文字类的元素不能使用块级元素
• p标签主要用于存放文字, 因此p里面不能放块级元素, 特别不能放div
• 同理, h1~h6等都是文字类块标签, 里面也不能放其他块级元素

11.8.3 行内元素(内联元素)

常见的行内元素有 a, strong, b, em, i, del, s, ins, u, span等, 其中span标签是最典型的行内元素, 有的地方也将行内元素称为内联元素.

行内元素的特点:

1. 相邻行内元素在一行上, 一行可以显示多个
2. 高, 宽直接设置是无效的
3. 默认宽度就是它本身内容的宽度
4. 行内元素只能容纳文本或其他行内元素

注意:

• 链接里面不能再放链接了
• 特殊情况a里面可以再放块级元素但是给a转换一下块级模式更安全

11.8.4 行内块元素

在行内元素中有几个特殊的标签 img, input,td 它们同时具有块元素和行内元素的特点, 有些资料称它们为行内块元素.

行内块元素的特点:

11.9 CSS 背景

通过CSS背景属性, 可以给页面元素添加背景样式.
背景属性可以设置背景颜色, 背景图片, 背景平铺, 背景图片位置, 背景图像固定等.

11.9.1 背景颜色

div {
    background-color: pink;
}

11.9.2 背景图片

div {
    background-image: url(path)
}

11.9.2 背景图片平铺

取值范围: repeat-x, repeat-y, no-repeat, repeat

background-repeat: repeat-x;

11.9.3 背景图片位置

利用background-position属性可以改变图片在背景中的位置.

background-position: x y;

参数代表的意思是: x坐标和y坐标, 可以使用方位名称或者精确单位

注意:
参数是方位名词时:

1. 如果是方位名词, right center 和 center right是等价的.
2. 如果只指定了一个方位名词, 另一个值省略, 则第二个默认居中对齐.
   参数是精确单位:
3. 如果参数是精确坐标, 那么第一个肯定是x坐标, 第二个一定是y坐标
   混合形式:
4. 第一参数一定是x坐标, 第二个参数是y坐标

实例:

<!-- 顶部居中 -->
background-position: center top;

<!-- 顶部居中 -->
background-position: top;

精确单位

<!-- x:20px y:50px -->
background-position: 20px 50px;

<!-- x:20px 垂直居中 -->
background-position: 20px;

混合形式

<!-- x:20px 垂直居中 -->
background-position: 20px center;

<!-- 水平居中 垂直20px  -->
background-position: center 20px;

11.9.4 背景图片固定(背景附着)

background-attachment 属性设置背景图像是否固定或者随着页面的其他部分滚动.

取值范围:

• scroll: 背景图像是随对象内容滚动
• fixed: 背景图像固定

11.9.5 背景复合写法

为了简化背景属性的代码, 我们可以将这些属性合并简写在同一个属性background中, 从而节约代码量, 当使用简写属性时, 没有特定的书写顺序, 一般习惯约定顺序为:
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

例如:

background: black url(images/bg.jpg) no-repeat fixed center top;

background: transparent url(images/bg.jpg) repeat-x fixed  top;

11.9.6 背景色半透明

CSS3为我们提供了背景颜色半透明的效果

background: rgba(0,0,0,0.3)

最后一个参数是alpha透明度, 取值范围在0-1之间, 0表示完全透明, 1表示完全不透明

注意:

• CSS3新增属性, 是IE9+版本浏览器才支持的
• 但是现在实际开发中,我们不太关注兼容性写法了,可以放心使用

11.10 CSS的三大特性

CSS有三个非常重要的特性: 层叠性, 继承性, 优先级.

11.10.1 层叠性

相同选择器给属性设置不同的样式, 此时一个样式就会覆盖(层叠)另一个冲突的样式. 层叠性主要解决样式冲突的问题.

层叠性原则:

样式冲突: 遵循的原则是就近原则, 哪个样式的结构近, 就执行哪个样式
样式不冲突, 不会层叠

11.10.2 继承性

CSS中的继承: 子标签会继承父标签的某些样式, 如文本颜色和字号等.

恰当地使用继承可以简化代码, 降低css样式的复杂性
子元素可以继承父元素的样式(text-, font-,line-这些元素开头的可以继承, 以及color属性)

11.10.2.1 行高的继承

当行高是倍数值

例如:

   body {
   font:12px/1.5 'Microsoft YaHei'
   }

如上, 行高为1.5

如果子元素例如div的字体大小为14px, 那么div的实际行高为, 字体高度乘以从父元素继承来的行高1.5倍, 实际行高为21px

div {
    font-size: 14px
}

<html>
    <head>
    </head>
    <body>
       <div>一花一世界</div>
    </body>
</html>

11.10.3 优先级

当同一个元素指定多个选择器, 就会有优先级的产生

1. 选择器相同, 则执行层叠性
2. 选择器不同, 则根据选择器权重执行

选择器权重如下表所示

优先级注意事项:

1. 权重是由4组数字组成, 但是不会有进位.
2. 可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器, 以此类推.
3. 等级判断从左向右, 如果某一位数值相同, 则判断下一位数值.
4. 继承的权重是0

11.10.3.1 权重叠加

权重叠加: 如果是复合选择器, 则会有权重叠加, 需要计算权重.
例如

  ul li {
      color: green;
  }
  li {
      color: red;
  }

如上所示,复合选择器 ul li 的权重为 0,0,0,1 + 0,0,0,1 = 0,0,0,2
而选择器 li的权重是 0,0,0,1 所以 ul li选择器定义的字体颜色样式将生效

11.11 盒子模型

网页布局要学习三大核心, 盒子模型, 浮点和定位, 学习好盒子模型能非常好的帮助我们布局页面.

看透网页布局的本质
网页布局过程

1. 先准备好相关的网页元素, 网页元素基本都是盒子box
2. 利用css设置好盒子样式, 然后摆放到相应位置
3. 往盒子里面装内容
   网页布局的核心本质: 就是利用CSS摆盒子

11.11.1 盒子模型(Box Model) 组成

所谓盒子模型: 就是把HTML页面中的布局元素看作是一个矩形的盒子, 也就是一个盛装内容的容器,
CSS盒子模型本质是一个盒子, 封装周围的HTML元素, 它包括: 边框, 外边距, 内边距, 和实际内容

11.11.2 边框(border)

border可以设置元素的边框, 边框有三部分组成: 边框宽度(粗细) 边框样式, 边框颜色

border-style: none | solid | dashed | dotted | double

border-color: 颜色值

border-width: 设置边框宽度

实例:

div {
    width: 50px;
    height: 50px;
    border-color: red;
    border-width: 5px;
    border-style: solid;
}

边框复合性写法

border: 1px solid red; 没有顺序

• border-top:
• border-bottom:
• border-right:
• border-left:

实例:

  div {
      border-top: 1px solid red;
  }

11.11.3 表格的细线边框

border-collapse

合并相邻的边框

11.11.4 边框会影响盒子实际大小

实际宽度 等于width + border-width

11.11.5 内边距(padding)

padding-left

padding-right

padding-top

padding-bottom

padding复合写法

panding: 5px; // 上下左右5px

panding: 5px 10px; // 上下5px 左右5px

panding: 5px 6px 10px; // 上下5px 左右5px

11.11.6 padding 不会撑大盒子的情况

如果盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小

11.11.7 外边距(margin)

• margin-left
• margin-right
• margin-top
• margin-bottom

margin复合写法

• margin: 5px; // 上下左右5px
• margin: 5px 10px; // 上下5px 左右5px
• margin: 5px 6px 10px; // 上下5px 左右5px

11.11.8 外边距的典型应用

外边距可以让块级盒子水平居中,

   width: 100px
   background-color: pink;
   margin-left: auto;
   margin-right: auto;

行内元素居中办法, 让父元素 text-align等于 center

嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素, 父元素有上外边距同时子元素也有上外边距, 此时父元素会塌陷较大的外边距.

外边距合并问题:
解决方案:

1. 可以为父元素定义上边框
2. 可以为父元素定义上内边距
3. 可以为父元素添加overflow:hidden

还有其他方法, 比如浮动, 固定, 绝对定位盒子不会有塌陷的问题.

11.11.9 清除盒子的内外边距

* {
    margin: 0px;
    padding: 0px;
}

注意: 行内元素为了照顾兼容性, 尽量只设置左右内外边距, 不要设置上下内外边距, 但是转换为块级和行内块元素就可以设置上下边距

11.11.10 圆角边框

在CSS3中, 新增圆角边框样式, 这样我们的盒子就可以变圆角了.

border-radius: 10px;

border-radius: 50%;

每个叫弧度不一样

border-radius: 10px 30px 40px 50px;

border-top-right-radius: 10px;
border-top-left-radius: 20px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;

11.11.11 盒子影子

CSS3中新增了盒子影子, 我们可以使用box-shadow属性添加阴影.
语法:

/*box-shadow: h-shadow v-shadow blur spread color inset;*/
box-shadow: 10px 10px 10px 10px black inset;

• h-shadow: 必需, 水平阴影的位置, 允许负值.
• v-shadow: 必需, 垂直阴影的位置, 允许负值.
• blur: 可选, 模糊距离.
• spread: 可选, 阴影的尺寸.
• color: 可选, 阴影的颜色, 请参阅CSS颜色值
• inset:可选, 将外部阴影改为内部阴影.

11.11.12 文字阴影 text-shadow

• h-shadow: 必需, 水平阴影的位置, 允许负值.
• v-shadow: 必需, 垂直阴影的位置, 允许负值.
• blur: 可选, 模糊距离.
• color: 可选, 阴影的颜色, 请参阅CSS颜色值

/*text-shadow: h-shadow v-shadow blur  color;*/
box-shadow: 10px 10px 10px black;

11.12 CSS浮动

11.12.1 传统网页布局的三种方式

网页布局的本质: 用CSS来摆放盒子, 把盒子摆放到相应位置.
CSS提供了三种传统布局方式简单说, 就是盒子如何进行排列顺序:

1. 普通流(标准流)
2. 浮动
3. 定位

11.12.2 普通流(标准流/文档流)

所谓的标准流: 就是标签按照规定好默认方式排列

1. 块级元素会独占一行, 从上向下顺序排列.
   • 常用元素: div, hr, p, h1~h6, ul, ol, dl, form, table
2. 行内元素会按照顺序, 从左到右顺序排列, 碰到父元素边缘自动换行
   • 常用元素: span, a, i, em等

以上都是标准流布局, 标准流是最基本的布局方式.

这三种布局方式都是用来摆放盒子的, 盒子摆放到合适位置, 布局自然就完成了.

注意: 实际开发中, 一个页面基本都包含了这三种布局方式, 后面移动端学习新的布局方式.

11.12.3 为什么需要浮动

总结: 有很多布局效果, 标准流没有办法完成, 此时就可以利用浮动完成布局, 因为浮动可以改变元素标签默认的排列方式.
浮动最典型的应用: 可以让多个块元素一行内排列显示.
网页布局第一准则: 多个块级元素纵向排列选标准流, 多个块级元素横向排列使用浮动.

11.12.4 什么是浮动

float属性 用于创建浮动框, 将其移动到一边, 直到左边缘或右边缘触及包含块或另一个浮动框的边缘.
语法:

 选择器 {float: 属性值;}

属性值:
none:元素不浮动, 默认值
left:元素向左浮动
right: 元素向右浮动

11.12.4 浮动特性(重难点)

加了浮动之后的元素, 会具有很多特性, 需要我们掌握的

1. 浮动元素会脱离标准流
2. 浮动的元素会一行内显示并且元素顶部对齐
3. 浮动元素会具有行内块元素的特性

设置了浮动的元素最重要的特性

1. 脱离标准流的控制浮动到指定位置
2. 浮动的盒子不再保留原先的位置

浮动元素经常和标准流的父级搭配使用

11.12.5 常见的网页布局

11.12.6 浮动布局注意点

1. 浮动和标准流的父盒子搭配
   先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列位置

2. 一个元素浮动, 理论上其余的兄弟也要浮动.
   一个盒子里面有多少个盒子, 如果其中一个盒子浮动了, 那么其他兄弟也应该浮动, 以防止引起问题.
   浮动的盒子只会影响浮动盒子后面的标准流, 不会影响前面的标准流.

11.12.7 为什么要清除浮动

我们不应该给父盒子高度

11.12.8 清除浮动的本质

清除浮动的本质是清除浮动元素造成的影响
如果父盒子本身有高度, 则不需要清除浮动
清除浮动后, 父级就会根据浮动子盒子自动检查高度, 父级有了高度, 就不会影响下面的标准流了

语法:

选择器 {clear: 属性值}

属性值:

• left: 不允许左侧有浮动元素,(清除左侧浮动的影响)
• right: 不允许右侧有浮动元素(清除右侧浮动的影响)
• both: 同时清除左右两侧浮动的影响
• 我们实际工作中, 几乎自用clear:both

清除浮动的策略是: 闭合浮动

清除浮动的方法:

1. 额外标签发也称为隔墙法, 是W3C推荐的做法.
2. 父级添加overflow属性
3. 父级添加after伪元素
4. 父级添加双伪元素

11.13 定位

11.13.1 为什么需要定位

1. 浮动可以让多个块级盒子一行没有缝隙排列显示, 经常用于横向排列盒子.
2. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置, 并且可以压住其他盒子.

11.13.2 定位组成

定位: 将盒子定在某一个位置, 所以定位也是在摆放盒子, 按照定位的方式移动盒子.

定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式, 边偏移则决定了该元素的最终位置.

1. 定位模式
定位模式决定元素的定位方式, 它可以通过CSS的position属性来设置, 其值可以分为四种:

• static: 静态定位
• relative: 相对定位
• absolute: 决定定位
• fixed: 固定定位

边偏移
边偏移就是定位的盒子移动到最终位置. 有top, bottom, left和right 4个属性.

11.13.3 静态定位

静态定位是元素的默认定位方式, 无定位的意思

语法:

选择器 {
    position: static
}

1. 静态定位按照标准流特性摆放位置, 它没有边偏移.
2. 静态定位在布局时很少用到.

11.13.3 相对定位 relative

相对定位是元素在移动位置的时候, 是相对于它原来的位置来说的
语法:

选择器 {
    position: relative;
}

相对定位的特点:

1. 它是相对自己原来的位置来移动(移动位置的时候参照点事自己原来的位置)
2. 原来在标准流的位置继续占有, 后面的盒子仍然以标准流的方式对待它. (不脱离标准流, 继续保留原来的位置)

11.13.4 绝对定位 absolute

绝对定位是元素在移动位置的时候, 是相对于它祖先元素来说的
语法:

  选择器 {
      position: absolute;
  }

1. 如果没有祖先元素或者祖先元素没有定位, 则以浏览器为准定位(Document文档)

2. 如果祖先元素有定位(相对, 绝对, 固定定位), 则以最近一级的有定位祖先元素为参考点移动位置.

3. 绝对定位不再占用标准流中的位置.

11.13.5 子绝父相

弄清楚这个口诀, 就明白了绝对定位和相对定位的使用场景.
这个子绝父相太重要了, 是我们学习定位的口诀, 是定位中最常用的一种方式, 这句话的意思是: 子级是绝对定位的话, 父级要用相对定位.

1. 子级绝对定位, 不会占有位置, 可以放到父盒子里面任何一个地方, 不会影响其他兄弟盒子.
2. 父盒子需要加定位限制子盒子在父盒子内显示.
3. 父盒子布局时, 需要占有位置, 因此父亲只能是相对定位.

这就是子绝父相的由来,所以相对定位经常用来作为绝对定位的父级.
总结: 因为父级需要占有位置, 因此是相对定位, 子盒子不需要占有位置, 则是绝对定位.
当然, 子绝父相不是用于不变的, 如果父元素不需要占有位置, 子绝父相也会遇到.

11.13.6 固定定位 fixed

固定定位是元素固定于浏览器可视区域, 主要使用场景; 可以在浏览器页面滚动时元素位置不会改变.
语法:

选择器 {
    position: fixed;
}

固定定位的特点:

1. 以浏览器的可视窗口为参照点移动元素.
2. 跟父元素没有任何关系
3. 不随滚动条滚动.
4. 固定定位不占有标准流中的位置.

固定定位也是脱离标准流的, 其实固定定位也可以看做是一种特殊的绝对定位.

11.13.7 固定定位小技巧 固定在版心右侧

小算法:

1. 让固定定位的盒子left:50%, 走到浏览器可视区域的一半位置
2. 让固定定位的盒子margin-left: 版心宽度的一半距离, 多走版心宽度的一半位置

11.13.8 粘性定位 sticky

粘性定位可以被认为是相对定位和固定定位的混合, sticky粘性的
语法

  选择器 {
      position: sticky; top: 10px;
  }

粘性定位的特点:

1. 以浏览器的可视窗口为参照点移动元素
2. 粘性定位占有原先的位置
3. 必须添加top, left, right, bottom其中的一个才有效.

跟页面滚动搭配使用, 兼容性较差, IE不支持.

11.13.9 定位的叠放次序

在使用定位布局时, 可能会出现盒子重叠的情况. 此时, 可以使用z-index来控制盒子的前后次序(Z轴)
语法

选择器 {z-index: 1;}

数值可以是正整数, 负整数或0, 默认是auto, 数值越大, 盒子越靠上
如果属性值相同, 则按照书写顺序, 后来者居上
数值后面不能加单位
只有定位的盒子才有z-index

11.13.10 定位的拓展

定位特殊性
绝对定位和固定定位也和浮动类似

1. 行内元素添加绝对定位或者固定定位, 可以直接设置高度和宽度.
2. 块级元素添加绝对或者固定定位, 如果不给宽度或者高度, 默认大小是内容的大小.
3. 脱标的盒子不会触发外边距塌陷.

浮动元素不同,只会压住它下面标准流的盒子, 但是不会压住下面标准流盒子里的文字(图片) 但是绝对定位(固定定位)会压住下面标准流所有的内容
浮动之所以不会压住文字, 因为浮动产生的目的最初是为了做文字环绕效果的, 文字会围绕浮动元素.

11.13.10 元素的显示和隐藏

display:none 隐藏元素, 不再占用原来的位置

display: none;

visibility 可见性
取值:
visible
hidden

visibility 隐藏元素后, 继续占用原来的位置

11.13.10 overflow

overflow属性指定了如果内容溢出一个元素的框(超过其指定高度和宽度)时, 会发生什么.
属性值:

• visible
• hidden: 超出的部分隐藏
• scroll
• auto: 超出的时候显示滚动条, 不超出没有滚动条

一般情况下,我们都不想让溢出的内容显示出来, 因为溢出的部分会影响布局,
但是如果有定位的盒子, 请慎用overflow:hidden 因为它会隐藏多余的部分.

3 CSS高级部分

3.1 精灵图

3.1.1 为什么需要精灵图

一个网页中往往会应用很多小的背景图像作为修饰, 当网页中的图像过多时, 服务器就会频繁地接收和发送请求图片, 造成服务器请求压力过大, 这就大大降低页面加载速度.

因此, 为了有效地减少服务器接收和发送请求的次数, 提高网页的加载速度, 出现了CSS精灵技术(也称为CSS Sprites)

核心原理: 将网页中的一些小背景图像整合到一张大图中, 这样服务器只需要一次请求就可以了.

3.1.2 精灵图(sprites)的使用

使用精灵图核心:

1. 精灵技术主要针对背景图片使用, 就是把多个小背景整合到一张大图片中.
2. 这个大图片也称为sprites精灵图
3. 移动背景图片位置, 此时可以使用background-position.
4. 移动的距离就是这个图片的x和y坐标, 注意网页中的坐标有所不同.

3.1.2 字体图标及参生和优点

字体图标使用场景： 主要用于显示网页中通用， 常用的一下小图标。

精灵图是有诸多优点的，但是缺点也很明显。

1. 图片文件还是比较大的。
2. 图片本身放大和缩小会失真。
3. 一旦图片制作完毕想要更换非常复杂。

此时， 有一种技术的出现很好的解决了以上问题， 就是字体图标iconfont
字体图标可以为前端工程师提供一种方便高效的图标使用方式， 展示的是图标， 本质属于字体。

字体图标的优点
轻量级： 一个字体图标字体要比一系列图像要小， 一旦字体加载了， 图标就会马上渲染出来， 减少服务器服务器请求。
灵活性： 本质其实是文字， 可以很随意的改变颜色， 产生阴影， 透明效果， 旋转等。
兼容性： 几乎支持所有的浏览器， 请放心使用。
注意： 字体图标不能替代精灵技术， 只是对工作中图标部分技术的提升和优化。
总结：

1. 如果遇到一些结构和样式比较简单的小图标， 就用字体图标。
2. 如果遇到一些结构和样式复杂的，还是使用精灵图。

3.1.3 字体图标

字体图标是一些网页常见的小图标， 我们直接网上下载即可， 因此使用可以分为：

1. 字体图标的下载
2. 字体图标的引入（引入到html页面中）
3. 字体图标的追加（以后添加新的小图标）
   推荐下载网站：
4. icomoon http://icomoon.io
   icomoon 成立于2011年， 推出了第一个自定义图标字体生成器， 它允许用户选择所需要的图标， 是它们成一字型， 该字体库内容种类繁多， 非常全面， 唯一的遗憾是国外服务器， 打开网速较慢。
5. 阿里iconfont http://www.iconfont.cn
   这个是阿里妈妈M2MUX的一个iconfont字体图标字库， 包含了淘宝图标库和阿里妈妈图标库， 可以使用AI制作图标上传生成， 重点是免费！

字体图标的引入

3.1.4 CSS三角做法

3.1.4 用户界面-鼠标样式

li {cursor: default}

属性值：
default
pointer
move
text
not-allowded

4 HTML5的新特性

4.1 HTML新增的语义化标签

1. header： 头部标签
2. nav： 导航标签
3. article： 内容标签
4. section： 定义文档某个区域
5. aside： 侧边栏标签
6. footer： 尾部标签

注意：

1. 这种语义化标准主要针对搜索引擎的
2. 这些新标签页面中可以使用多次
3. 在IE9中，需要把这些元素转换为块级元素
4. 其实， 我们移动端更喜欢使用这些标签
5. HTML5还增加了很多其他标签，我们后面再慢慢学

4.2 HTML新增的多媒体标签

新增的多媒体标签主要包含两个：

1. 音频：audio
2. 视频：video

使用它们可以很方便的在页面中嵌入音频和视频， 而不再去使用flash和其他浏览器插件。

4.2.1 video 标签

*1. 视频 video
当前video元素支持三种视频格式： 尽量使用MP4

*** 语法 ***

<video src="url" controls="controls"> </video>

***video 常用属性 ***

4.2.2 audio 标签

语法

<audio> </audio>

video 常用属性

谷歌浏览器把音频和视频自动播放禁止了

4.3 新增input标签

5 CSS3

5.1 CSS3 新增属性选择器

5.2 CSS3 新增结构伪类选择器

5.3 CSS3 伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素, 而不需要HTML标签, 从而简化HTML结构.
选择符合
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容
注意:

1. before和after创建一个元素, 但是属于行内伪元素
2. 新创建的这个元素在文档中是找不到的, 所以我们称其为伪元素
3. 语法: element::before {}
4. before和after必须有content属性
5. before在父元素内容的前面创建元素, after在父元素内容的后面创建元素
6. 伪元素选择器和标签选择器一样, 权重为1

5.4 CSS3 盒子模型 border-box

CSS3 中可以通过box-sizing来指定盒子模型, 有2个值: 即可指定为content-box, border-box, 这样我们计算盒子大小的方式就发生了改变.

默认为 content-box
可以分成两种情况:

1. box-sizing:content-box 盒子大小为width + padding + border (CSS3 出现以前, 默认的盒子模型)
2. box-sizing: border-box 盒子大小为width

5.5 CSS3 图片模糊处理

1. 图片变模糊
2. 计算盒子宽度width: calc函数

5.5.1 CSS3 滤镜filter:

filter CSS属性将模糊或颜色偏移等图形效果应用于元素.

语法

filter: 函数(); 例如 filter: blur(5px); blur模糊处理 数值越大越模糊

5.5.2 CSS3 calc函数

calc()此CSS函数让你在声明CSS属性值时执行一些计算

width: calc(100%-80px)

5.6 CSS3 的新特性

5.6.1 CSS3 过渡

过渡(transition) 是CSS3中具有颠覆性的新特性之一, 我们可以在不使用Flash动画或javascript的情况下, 当元素从一种样式变换为另一种样式时为元素添加效果.
过渡动画: 是从一个状态渐渐的过渡到另外一个状态
可以让我们页面更好看, 更动感十足, 虽然低版本浏览器不支持但是不会影响页面布局.
经常和:hover一起搭配使用

transition: 要过渡的属性 花费时间 运动曲线 何时开始;

1. 属性: 想要变化的css属性, 宽度高度 背景颜色 内外边距都可以. 如果想要所有的属性都变化过渡, 写一个all就可以了. 多个属性使用逗号分割
2. 花费时间: 单位是秒(必须写单位) 比如0.5s
3. 运动曲线: 默认是ease (可以省略)
4. 何时开始: 单位是秒(必须写单位), 可以设置延迟触发时间, 默认是0s (可省略)

狭义的HTML5 和广义的 HTML5

狭义的HTML5就是HTML5本身

1. 广义的HTML5 是HTML5本身+CSS3+Javascript
2. 这个集合有时称为HTML5和它的朋友, 通常缩写为HTML5
3. 虽然HTML5的一些特性仍然不被某些浏览器支持, 但是它是一种发展趋势.
4. HTML5 MDN介绍:
   https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML

5.7 2D转换

转换(transform) 是CSS3中具有颠覆性的特征之一, 可以实现元素的位移,旋转,缩放等效果.
移动: translate
旋转: rotate
缩放:scale

5.7.1 2D转换之移动 translate

2D移动是2D转换里面的一种功能, 可以改变元素在页面中的位置, 类似定位
语法

  transform: translate(x,y);
  或者
  transform: translateX(n)
  transform: translateY(n)

移动盒子位置的方法: 定位, 盒子外边距, 2D转换移动;
重点:
定义2D转换中的移动, 沿着X和Y轴移动元素
translate最大的优点: 不影响到其他元素的位置
translate中的百分比单位是相对于自身元素的translate(50%, 50%)
对行内元素是没有效果的

1. 用translate让一个盒子水平垂直居中

p {
    position: absolute;
    top: 50%;
    left: 50%
    width: 200px;
    height: 200px;
    background: purple;
    /*translate中的百分比单位是相对于自身元素的 */
    transform: translate(-50%;,-50%;);
}

5.7.2 2D转换之选择 rotate

2D选择指的是让元素在2维平面内顺时针旋转或者逆时针旋转

transform: rotate(度数);

重点:

1. rotate里面跟度数, 单位是deg比如 rotate(45deg)
   角度为正时,顺时针, 负值时为逆时针
   默认旋转的中心点是元素的中心点

5.7.3 2D转换中心点 transform-origin

我们可以设置元素转换的中心点
语法

transform-origin: x y;

重点:

注意后面的参数X和Y用空格隔开
xy默认转换的中心点是元素的中心位置(50%, 50%)
还可以给x y设置像素或者方位名词(top bottom left right center)

5.7.4 2D转换之缩放 scale

  transform: scale(x,y);

注意:
注意其中的x和y用逗号分隔
tansform: scale(1,1) 宽度和高度都放大一倍, 相当于没有放大
tansform: scale(2,2) 宽度和高度都放大2倍
tansform: scale(2): 只写一个参数, 第二个参数则和第一个参数一样, 相当于 scale(2,2)
tansform: scale(0.5, 0.5) 缩小
相对于修改宽高缩放scale的优势: 可以设置转换中心点缩放, 默认以中心点缩放的, 而且不影响其他盒子

5.7.5 2D转换综合写法

P365
注意:

1. 同时使用多个转换, 其格式为: transform: translate() rotate() scale() 等等
2. 其顺序会影响转换的效果(先旋转会改变坐标轴方向)
3. 当我们同时有位移和其他属性的时候, 记得要将位移放到最前面

5.7.6 2D转换总结

1. 转换transform 我们简单理解就是变形有2D和3D之分
2. 我们暂且学了三个分别是位移 旋转和缩放
3. 2D移动translate(x,y) 最大优势是不影响其他盒子, 里面参数用%, 是相对于自身宽度和高度来计算的
4. 可以分开写比如translateX(x) 和translateY(y)
5. 2D旋转rotate(度数) 可以实现旋转元素, 度数的单位是deg
6. 2D缩放scale(x,y) 里面的参数是数字不跟单位, 可以是小数, 最大优势是不影响其他盒子
7. 设置转换中心点transform-origin: x y; 参数可以是百分比, 像素或者方位名词
8. 当我们进行综合写法, 同时有位移和其他属性的时候, 记得要将位移放在最前面

5.8 CSS3 动画

动画(animation) 是CSS3中具有颠覆性的特性之一, 可通过设置多个节点来精确控制一个或一组动画, 常用来实现复杂的动画效果.
相比较过渡, 动画可以实现更多变化, 更多控制连续自动播放等效果.

5.8.1 动画的基本使用

制作动画分为两步:

1. 先定义动画
2. 再使用动画

1. 用keyframes定义动画(类似定义类选择器)

@keyframes 动画名称 {
     0% {
         width: 100px;
     }

     100% {
         width: 200px;
     }
}

动画序列

1. 0%是动画的开始, 100%是动画的完成, 这样的规则就是动画序列.
2. 在@keyframes中规定某项CSS样式, 就能创建由当前样式逐渐改为新样式的动画效果.
3. 动画是使元素从一种样式逐渐变化为另一种样式的效果, 您可以改变任意多的样式任意多的次数.
4. 请用百分比来规定变化发生的时间, 或关键词from和to, 等同于0%和100%.

2. 使用动画

  div {
      width: 200px;
      height: 200px;
      background-color: aqua;
      margin: 100px auto;
      /* 调用动画 */
      animation-name: 动画名称;
      /* 持续时间 */
      animation-duration: 持续时间;
  }

5.8.2 动画常用属性

5.8.3 CSS3 动画简写

animation: name duration timing-function delay iteration-count direction fill-mode

5.8.4 速度曲线

animation-timing-function: 规定动画的速度曲线, 默认是ease

5.9 3D转换

5.9.1 认识3D转换

5.9.2 3D转换translate3d

5.9.3 透视perspective

在2D平面参数近大远小视觉立体, 但是只是二维效果的

如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)
模拟人类的视觉位置, 可以认为安排一只眼睛去看
透视我们也称为视距: 视距就是人的眼睛到屏幕的距离
距离视觉点越近的电脑平面成像越大, 越远越小
透视的单位是像素

透视写在被观察元素的父盒子上面的
d: 就是视距, 视距就是一个人的眼睛到屏幕的距离
z: 就是z轴, 物体距离屏幕的距离, z轴越大我们看到的物体越大.

浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法, 比较新版本的浏览器无须添加.

1. 私有前缀

• moz: 代表firfox浏览器私有属性
• ms: 代表ie浏览器私有属性
• webkit: 代表safari, chrome 私有属性
• o: 代表opera私有属性

6. 移动web开发流式布局

学习目标:

1. 能够知道移动web开发现状
2. 能够写出标准的viewport
3. 能够使用移动web的调试方法
4. 能够说出移动端常见的布局方案
5. 能够描述流式布局
6. 能够独立完成京东移动端首页

6.1 移动端基础

6.1.1 移动端基础

6.1.1.1 浏览器现状

PC端常见浏览器
360浏览器, 谷歌浏览器, 火狐浏览器, QQ浏览器, 百度浏览器, 搜狗浏览器, IE浏览器.

移动端常见浏览器
UC浏览器, QQ浏览器, 欧朋浏览器, 百度手机浏览器, 360安全浏览器, 谷歌浏览器, 搜狗浏览器, 猎豹浏览器, 以及其他杂牌浏览器.

国内的UC和QQ, 百度等手机浏览器都是根据webkit修改过来的内核, 国内尚无自主研发的内核, 就像国内的手机操作系统都是基于Android修改开发的一样.

总结: 兼容移动端主流浏览器, 处理Webkit内核浏览器即可.

6.1.1.2 手机屏幕现状

移动端设备屏幕尺寸非常多, 碎片化严重.
Android设备有多种分辨率: 480X800, 480X854, 540X960, 720X1280, 1080X1920, 还有传说中的2K, 4K屏.
近年来iPhone的碎片化也加剧了, 其设备的主要分辨率有: 640X960, 640X1136, 750X1334, 1242X2208等
作为开发者无需关注这些分辨率, 因为我们常用的尺寸单位是px

6.1.1.3 常见移动端屏幕尺寸

注: 以上数据均参考自:
https://material.io/devices
注: 作为前端开发, 不建议大家纠结dp, dpi, ppi等单位

6.1.1.4 移动端调试方法

1. Chrome DevTools(谷歌浏览器)的模拟手机调试
2. 搭建本地web服务器, 手机和服务器一个局域网, 通过手机访问服务器
3. 使用外网服务, 直接IP或域名访问

6.2 视口

视口(viewport) 就是浏览器显示页面内容的屏幕区域, 视口可以分为布局视口, 视觉视口和理想视口

6.2.1 布局视口 layout viewport

1. 一般移动设备的浏览器都默认设置了一个布局视口, 用于解决早期的PC端页面在手机上显示的问题.
2. IOS, Android基本都将这个视口分辨率设置为980px, 所以PC上的网页大多都能在手机上显示, 只不过元素看上去很小, 一般默认可以通过手动缩放网页.

6.2.2 视距视口visual viewport

1. 字面意思, 它是用户正在看到的网站的区域. 注意: 是网站的区域.
2. 我们可以通过缩放去操作视觉视口, 但不会影响布局视口, 布局视口仍保持原来的宽度.

6.2.3 理想视口 ideal viewport

1. 为了使网站在移动端有理想的浏览和阅读宽度而设定.
2. 理想视口, 对设备来讲, 是最理想的视口尺寸
3. 需要手动添加meta视口标签通知浏览器操作
4. meta视口标签的主要目的: 布局视口的宽度应该与理想视口的宽度一致, 简单理解就是设备有多宽, 我们布局的视口就多宽.

6.2.4 meta视口标签

<meta name="viewport" content="width=device-width, user-scalable=no initial-scale= 1.0, maximum-scale=1.0, minimum-scale=1.0" >

| 属性 | 解释说明 |

6.3 二倍图

6.3.1 物理像素&物理像素比

1. 物理像素点指的是屏幕显示的最小颗粒, 是物理真实存在的. 这是厂商在出厂时就设置好了, 比如苹果6\7\8是750*1334

2. 我们开发时候的1px不是一定等于一个物理像素的

3. PC端页面, 1个px等于1个物理像素的, 但是移动端不尽相同

4. 一个px的能显示的物理像素点的个数, 称为物理像素比或屏幕像素比

5. PC端和早期的手机屏幕/普通手机屏幕: 1CSS像素=1物理像素

6. Retina 视网膜屏幕是一种显示技术, 可以将更多的物理像素点压缩至一块屏幕里, 从而达到更高的分辨率, 并提高屏幕显示的细腻程度.

6.4 移动端开发选择

1. 现在市场常见的移动端开发有单独制作移动端页面和响应式页面两种方案

6.5 移动端技术解决方案

6.5.1 移动端浏览器

1. 移动端浏览器基本以webkit内核为主, 因此我们考虑webkit兼容性问题.
2. 我们可以放心使用H5标签和CSS样式
3. 同时我们浏览器的私有前缀我们只需要考虑添加webkit即可

6.5.2 初始化 normalize.css

移动端CSS初始化推荐使用normalize.css
Normalize.css: 保护了有价值的默认值
Normalize.css: 修复了浏览器的bug
Normalize.css: 是模块化的
Normalize.css: 有详细的文档

官网地址: http://necolas.github.it/normalize.css/

6.5.3 CSS3 盒子模型 box-sizing

传统模式宽度计算: 盒子的宽度 = CSS中的width+border+padding
CSS3 盒子模型: 盒子的宽度 = CSS中设置的宽度width里面包含了border和padding, 也就是说, 我们的CSS3中的盒子模型, padding和border不会撑大盒子了

6.5.4 特殊样式

6.5.5 移动端常见布局

移动端技术选型
移动端布局和以前我们学习的PC端有所区别:

1. 单独制作移动端页面
   流式布局(百分比布局)
   flex弹性布局
   less+rem+媒体查询
   混合布局

2. 响应式页面兼容移动端
   媒体查询
   bootstrap

6.6 Flex 布局

个人觉得弹性盒子, 或者弹性布局这种叫法并没有很好的表达出该单词在英文语境中的本意.

6.6.1 flex布局父项常见属性

6.6.1.1 常见父项属性

以下6个属性是对父元素设置的

1. flex-direction: 设置主轴方向
2. justify-content: 设置主轴上子元素排列方式
3. flex-wrap: 设置子元素是否换行
4. align-content: 设置侧轴上子元素的排列方式(多行)
5. align-items: 设置侧轴上的子元素排列方式(单行)
6. flex-flow: 复合属性, 相对于同时设置了flex-direction和flex-wrap

6.6.1.2 主轴和侧轴 (main-axis / cross-axis)

在flex布局中,是分为主轴和侧轴两个方向, 同样的叫法有: 行和列, x轴和y轴
默认主轴方向是x轴, 水平向右
默认侧轴方向是y轴方向, 水平向下

6.6.1.3 flex-direction 设置主轴方向

属性值
flex-direction 属性决定主轴的方向(即项目的排列方向)
注意: 主轴和侧轴是会变化的, 就看flex-direction设置谁为主轴, 剩下的就是侧轴. 而我们的子元素是跟着主轴来排列的

6.6.1.4 justify-content: 设置主轴上子元素排列方式

justify 英文解释:(printing) to adjust (printed lines) by spacing so that the lines will be of the correct length. 参考rejustify, just有正义, 刚好的意思, ify是使得...怎么样的意思, 使得什么刚好.
justify是印刷术语: 通过调整打印线的间隙使得每行或列都有正确的宽度. 使得间距刚刚好.

justify-content: 属性定义了项目在主轴上的对齐方式.
注意: 使用这个属性之前一定要确定好主轴是哪个.

6.6.1.5 align-items: 设置侧轴上的子元素排列方式(单行)

该属性是控制子项在侧轴上的排列方式, 在子项为单项的时候使用.

6.6.1.6 align-content 设置侧轴上的子元素排列方式(多行)

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行), 在单行是没有效果的

6.6.2 flex子项常见属性

flex子项占的份数
align-self控制子项自己在侧轴的排列方式
order 属性定义子项的排列顺序(前后顺序)

6.6.2.1 flex 属性

flex属性定义子项目分配剩余空间, 用flex来表示占多少份数.

  .item {
      flex: <number> /* default 0 */
  }

6.6.2.2 align-self控制子项自己在侧轴上的排列方式

align-self属性允许单个项目有与其他项目不一样的对齐方式, 可覆盖align-items属性. 默认值为auto, 表示继承父元素的align-items属性, 如果没有父元素. 则等同于stretch

 span:nth-child(2) {
     align-self: flex-end;
 }

6.6.2.3 order属性

7 响应式布局与Bootstrap框架

7.1 rem适配布局学习目标

7.2 rem布局开始

方案?

1. 页面布局文字能否随着屏幕大小变化而变化?
2. 流式布局和flex布局主要针对于宽度布局, 那高度如何设置?
3. 怎样让屏幕发生变化的时候元素高度和宽度等比例缩放?

rem单位
rem(root em)是一个相对单位, 类似于em, em是父元素字体大小.
不同的是rem的基准是相对于html元素的字体大小.
比如, 根元素(html)设置font-size:12px非根元素设置width:2rem, 则换算成px表示就是24px.

7.3 媒体查询

7.3.1 什么是媒体查询

媒体查询(Media Query)是CSS3新语法.

使用@media查询, 可以针对不同的媒体类型定义不同的样式
@media可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中, 页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机, Android手机, 平板等设备都用得到多媒体查询

7.3.2 语法规范

 @media mediatype and | not | only (media feature) {
     CSS-Code;
 }

用@media开头 注意@符号
mediatype 媒体类型
关键字 and not only
media feature 媒体特性必须有小括号包含

媒体类型
all: 用于所有设备
print: 用于打印机和打印预览
screen: 用于电脑屏幕, 平板电脑, 智能手机等

媒体特性:
每种媒体类型都具有各自不同的特性, 根据不同媒体类型的媒体特性设置不同的展示风格, 我们暂且了解三个. 注意他们要加小括号包含
width: 定义设备中页面可见区域的宽度
min-width: 定义输出设备中页面最小可见区域宽度
max-width: 定义输出设备中页面最大可见区域宽度

实例

/* 这句话的意思是: 在我们屏幕上 并且 最大宽度是800像素时, 设置我们想要的样式*/
@media screen and (max-width: 800px) {

}

7.4 媒体查询+rem实现元素动态大小变化

实例

@media screen and (min-width: 320px) {
   html {
       font-size: 50px;
   }
}
@media screen and (min-width: 640px) {
   html {
       font-size: 100px;
   }
}

.top {
    height: 1rem;
    font-size: 0.5rem;
    background-color: green;
    color: #fff
}

7.5 媒体查询 引入文件

当样式比较繁多的时候, 我们可以针对不同的媒体使用不同的stylesheets(样式表)
原理, 就是直接在link中判断设备的尺寸, 然后引入不同的css文件

语法规范

<link rel="stylesheet" media="@media mediatype and | not | only (media feature)" href="mystylesheet.css">

8. Less 基础

8.1 维护css的弊端

CSS是一门非程序式语言, 没有变量, 函数, SCOPE(作用域)等概念

1. CSS需要书写大量看似没有逻辑的代码, CSS冗余度是比较高的
2. 不方便维护及扩展, 不利于复用
3. CSS没有很好的计算能力
4. 非前端开发工程师来讲, 往往会因为确实CSS编写经验而很难写出良好且易于维护的CSS代码项目.

8.2 less介绍

Less (Leaner Style Sheets) 是一门CSS扩展语言, 也成为CSS预处理器.
作为CSS的一种形式的扩展, 它并没有减少CSS的功能, 而是在现有的CSS语法上, 为CSS加入程序式语言的特性.
它在CSS的语法基础之上, 引入了变量, Mixin混入, 运算以及函数等功能, 大大简化了CSS的编写, 并且降低了CSS的维护成本, 就像它的名称所说的那样, Less可以让我们用更少的代码做更多的事情.
less中文网址: http://lesscss.cn
常见的CSS预处理器:Sass, Less, Stylus

一句话: Less是一门CSS预处理语言, 它扩展了CSS的动态特性.

8.3 Less 安装

1. 安装nodejs, 网址: http://nodejs.cn/download/
2. 检查是否安装成功, 使用cmd命令 node -v
3. 基于nodejs在线安装less, 使用cmd命令 'npm install -g less' 即可
4. 检查是否安装成功, 使用cmd命令 lessc -v 查看版本即可

8.4 less使用

我们首先新建一个后缀名为less的文件, 在这个less文件里面书写less语句

8.5 less 变量

变量是指没有固定的值, 可以改变的. 因为我们CSS中的一些颜色和数值等经常使用.

@变量名: 值;

1. 变量命名规范
   必须有@为前缀
   不能包含特殊字符
   不能以数字开头
   大小写敏感

8.6 编译

本质上, less包含一套自定义的语法及一个解析器, 用户根据这些语法定义自己的样式规则, 这些规则最终会通过解析器, 编译生成对应的CSS文件.
所以, 我们需要把我们的less文件, 编译生成css文件, 这样我们的html页面才能使用.

vscode 安装插件 Easy less

8.7 less嵌套