1 HTML and CSS

HTMl(超文本标记语言)

---

HTML 概述

超文本标记语言用来描述和定义网页的内容
HTML(超文本标记语言——HyperText Markup Language)是构成 Web 世界的一砖一瓦;它定义了网页内容的含义和结构
“超文本”(hypertext)是指连接单个网站内或多个网站间的网页的链接

1. HTML标签功能区分

  
    
    
    
    
    
    

    
    

    
    
    

    
    
    
    
    
    

    
    
    

    
    
    
    
  
  
    
    一 ~ 六级标题
    
段落
    
块
    行内块

    
    
头部
    
    
主体
    
章
    
节
    
    

    
    

    
    

    
    
    

      
列表项
    
    
    

      
列表项
    
    
    

      
列表项目
      
列表项目描述
    

    
    
    

      
      

        

          
表头
        
      
      
      

      
      

        

          
单元格
        
      
    

    
    
    

      
      
      
      
      
      
      
      
      
      
      
      
      元素标注
      
      
      
      
      
      
      
      
      

      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      

      
      

      
      

      
      
      
      
    

    
    

    
    

    
    
    
    

    
    

    
    斜体
    强调文本
    粗体
    强调文本
    下划线
    插入
    删除线
    删除文本
    上标
    下标
  

2. HTML标签显示区分

块元素

1. 可设置“width”和“height”
2. 默认情况下,元素的宽度会占满整行,这就意味着块级元素的宽度会受到父级元素的宽度影响,而且不管元素是否占满整行,它的兄弟元素都会另起一行

<div>div>
<h1-h6>h1-h6>
<p>p>
<ol>ol>
<ul>ul>
<dl>dl>
<table>table>
<form action="">form>

内联元素(行内元素)

1. 不能设置“width”和“height”
2. 默认情况下,元素的默认宽度为content的宽度,高度由font-size决定,内联元素在未填满父级元素的时候会水平排列,一般只会用来承载内容
3. 行内元素在水平方向上的padding、border、margin的特性和块元素一模一样
4. 行内元素在垂直方向上的padding和border可以设置,但是不参与布局,margin不能设置
5. 除了a元素,行内元素不能包含块元素
6. 行内元素脱离文档流后,会变成块元素

<a href="">a>
<span>span>
<label for="">label>
<code>code>

<i>斜体i>
<em>强调文本em>
<b>粗体b>
<strong>强调文本strong>
<u>下划线u>
<ins>插入ins>
<s>删除线s>
<del>删除文本del>
<sup>上标sup>
<sub>下标sub>

行内块元素

1. 可设置“width”和“height”
2. 相对与内联元素的优点是可以设置宽高,缺点是块级内联元素之间会出现间隙,解决办法是设置父级元素 font-size：0

<img src="" alt="">
<input type="text">
<select name="" id="">select>
<button>button>
<textarea name="" id="" cols="30" rows="10">textarea>

3. HTML语义化

HTML5的语义化指的是合理正确的使用语义化的标签来创建页面结构,暨正确的标签做正确的事

语义化的优点

• 在没CSS样式的情况下 页面整体也会呈现很好的结构效果
• 代码结构清晰 易于阅读
• 利于开发和维护 方便其他设备解析(如屏幕阅读器)根据语义渲染网页
• 有利于搜索引擎优化(SEO) 搜索引擎爬虫会根据不同的标签来赋予不同的权重
  

CSS(层叠样式表)

---

CSS 概述

层叠样式表用来描述 Web 内容的外观
层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言,用来描述 HTML 或 XML(包括如 SVG、MathML、XHTML 之类的 XML 分支语言)文档的呈现;
CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题
CSS 是开放网络的核心语言之一,由 W3C 规范 实现跨浏览器的标准化

1. 盒模型

当对一个文档进行布局(layout)的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型 (CSS basic box model),将所有元素表示为一个个矩形的盒子(box) ,这个盒子,就是盒模型
一个盒子由四个部分组成: content + padding + border + margin

标准盒模型

浏览器默认的盒子模型,内容只为内容

• 盒子总宽度(width) = (contentWidth ) + padding + border + margin
• 盒子总高度(height) = (contentHeight ) + padding + border + margin

box-sizing: content-box

怪异盒模型

内容为 内容 + padding + border

• 盒子总宽度(width) = Width(contentWidth + padding + border) + margin
• 盒子总高度(height) = Height(contentHeight + padding + border) + margin

box-sizing: border-box

2. 格式化上下文

css2.1 提出的概念,定义的是页面中的一块渲染区域,或者这么理解,就是页面中的一块独立的作用域,同一个格式化上下文的区域和不同格式化上下文之间的定位方式都会发生变化

BFC(块级格式化上下文)

• BFC形成
  1. 根元素
  2. 脱离普通文档流的元素(浮动,固定定位,绝对定位等)
  3. 非块级元素(display设置了inline-block,table,flex)
  4. overflow属性值不为visible的块级元素
