web端布局

一、查阅文档
推荐的网站：
1、http://www.w3school.com.cn/
2、https://developer.mozilla.org/zh-CN/

二、Chrome调试工具
Chrome浏览器提供了一个非常好的调试工具，可以用来调试HTML结构和CSS样式。
1、Ctrl+滚轮 可以放大开发者工具代码大小。
2、左边是HTML元素结构，右边是CSS样式。
3、右边CSS样式可以改动数值（左右箭头或者直接输入）和查看颜色。
4、Ctrl+0 复原浏览器大小。
5、如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。
6、如果有样式，但是样式前面有黄色感叹号，则是样式属性书写错误。

三、推荐安装的插件
1、Chinese language Pack for VS Code 中文语言包。
2、Open in Browser 右击选择浏览器打开HTML文件。
3、JS-CSS-HTML Formatter 每次保存，都会自动格式化js css html代码。
4、Auto Rename Tag 自动重命名配对的HTML/XML标签。
5、CSS PeeK 追踪至样式。

四、CSS基础选择器
1、标签选择器，作用：可以选出所有相同的标签，比如p。特点：不能差异化选择。使用情况：较多。用法：p {color : red;} 。
2、类选择器，作用：可以选出1个或者多个标签。特点：可以根据需求选择。使用情况：非常多。用法：.nav {color : red;} 。
3、id签选择器，作用：一次只能选择一个标签。特点：id属性只能在每个HTML文档中出现一次。使用情况：一般和js搭配。用法：#nav {color : red;} 。
4、通用符选择器，作用：选择所有的标签。特点：选择的太多，有部分不需要。使用情况：特殊情况使用。用法：* {color : red;} 。
注意：每个基础选择器都有使用场景，都需要掌握。如果是修改样式，类选择器是使用最多的。

五、Emmet语法
1、快速生成HTML结果语法
(1)、生成标签直接输入标签名，按tab键即可。比如div 然后tab键，就可以生成

。
(2)、如果想生成多个相同标签，加上就可以了。比如div 就可以快速生成3个div 。
(3)、如果有父子关系的标签，可以用>。比如 ul>li就可以了。
(4)、如果有兄弟关系的标签，用+就可以了。比如div+p 。
(5)、如果生成带有类名或者id名字的，直接写 .demo 或者 #two，tab键就可以了 。
(6)、如果生成的div类名是有顺序的，可以用自增符号 $ 。
(7)、如果想要在生成的标签内部写内容，可以用 {} 表示 。
2、快速生成CSS样式语法，CSS基本采取简写形式即可
(1)、比如 w200 按tab键 可以生成 width: 200px;
(2)、比如 lh26 按tab键 可以生成 line-height: 26px;

六、CSS复合选择器
1、后代选择器，作用：用来选择后代元素。特点：可以是子孙后代。使用情况：较多。隔开符号及用法：符号是空格 .nav a
2、子代选择器，作用：选择最近一级元素。特点：只选亲儿子。使用情况：较少。隔开符号及用法：符号是大于 .nav>a
3、并集选择器，作用：选择某些相同样式的元素。特点：可以用于集体声明。使用情况：较多。隔开符号及用法：符号是空格 .nav, .header
4、链接伪选择器，作用：选择不同状态的链接。特点：跟链接相关。使用情况：较多。隔开符号及用法：重点记住 a{} 和 a:hover 实际开发的写法
5、:foucs选择器，作用：选择获得光标的表单。特点：跟表单相关。使用情况：较少。隔开符号及用法：input:focus

七、CSS元素显示模式
1、块元素
常见的块元素有

~

、

、

、