• BFC影响
  1. BFC是页面上的独立作用域,内部元素不会和外部元素产生影响
  2. 同一个BFC内的相邻元素会发生垂直边距的折叠,即两者的边距取决于双方边距的最大值而不是总和
  3. 计算BFC时,内部浮动元素也会被计算在内
• BFC应用场景
  1. 防止margin重叠(塌陷)
  2. 清除内部浮动
     

IFC(内联格式化上下文)

• IFC形成
  1. 多个内联元素排列在一起的时候就形成一个IFC,这些内联元素直接不能穿插块级元素
• IFC影响
  1. 一个IFC内的元素都是水平排列的
  2. 横向的margin、border、padding属性对这些元素都有效
  3. 垂直方向可以调整对齐方式
     

3. 三大特性

层叠性

• (权重相同)样式作用到标签上,发生了样式冲突,后边的样式会把前边的样式给覆盖掉(层叠掉)
• 就近原则
• 复合属性不写的值,取默认值
  

继承性

• 子元素和父元素样式没有冲突的时候,子元素会继承父元素的某些样式
  1. 字体属性(font)
  2. 文本属性(text)
  3. 元素可见性(visibilit)
  4. 表格布局属性
  5. 列表属性(list)
  6. 光标属性(cursor)
• a 标签的字体颜色不能被继承
• h1-h6标签字体的大小也是不能被继承的
  

优先级

∞
    !important
1,0,0,0
    行内样式(style)