、
、
1. 等，其中
   标签是最典型的块元素。
   (1)、块元素的特点：
   1>、比较霸道，自己独占一行
   2>、高度、宽度、外边距及内边距都可以控制
   3>、宽度默认是容器（父级）的100%
   4>、是一个容器级盒子，里面可以放行内或者快级元素
   (2)、注意：
   1>、文字类的元素内不能使用快级元素
   2>、

   标签主要用于存放文字，因此

   里面不能放块级元素，特别是不能放

   
   3>、同理，

   ~

   等都是文字类块级标签，里面也不能放块级元素
   2、行内元素
   常见的行内元素有、、、、、、、、、等，其中标签是最典型的行内元素。有的地方也是将行内元素称为内联元素。
   (1)、行内的特点：
   1>、相邻行内元素在一行上，一行可以显示多个
   2>、高、宽直接设置是无效的
   3>、默认宽度就是他本身内容的宽度
   4>、行内元素只能容纳文本或其他行内元素
   (2)注意：
   1>、链接里面不能再放链接
   2>、特殊情况链接 里面可以放块级元素，但是给 转换一下快模式最安全
   3、行内快元素
   在行内元素中有几个特殊的标签 、、，他们同时具有块元素和行内元素的特点。
   (1)、行内块元素的特点：
   1>、和相邻行内元素（行内快）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）
   2>、默认宽度就是他本身内容的宽度（行内元素特点）
   3>、宽度、行高、外边距以及内边距都可以控制（块级元素特点）
   4、块级、行内、行内块元素对比：
   (1)、块级元素，元素排列：一行只能放一个块级元素。设置样式：可以设置宽度高度。默认宽度：容器的100%。包含：容器级可以包含任何标签
   (2)、行内元素，元素排列：一行可以放多个行内元素。设置样式：不可以直接设置宽度高度。默认宽度：他本身内容的宽度。包含：容纳文本或者其他行内元素
   (3)、行内块元素，元素排列：一行可以放多个行内块元素。设置样式：可以设置宽度高度。默认宽度：他本身内容的宽度
   (4)、元素显示模式转换，比如增加链接的触发范围。 转换为块元素：display:block；转换为行内元素：display:inline；转换为行内块元素：display:inline-block

   八、CSS布局总结
   1、布局为啥用不同盒子，我只想用div？
   标签都是有含义的，合理的地方用合理的标签。比如产品标题就用h，大量文字就用p
   2、为啥用那么多类名？
   类名就是给每个盒子起一个名字，可以更好的找到每个盒子，选取盒子更容易，后期维护也方便
   3、到底用margin还是padding？
   大部分情况可以混用，两者各有优缺点，但是根据实际情况，总是有更简单的方法实现

   九、传统网页布局的三种方式（简单点说就是盒子如何进行排列顺序）
   1、普通流（标准流），就是标签按照规定好默认方式排列
   (1)、块级元素会独占一行，从上向下顺序排列
   常用元素：div、hr、p、h1~h6、ul、ol、from、table
   (2)、行内元素会按照顺序，从左向右顺序排列，碰到父元素边缘则自动换行
   常用元素：span、a、I、em等
   2、浮动
   3、定位

   十、浮动
   1、为什么需要浮动
   有很多布局效果，标准流没有办法实现，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。
   浮动最典型的应用：可以让多个块级元素一行内排列显示。
   网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
   2、什么是浮动
   float属性用于创建浮动型框，将其移动到一边，直到左边缘或右边有触及包含快活另一个浮动框的边缘。
   3、浮动的特性
   (1)、浮动元素会脱离标准流。
   (2)、浮动的元素会一行内显示并且元素顶部对其。
   (3)、浮动的元素会具有行内块元素的特性。
   4、浮动布局注意点
   (1)、浮动和标注流的父盒子搭配。先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。
   (2)、一个元素浮动了，理论上其余的兄弟元素也要浮动。浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标注流。
   5、清楚浮动的本质
   (1)、清楚浮动的本质是清楚浮动元素造成的影响。
   (2)、如果父盒子本身有高度，则不需要清除浮动。
   (3)、清除浮动后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。
   6、清楚浮动方法
   (1)、额外标签也称为隔离法，是W3C推荐的做法。
   (2)、父级添加overflow属性。
   (3)、父级添加after伪元素。
   (4)、父级添加双伪元素。

   十一、CSS属性书写顺序
   1、布局定位属性：display/position/float/clear/visibility/overflow
   2、自身属性：width/height/margin/padding/border/background
   3、文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
   4、其他属性(CSS3)：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient…

   十二、为了提高网页制作的效率，布局时通常有以下的整体思路：
   1、必须确定页面的版心（可视区），我们测量可得知。
   2、分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一准则。
   3、一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置。页面布局第二准则。
   4、制作HTML结构。遵循先有结构，后有样式的原则。结构永远最重要。

   十三、定位
   1、定位：将一个盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。定位 = 定位模式 + 边移量。
   2、相对定位relative
   相对定位是元素在移动的时候，是相对于它原来的位置来说的。
   (1)、它是相对于自己原来的位置来移动的。
   (2)、原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来位置）
   (3)、相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。
   3、绝对定位 absolute
   绝对定位是元素在移动的时候，是相对于它祖先元素来说的。
   (1)、如果没有祖先元素或者祖先元素没有定位，，则以浏览器为准定位（Document文档）。
   (2)、如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位元素为参考点移动。
   (3)、绝对定位不在占有原先的位置。
   4、定位区别总结
   (1)、static静态定位，是否脱标：没有；移动位置：不能使用边移；是否常用：很少。
   (2)、relative相对定位，是否脱标：否（占有位置）；移动位置：相对于自身位置移动；是否常用：常用。
   (3)、absolute绝对定位，是否脱标：是（不占有位置）；移动位置：带有定位的父级；是否常用：常用。
   (4)、fixed固定定位，是否脱标：是（不占有位置）；移动位置：浏览器可视区；是否常用：常用。
   (5)、sticky粘性定位，是否脱标：否（占有位置）；移动位置：浏览器可视区；是否常用：当前阶段少。
   5、定位的扩展
   (1)、定位的特殊特性，绝对定位和固定定位也和浮动类似。
   1>、行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
   2>、块级元素添加绝对或者固定定位，如果不给高度和宽度，默认大小就是内容的大小。
   (2)、脱标的盒子不会触发外边距塌陷。
   浮动元素、绝对定位（固定定位）元素都不会触发外边距合并的问题。
   (3)、绝对定位（固定定位）会完全压住盒子。
   1>、浮动元素不同，只会压住他下面标准流的盒子，但不会压住下面标准流盒子里面的文字、图片。但是绝对定位（固定定位）会压住下面标准流所有的内容。
   2>、浮动之所以不会压住盒子，因为浮动产生的目的最初是为了做文字环绕的效果，文字会围绕浮动元素。

   十四、字体图标的下载
   1、icomoon 字库，http://icomoon.io
   2、阿里iconfont 字库，http://iconfont.cn/

   十五、CSS3新增选择器
   1、属性选择器
   2、结构伪类选择器
   3、伪元素选择器