0,1,0,0
    ID选择器(#id)
0,0,1,0
    类选择器(.class)
    伪类选择器(:hover)
    属性选择器([type="radio"])
0,0,0,1
    元素选择器(div)
    伪元素选择器(::before)
0,0,0,0
    通配符选择器(*)
  继承
    浏览器自带
其他选择器(对权重的计算没影响,即不参与计算)
    选择连接符：+,>,-, ,||

• 多个(样式作用到同一个(类.标签),发生了样式冲突,权重高的先执行
• !important > 行内式 > id > class > element > * > 浏览器自带 > 继承
• 不同的选择器作用到同一个类(标签),权重会叠加(相加);权重可以叠加但不可以进位
• 当子元素和父元素样式发生冲突的时候,权重相同的情况下,永远会执行子元素自身的样式
  

4. CSS 属性书写(顺序)

善用继承 inherit 书写样式

内容显示

display { // 元素显示模式
  display: block; // 块级
  display: inline; // 内联
  display: inline-block; // 行内块
  display: flex; // 弹性盒子
  display: grid; // 网格布局
  display: none; // 不显示(占据空间消失,引起回流/重排和重绘)
}

visibility { // 元素是否可见
  visibility: visible; // 元素可见(默认)
  visibility: hidden; // 元素不可见(占位置,引起重绘)
  visibility: collapse; // 表格元素中使用时,此值可删除一行或一列
}

overflow { // 元素溢出
  overflow: visible; // 内容不会被修剪(默认)
  overflow: hidden; // 内容会被修剪,并且其余内容是不可见的
  overflow: scroll; // 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容
  overflow: auto; // 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容
}

opacity { // 元素的不透明级别(支持过度)
  opacity: 1; // 不透明
  opacity: 0; // 透明
}

vertical-align { // 元素垂直对齐方式
  vertical-align: baseline; // 默认(对齐父元素基线)
  vertical-align: middle; // 父元素中部
  vertical-align: top; // 元素顶端与行内元素最高元素顶端对齐
  vertical-align: bottom; // 元素底端与行内元素最底元素底端对齐
}

position(定位)

position { // 定位
  position: relative // 相对定位(基于偏移前位置)
  position: absolute // 绝对定位(脱标,基于最近一级带有定位的父元素定位(最终为浏览器窗口,若浏览器滚对则随之滚动),左右margin失效)
  position: fixed // 固定定位(脱标,基于浏览器窗口,浏览器滚对不随之滚动)
  position: sticky // 粘性定位(可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位)
  position: static // 静态定位(默认)
}

float(浮动)

float { // 浮动(脱标)
  float: left // 左浮动
  float: right // 右浮动
  float: none // 无浮动
}

尺寸

width { // 宽度
  width: auto; // 宽度
  min-width: none; // 最小宽度
  max-width: none; // 最大宽度
}

height { // 高度
  height: auto; // 高度
  min-width: none; // 最小高度
  max-width: none; // 最小高度
}

box(布局盒子)

border { // 边框
  border: 1px solid #ccc; // 简写属性
    border-width: 1px; // 边框宽度
    border-style: solid; // 边框样式(solid:实线, dashed:虚线, dotted:点状, double:双线, none:无)
    border-color: #ccc; // 边框颜色
  
  border-radius: 50%; // 圆角边框(上左/上右/下右/下左)
}

outline { // 轮廓
  outline: 1px solid #ccc; // 简写属性
    outline-width: 1px; // 轮廓宽度
    outline-style: solid; // 轮廓样式(solid:实线, dashed:虚线, dotted:点状, double:双线, none:无)
    outline-color: #ccc; // 轮廓颜色
}

margin { // 外边距
  margin: 10px; // 简写属性(上/右/下/左; 上/左右/下; 上下/左右)
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
}

padding { // 内边距
  padding: 10px; // 简写属性(上/右/下/左; 上/左右/下; 上下/左右)
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

box-shadow { // 阴影
  * ? h-shadow 水平阴影位置,允许负值
  * ? v-shadow 垂直阴影位置,允许负值
  * ? blur 模糊距离
  * ? spread 尺寸
  * ? color 颜色
  * ? inset 将外部阴影 (outset) 改为内部阴影; 
  
  box-shadow: 1px 1px 5px 2px #ccc inset;
}

background(背景)

注意: position 与 size 属性共同声明时：需用 / 进行分割

background { // 背景
  background: #ccc cover/center no-repeat content-box border-box fixed url(./image/logo.png); // 简写属性
    background-color: #fff; // 背景颜色
    background-size: cover; // 背景大小(x, y, cover, contain) // ? cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,背景图像的某些部分也许无法显示在背景定位																																	区域中; contain:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域
    background-position: center; // 背景位置(x, y)
    background-repeat: no-repeat; // 背景是否重复(repeat, no-repeat, repeat-x, repeat-y)
    background-origin: content-box; // 背景定位区域(content-box, padding-box, border-box)
    background-clip: border-box; // 背景裁剪区域(content-box, padding-box, border-box)
    background-attachment: fixed; // 背景是否固定(fixed:固定, scroll:随着滚动)
    background-image: url(./image/logo.png); // 背景图片(none, url())
}

font(字体)

注意: 简写时 font-size and font-family 必须书写

font { // 字体
  font:12px/1 Arial, Helvetica, sans-serif; // 简写属性
    font-size: 12px; // 字体大小
    line-height: 1; // 行高
    font-family:Arial, Helvetica, sans-serif; // 字体系列
  font-weight: bold; // 字体粗细(400:normal, 700:bold)
}

text(文本)

text { // 文本
  color: #000; // 颜色
  line-height: 1; // 行高
  text-align: center; // 文本对齐方式(left:左对齐, right:右对齐, center:居中对齐, justify:两端对齐)
  text-decoration: none; // 文本装饰(underline:文本下的一条线, overline:文本上的一条线, line-through:穿过文本下的一条线, blink:闪烁的文本)
  text-indent: 2em; // 文本首行缩进
  text-transform: none; // 文本大小写(capitalize:单词首字母大写开头, uppercase:全大写, lowercase:全小写,)
  word-spacing: 1em; // 单词间距 
  white-space: nowrap; // 如何处理元素中的空白(normal:空白会被浏览器忽略(默认), nowrap:文本不会换行,文本会在在同一行上继续,直到遇到 
 标签为止,)
  text-overflow: ellipsis; // 文本溢出(clip:修剪文本, ellipsis:显示省略符号来代表被修剪的文本, string:使用给定的字符串来代表被修剪的文本,)
  text-shadow: none; // 文本阴影
}

list-style(列表样式)

list-style { // 列表样式
  list-style-type: none; // 标记类型(none)
  list-style-position: inside; // 标记位置(none)
  list-style-image: none; // 标记图片(none)
}

cursor(光标)

cursor { // 光标样式
  cursor: pointer; // 小手
  cursor: default; // 箭头
  cursor: crosshair; // 十字线
  cursor: move; // 移动
  cursor: text; // 指示文本
  cursor: wait; // 正忙(表或沙漏)
  cursor: help; // 可用的帮助(问号或一个气球)
}

table(表格样式)

table { // 表格样式
  border-collapse: collapse; // 是否合并表格边框()
  border-spacing: 0; // 单元格边框之间的距离(x, y)
  caption-side: center; // 表格标题的位置(left, right, top, bottom, center)
  empty-cells: show; // 隐藏表格中空单元格上的边框和背景(show:绘制, hide:不绘制)
  table-layout: auto; // 显示表格单元格、行、列的算法规则(auto:自动, fixed:列宽由表格宽度和列宽度设定)
}

transform(2D/3D转换)

transform { // 2D/3D转换
  transform: translate(x, y, z) scale(x, y, z) rotate(x, y, z); // 简写属性
    transform: translate(x, y, z); // 转换
    transform: scale(x, y, z); // 缩放(一般为: 1/2 倍数)
    transform: rotate(x, y, z); // 旋转
}

transition(过度)

transition { // 过度
  transition: all 1s linear 0s; // 简写属性
    transition-property: all; // 属性名称(all:所有属性)
    transition-duration: 1s; // 花费时间(以 s 为单位)
    transition-timing-function: linear; // 时间曲线(linear平均速度)
    transition-delay: 0s; // 何时开始(以 s 为单位)
}

animation(动画)

@keyframes identifier { // 定义关键帧
  from{ } // 起始
  to{ } // 结束
  %{ } // 百分比设置
}

animation { // 动画
  animation: identifier 1s linear 0s infinite alternate; // 简写属性
    animation-name: identifier; // 动画名称
    animation-duration: 1s; // 花费时间(以 s 为单位)
    animation-timing-function: linear; // 时间曲线(linear平均速度)
    animation-delay: 0s; // 何时开始(以 s 为单位)
        // 特有设置
    animation-iteration-count: infinite; // 播放次数(n:Number, infinite:无限)
    animation-direction: alternate; // 是否逆向播放(normal:正常播放, alternate:逆序播放)
    // 设置 infinite 后无效
    animation-play-state: paused; // 运行或暂停(running:正常播放, paused:暂停动画))
    // 设置 direction 后无效
    animation-fill-mode: forwards; // 动画时间之外状态(backwards:回归第一帧, forwards:保持最后帧)
}

5. CSS 布局

1. 普通流

默认布局、从左到右排列,当一行位置不够时,另起一行向下排列
除了受 padding 和 margin 的影响外,还受到 display 的影响

2. 浮动

浮动元素脱离标准流
该元素的下一个兄弟元素中有内联元素(通常是文字),则会围绕该元素显示,形成类似"文字围绕图片"的效果;即虽然浮动会让元素脱离文档流,但是文本内容会受到浮动元素的影响

float { // 浮动(脱标)布局
  float: left // 左浮动
  float: right // 右浮动
  float: none // 无浮动
}

3. 定位

position { // 定位布局
  position: relative // 相对定位
  position: absolute // 绝对定位(脱标)
  position: fixed // 固定定位(脱标)
  position: sticky // 粘性定位(相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位,须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同)
  position: static // 静态定位(无定位)
}

4. flex

flex { // flex 布局
  display: flex; // 定义 flex 容器
  display: inline-flex; //定义行内 flex 容器
  // flex 容器
  flex-flow: flex-direction flex-wrap; // 简写属性
    flex-direction: row; // 主轴方向(row:水平start, row-reverse:水平end, column:垂直start, column-reverse:垂直end)
    flex-wrap: nowrap; // 是否换行显示(wrap:换行, nowrap:不换行)

  place-content: align-content justify-content; // 简写属性
    align-content: center; // 纵轴空间分配(该属性对单行弹性盒子模型无效)
    justify-content: center; // 主轴空间分配(flex-start:从左至右排列项目, flex-end:从右至左排列项目, center:居中排列项目, space-between:均匀排列每个元素、首个元素放	  置于起点,末尾元素放置于终点, space-around:每个元素周围分配相同的空间、两侧间距较少(显示), space-evenly:均匀排列每个元素、每个元素之间的间隔相等, stretch:均匀分布项目 		、拉伸‘auto’-大小的项目以充满容器)

  gap: row-gap column-gap; // 简写属性
    row-gap: 10px; // 元素行之间的间隙大小
    column-gap: 10px; // 元素列之间的间隙大小
  
  place-items: align-items justify-items; // 简写属性
    align-items: center; // 控制十字轴上项目的对齐方式(flex-start:从左至右排列项目, flex-end:从右至左排列项目, center:居中排列项目, stretch:均匀分布项目 、拉                                     伸‘auto’-大小的项目以充满容器)
    justify-items: center; // 为所有盒中的项目定义了默认的 justify-self(弹性布局中,该属性被忽略)

  // item 项目
  flex: flex-grow flex-shrink flex-basis; // 简写属性
    flex-grow: 1; // flex 增长系数
    flex-shrink: 1; // flex 收缩系数
    flex-basis: auto; // flex 元素初始大小

  justify-self: auto; // 单个盒子在其布局容器适当轴中的对齐方式(弹性布局中,该属性被忽略)
  
  align-self: center; // 对齐当前 grid 或 flex 行中的元素,并覆盖已有的 align-items 的值(属性不适用于块类型的盒模型和表格单元;如果任何 flexbox 元素的侧轴方向 margin 						  值设置为 auto,则会忽略 `align-self`)
}

5. grid

grid { // grid 布局
  display: grid; // 定义 grid 网格
  display: inline-grid; // 定义行内 grid 网格
  // gird 容器 
  grid-template-columns: 100px auto 100px; // fr 容器剩余空间单位 minmax(最小,最大) r
  grid-template-rows: 100px 100px;

  gap: column-gap row-gap; // 简写
    column-gap: 10px; // 列轨道宽度
    row-gap: 10px; // 行轨道宽度

  // 定义一个区域并为区域内项目进行命名(不需要命名使用 . )
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';

  grid-auto-flow: row; // 项目排序方式(先行后列)默认,也可以设置 column 先列后行

  place-content: align-content justify-content; // 简写属性
    align-content: center; // 总体项目排列(需容器还有空间)
    justify-content: center; // 总体项目排列(需容器还有空间)

  grid-auto-columns: auto; // 隐式网格列设置
  grid-auto-rows: auto; // 隐式网格行设置

  // item 项目
  align-items: center; // 项目在轨道内垂直对齐方式(与flex相似)
  justify-items: center; // 项目在轨道内水平对齐方式(与flex相似)

  grid-column-start: 2; // 2 列轨道开始
  grid-column-end: 4; // 4 列轨道结束
  grid-row-start: 2; // 2 行轨道开始
  grid-row-end: 4; // 4 行轨道结束

  grid-area: b; // 制定项目放到哪个区域(需与 grid-template-areas 配合使用)

  justify-self: auto; // 单个盒子在其布局容器适当轴中的对齐方式(弹性布局中,该属性被忽略)
  
  align-self: center; // 对齐当前 grid 或 flex 行中的元素,并覆盖已有的 align-items 的值(属性不适用于块类型的盒模型和表格单元;如果任何 flexbox 元素的侧轴方向 margin 						  值设置为 auto,则会忽略 `align-self`)
}

6. 选择器

基础选择器

复合选择器语法

伪元素选择器

动态伪类选择器

结构伪类选择器

属性选择器

否定伪类选择器

7. CSS 函数

8. CSS 单位

• CSS 有几个不同的单位用于表示长度
• 一些设置 CSS 长度的属性有 width, margin, padding, font-size, border-width, 等
• 长度有一个数字和单位组成如 10px, 2em, 等
• 数字与单位之间不能出现空格;如果长度值为 0,则可以省略单位
• 对于一些 CSS 属性,长度可以是负数
• 有两种类型的长度单位：相对和绝对
  

浏览器支持

注意: Internet Explorer 9 通过不标准的名称 vm 来支持 vmin ;

相对长度

相对长度单位指定了一个长度相对于另一个长度的属性;对于不同的设备相对长度更适用;

注意: rem与em有什么区别呢？区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素;

绝对长度

绝对长度单位是一个固定的值,它反应一个真实的物理尺寸;绝对长度单位视输出介质而定,不依赖于环境(显示器、分辨率、操作系统等);

备注: 像素或许被认为是最好的"设备像素",而这种像素长度和你在显示器上看到的文字屏幕像素无关;px实际上是一个按角度度量的单位;

9. 预处理器

CSS预处理器是一种专门的编程语言,用来为CSS增加一些编程特性(CSS本身不是编程语言)

CSS 预处理器主要目的

• CSS语法不够强大(例如: CSS选择器无法进行嵌套,导致CSS中存在较多重复的选择器语句); CSS中无法定义变量以及没有合理的样式复用机制,导致整体CSS样式难以维护
• 为了减少CSS代码冗余,为CSS提供样式复用机制,提高CSS代码的可维护性

CSS 预处理器工作流程

各种预处理器语法不一样,但最终工作流程是一样的

• 以 Sass/Less/Styus 提供的语法规则编写样式代码
• 经过编译器把 Sass/Less/Styus 编写的代码转换成标准的CSS代码
• 浏览器加载解析转换后的CSS样式(浏览器只能解析标准的CSS代码,而不能是 Sass/Less/Styus 等)
  

Scss、Sass

2007年诞生,最早最成熟的CSS预处理器,有两种语法,分别以 .sass 和 .scss 为扩展名. SCSS 是 Sass3 引入的新语法,完全兼容 CSS3,并继承了 Sass 的强大功能,和 CSS 语法结构更接近

Less

2009年诞生,受Sass影响大,以 .less 为扩展名

Stylus

2010年诞生,来自Node.js社区,主要用来给Node项目进行CSS预处理支持,以 .styl 为扩展名

10. CSS 布局方案

水平垂直居中

1. text-align + line-height

.layout {
  text-align: center;
  line-height: height;
}

2. position + 负margin

.layout {
  position: relative;
  .content {
    position: absolute;
    left: 50%;
    top: 50%;
      margin-top: -50%;
       margin-left: -50%;
  }
}

3. position + transform

.layout {
  position: relative;
  .content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

4. position + margin:auto

.layout {
  position: relative;
  .content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
}

5. display: table-cell

.layout{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  .content {
      display: inline-block
  }
}

6. display: flex

layout {
  display: flex;
  justify-content: center;
  align-items: center;
}

单列布局

特征：定宽、水平居中

1. 全等宽,自适应

原理说明：对header、content、footer统一设置width或max-width,并通过margin:auto实现居中

/* HTML */ 

  
头部
  
内容
  
尾部


/* less */
.layout {
  /*   width: 1200px; */
  /*设置width当浏览器窗口宽度小于1200px时,单列布局不会自适应;*/
  max-width: 1200px;
  margin: 0 auto;
}

2. 头、尾全等宽,内容自适应

原理说明：header、footer的内容宽度为100%,但header、footer的内容区以及content统一设置width 或 max-width,并通过margin:auto实现居中

/* HTML */ 

  
头部


内容


  
尾部

/* less */
.layout {
    /*   width: 1200px; */
    /*设置width当浏览器窗口宽度小于1200px时,单列布局不会自适应;*/
  max-width: 1200px;
  margin: 0 auto;
}

双列&三列布局

二列布局的特征是侧栏固定宽度,主栏自适应宽度

三列布局的特征是两侧两列固定宽度,中间列自适应宽度

1. float+(margin / overflow: hidden)

原理说明：设置两个侧栏分别向左向右浮动,中间列通过外边距给两个侧栏腾出空间,中间列的宽度根据浏览器窗口自适应

/* HTML */ 

  
sub
  
extra
  
main


/* less */
.sub{
  width: 100px;
  float: left;
}
.extra{
  width: 200px;
  float: right;
}
.main{
  margin-left: 100px; 
  margin-right: 200px;
  // overfrow: hidden;
}

一些说明:

• 注意DOM文档的书写顺序,先写两侧栏,再写主面板,更换后则侧栏会被挤到下一列(圣杯布局和双飞翼布局都会用到);
• 这种布局方式比较简单明了,但缺点是渲染时先渲染了侧边栏,而不是比较重要的主面板

二列的实现方法
如果是左边带有侧栏的二栏布局,则去掉右侧栏,不要设置主面板的margin-right值,其他操作相同;反之亦然

2. position+margin

原理说明：设置两个侧栏分别向左向右定位,中间列通过外边距给两个侧栏腾出空间,中间列的宽度根据浏览器窗口自适应

/* HTML */ 
left
main
right

/* less */
.sub, .extra {
  position: absolute;
  top: 0; 
  width: 200px;
}
.sub { 
  left: 0;
}
.extra { 
  right: 0; 
}
.main { 
  margin: 0 200px;
}

一些说明:

• 本方法不限制DOM书写顺序,先写主面板会使主面板部分优先渲染(一般主面板会比侧栏内容重要)
• 与上一种方法相比,本种方法是通过定位来实现侧栏的位置固定
• 如果中间栏含有最小宽度限制,或是含有宽度的内部元素,则浏览器窗口小到一定程度,主面板与侧栏会发生重叠

二列的实现方法
如果是左边带有侧栏的二栏布局,则去掉右侧栏,不要设置主面板的margin-right值,其他操作相同;反之亦然

3. 圣杯布局(float + 负margin)

原理说明：
主面板设置宽度为100%,主面板与两个侧栏都设置浮动,常见为左浮动,这时两个侧栏会被主面板挤下去;通过负边距将浮动的侧栏拉上来,左侧栏的负边距为100%,刚好是窗口的宽度,因此会从主面板下面的左边跑到与主面板对齐的左边,右侧栏此时浮动在主面板下面的左边,设置负边距为负的自身宽度刚好浮动到主面板对齐的右边;为了避免侧栏遮挡主面板内容,父元素设置左右padding值为左右侧栏的宽度,给侧栏腾出空间,此时主面板的宽度减小;由于侧栏的负margin都是相对主面板的,两个侧栏并不会像我们理想中的停靠在左右两边,而是跟着缩小的主面板一起向中间靠拢;此时使用相对布局,调整两个侧栏到相应的位置
布局步骤:

1. 三者都设置向左浮动
2. 设置main宽度为100%,设置两侧栏的宽度
3. 设置 负边距,sub设置负左边距为100%,extra设置负左边距为负的自身宽度
4. 设置父元素的padding值给左右两个子面板留出空间
5. 设置两个子面板为相对定位,sub的left值为负的sub宽度,extra的right值为负的extra宽度

/* HTML */ 
         
  
        
  
        
  
  


/* less */
#bd {
  padding: 0 230px 0 190px;

  .main {
    float: left;
    width: 100%;
  }

  .sub {
    float: left;
    width: 190px;
    margin-left: -100%;
    position: relative;
    left: -190px;
  }

  .extra {
    float: left;
    width: 230px;
    margin-left: -230px;
    position: relative;
    right: -230px;
  }
}

一些说明

• DOM元素的书写顺序不得更改
• 主面板部分优先渲染(一般主面板会比侧栏内容重要)
• 当面板的main内容部分比两边的子面板宽度小的时候,布局就会乱掉;可以通过设置main的min-width属性或使用双飞翼布局避免问题

二列的实现方法
如果是左边带有侧栏的二栏布局,则去掉右侧栏,不要设置主面板的padding-right值,其他操作相同;反之亦然

4. 双飞翼布局( float + 负margin )

原理说明：
双飞翼布局和圣杯布局的思想有些相似,都利用了浮动和负边距,但双飞翼布局在圣杯布局上做了改进,在main元素上加了一层div, 并设置margin,由于两侧栏的负边距都是相对于main-wrap而言,main的margin值变化便不会影响两个侧栏,因此省掉了对两侧栏设置相对布局的步骤
布局步骤:

1. 三者都设置向左浮动
2. 设置main-wrap宽度为100%,设置两个侧栏的宽度
3. 设置 负边距,sub设置负左边距为100%,extra设置负左边距为负的自身宽度
4. 设置main的margin值给左右两个子面板留出空间

/* HTML */ 

  
#main

        


/* less */
.main-wrap {
  float: left;
  width: 100%;

  .main {
    margin: 0 230px 0 190px;
  }
}

.sub {
  float: left;
  width: 190px;
  margin-left: -100%;
}

.extra {
  float: left;
  width: 230px;
  margin-left: -230px;
}

一些说明

• 主面板部分优先渲染(一般主面板会比侧栏内容重要)
• 圣杯采用的是padding,而双飞翼采用的margin,解决了圣杯布局main的最小宽度不能小于左侧栏的缺点
• 双飞翼布局不用设置相对布局,以及对应的left和right值
• 通过引入相对布局,可以实现三栏布局的各种组合,例如对右侧栏设置position: relative; left: 190px;,可以实现sub+extra+main的布局(元素移出返回)

二列的实现方法
如果是左边带有侧栏的二栏布局,则去掉右侧栏,不要设置main-wrap的margin-right值,其他操作相同;反之亦然

HTML and CSS 特性要点

---

HTML5 新特性

1. 拖拽释放: (Drap and drop) API ondrop,拖放是一种常见的特性,即抓取对象以后拖到另一个位置;在HTML5中,拖放是标准的一部分,任何元素都能够拖放
2. 自定义属性: data-id
3. 语义化标签: header, nav, footer, aside, article, section, main
4. 音 / 视频: audio / video
5. 画布: Canvas
6. 地理: (Geolocation) API其实Geolocation 就是用来获取到当前设备的经纬度(位置)
7. localStorage: 本地离线存储,用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动删除
8. sessionStorage: 该数据对象临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据
9. 新增表单控件: search,color,range,date,time,datetime-local,url,email,number,tel
10. 新的技术: web worker(为 Web 内容在后台线程中运行脚本提供了一种简单的方法),web socket(提供了用于创建和管理 WebSocket 连接，以及可以通过该连接发送和接收数据的 API),Geolocation(获取设备地理位置的可编程的对象)
    

CSS3 新特性

1. 新增颜色模式: RGBA,HSLA
2. 文字阴影:text-shadow
3. 边框:圆角边框(border-radius);边框阴影(box-shadow);图片边框(border-image)
4. 盒子模型:box-sizing
5. 背景:background-size background-origin background-clip
6. 渐变:linear-gradient , radial-gradient
7. 过渡:transition,可实现属性的渐变
8. 自定义动画: animate @keyfrom
9. 媒体查询: 多栏布局@media screen and (width:800px) (…)
10. 2D 转换/3D 转换:transform: translate (x, y) rotate (x, y) skew (x, y) scale (x, y)
11. 字体图标:iconfont/icomoon
12. 弹性布局:flex布局
13. 网格布局:Grid布局
    

Canvas和SVG的区别是什么

Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

SVG

SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas 与 SVG 的比较

Canvas

• 依赖分辨率
• 不支持事件处理器
• 弱的文本渲染能力
• 能够以 .png 或 .jpg 格式保存结果图像
• 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
  

SVG

• 不依赖分辨率
• 支持事件处理器
• 最适合带有大型渲染区域的应用程序（比如谷歌地图）
• 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
• 不适合游戏应用
  

位图跟矢量图的区别

位图

位图图像也称为点阵图像，位图使用我们称为像素的一格一格的小点来描述图像

矢量图

矢量图是根据几何特性来绘制图形，是用线段和曲线描述图像，矢量可以是一个点或一条线，矢量图只能靠软件生成，矢量图文件占用内在空间较小，因为这种类型的图像文件包含独立的分离图像，可以自由无限制的重新组合

区别

• 矢量图形与分辨率无关，可以将它缩放到任意大小和以任意分辨率在输出设备上打印出来，都不会影响清晰度
• 而位图是由一个一个像素点产生，当放大图像时，像素点也放大了，但每个像素点表示的颜色是单一的，所以在位图放大后就会出现咱们平时所见到的马赛克状。
  

浏览器兼容性前缀

-moz-: 代表firefox浏览器私有属性
-ms-: 代表IE浏览器私有属性
-webkit-: 代表chrome、safari私有属性
-o-: 代表opera私有属性

优雅降级,渐进增强

优雅降级和渐进增强印象中是随着CSS3流出来的一个概念;由于低级浏览器不支持CSS3,但CSS3 的效果又太优秀不忍放弃,所以在高级浏览中使用CSS3 而低级浏览器只保证最基本的功能;关键的区别是他们所侧重的内容,以及这种不同造成的工作流程的差异
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站,后续针对兼容问题进行设置
“渐进增强”观点则认为应关注于内容本身,先针对兼容问题进行设置,后续再应用高级功能

响应式设计

网页内容自动适配屏幕

1. 媒体查询方案
2. 百分比 方案
3. VH/VW 方案
4. rem 方案
   

媒体查询

CSS3 中的增加了更多的媒体查询,就像if条件表达式一样,可以设置不同类型的媒体条件,并根据对应的条件,给相应符合条件的媒体调用相对应的样式表使用@Media查询,可以针对不同的媒体类型定义不同的样式,通过媒体查询,可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局,比如为不同分辨率的屏幕,设置不同的背景图片比如给小屏幕手机设置@2x图,为大屏幕手机设置@3x图,通过媒体查询就能很方便的实现

@media screen and (max-width: 1920px) { ... }
// 设置更多条件
@media screen (min-width: 375px) and (max-width: 600px) {
  body {
    font-size: 18px
  }
}

readonly 和 disabled 的区别

1. 两个属性都可以作用于input等表单元素上，都使得元素成为“不可用”的状态；
2. 两者的字面意义

• readonly表示“只读”，一般表示对于文字内容只读，即不可更改内容，对于非文字的表单“只读”与“不只读”似乎没有啥区别；
• disabled表示“使残废，使无效”，都残废了，不管是什么内容，都是无效的。(禁用)
  

HTML and CSS 实现方案

---

rem 适配方案

1. 通用方案

1. 设置根font-size: 625%(或其它自定的值,但换算规则1rem不能小于12px)
2. 通过媒体查询分别设置每个屏幕的根font-size
3. CSS直接除以2再除以100即可换算为rem

优点: 有一定适用性,换算也较为简单
缺点: 有兼容性的坑,对不同手机适配不是非常精准;需要设置多个媒体查询来适应不同手机,单某款手机尺寸不在设置范围之内,会导致无法适配

2. 手淘方案

1. 拿到设计稿除以10,得到font-size基准值
2. 引入flexible
3. 不要设置meta的viewport缩放值
4. 设计稿px/ font-size基准值,即可换算为rem

@rootSize: 37.5rem; // 设计稿 / 10
(10 / @rootSize) // px / 基准值

优点: 通过动态根font-size、viewpor、dpr来做适配,无兼容性问题,适配精准
缺点: 需要根据设计稿进行基准值换算,在不使用编辑器插件开发时,单位计算复杂

清除浮动

元素浮动脱标后,无法撑起父元素的高度,影响父元素的布局
与浮动元素同级的非浮动元素(内联元素)会跟随其后,影响布局

1. clear: both 方案

.block { // 在盒子布局的尾部放置一个块级元素,设置不允许两侧有浮动元素
  clear: both;
}

2. 伪元素清除浮动方案

.clearfix:after {
  content: "."; // 伪元素必写,添加内容为兼容写法
  display: block; // 设置块级元素以设置清除浮动属性
  visibility: hidden; // 隐藏元素
  height: 0; // 高度为0,不显示此元素
  clear: both; // 清除浮动
}
/* for IE */
.clearfix{
  *zoom: 1; // 兼容IE
}

注意: 也可以给父级元素设置overflow: hidden;或overflow: auto;清除浮动方案本质上是将同一个BFC中的两个元素隔开

CSS画三角形

1. border是由三角形组合而成的
2. 如果想要其中一个,只需要把另外三个的颜色都设为 transparent(透明)
3. 不过其他隐藏的左边框依然占据着空间,如果不想要,可以把右边框的 border-width 设为 0

/* HTML */ 
div {
    width:0;
    height:0;
    border-style: solid;
    border-width: 40px 0px 40px 40px;
    border-color: transparent transparent transparent red;
}

效果如下：

小于1px的边框

1. 渐变方案(效果较好)

.layout {
  position: relative;
  .layout::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-image: linear-gradient(0deg, transparent 50%, #000 50%); // 0 edg 向↑ 90edg 向→;-webkit 原理实现 为 90edg 向↑,0 edg 向→
  }
}

2. 缩放方案

.layout {
  position: relative;
  .layout::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #000; // border-top: 1px solid #000;
    transform: scaleY(0.5);
  }
}

3. 缩放方案加强版(四边)

.layout {
  position: relative;
  .layout::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    border: 1px solid #000;
    transform-origin: 0 0; // 缩放定位设置为左上角
    transform: scale(0.5, 0.5);
  }
}

4. 边框阴影(最简便)

.layout {
    box-shadow: 0 0 1px 1px #000 inset;
}

小于12px的字体

利用缩放将字体显示缩小,但又因为缩放会针对所有显示进行控制,所以设置时针对需要小于12px的字体标签进行特定包裹设置即可

.layout {
  display: inline-block; // 行内块,不影响布局
  transform: scale(0.8); // 10px
}

文本溢出显示

1. 单行文本溢出显示

.layout { // 前置条件: 设置宽度
  white-space: nowrap; // 是否折行
  overflow: hidden; // 溢出隐藏
  text-overflow: ellipsis; // 文本溢出部分以省略号代替
}

2. 多行文本溢出显示

.layout {
  overflow: hidden; // 溢出隐藏
  text-overflow: ellipsis; // 文本溢出部分以省略号代替
  display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示
  -webkit-line-clamp: 4; // 控制最多显示几行
  -webkit-box-orient: vertical; // 设置伸缩盒对象子元素的排列方式
}

精灵图(雪碧图)

background-position：x,y;(X和Y一般都取负值)把图片背景移动到自己需要的位置