弹性盒子布局（Flex Box Layout）弹性盒子是一种基于父容器的布局机制，它通过 display: flex 来激活，激活后容器中的子元素可以在水平或垂直方向上膨胀以填充额外的空间，或收缩以适应更小的空间 弹性盒子布局的基本概念： Flex Container（弹性容器, 伸缩容器）： display 的值设置为 flex 或 inline-flex 的元素为弹性容器 Flex Item（弹性项目, 伸缩项目）： 弹性容器( Flex Container ) 的每个子元素称为弹性项目 main axis（主轴）： 所有弹性项目( Flex Item )沿其一侧排列的轴称为主轴 cross axis（交叉轴）： 垂直于主轴的轴称为交叉轴 样例 HTML： 1234567<div class="container"> <div style="background-color: lightgray">盒子1</div> <div style="backgr ...

文档流（normal flow）文档流（正常流）是 浏览器页面中元素组织排列的默认规则，属于网页的最基层 将 HTML 中的元素在页面中自上向下分成一行一行，并在每行中按从左至右的顺序挨次排放元素，即为文档流 浮动（float）描述：浮动可以指定一个元素沿其所在容器的左侧或右侧放置，允许其它文本和行内元素环绕它。 属性值： none（默认值，元素不浮动） left（元素向左浮动） right（元素向右浮动） 浮动元素的定位规则： 当一个元素浮动之后，它会被移出文档流，然后向左或向右平移，一直平移直到碰到了所处容器的边框，或者碰到另外一个浮动的元素。如果父级容器的宽度无法容纳多个浮动元素时，则靠右的浮动元素会移动到与它相临的上一个浮动元素的下面 例： 123456789101112131415161718192021222324252627282930313233<style> .box1{ width: 100px; height: 100px; background-color: red; float: left; } ...

所谓盒模型( Box Model )就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的 内容区( content )、内边距( padding )、边框( border )和外边距( margin )组成。 所有的元素都会生成一个矩形框，我们称为元素框（ Element Box ），它描述了一个元素在网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其它盒子的大小和位置。 内容区( content )内容区是指元素具体要显示的内容(如图片、文字或其他元素等)区域，元素中的所有子元素和文本内容都在内容区中排列显示。其大小由 width 和 height 属性决定。默认情况下，一个盒子内容区的大小会被内容撑开，即根据内容的变化而变化。 主要属性： width( 宽，默认值为auto ) height( 高，默认值为auto ) color( 前景色，颜色会应用到文本和边框中，默认一般是黑色 ) background( 背景 ) 例： 1234567891011<style>div.box{ w ...

语义化标签HTML的主要工作是编辑文本结构和文本内容（也称为 语义semantics）以便浏览器能正确的显示，同时可以让搜索引擎更好的捕捉你网页的内容。 语义是指对一个词或者句子含义的正确解释。 语义化标签强调的是 HTML 的 结构 和HTML标签的 意义 ，而不是它显示的样式( 表现 )。 标题与段落 HTML有6种级别的标题, h1~h6。 6种级别的标题表示文档的6级目录的层级关系，比如说： <h1> 用作主标题（最重要的），其后是 <h2>（次重要的），再其次是 <h3> ，以此类推 一篇普通的文章，标题级别建议控制在3级，其中 <h1> 作为文章的主标题，一般只有一个。 1234567<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>段落<p>前后会自动< ...

CSS( Cascading Style Sheet )CSS 中文译为“层叠样式表”，它是一种将网页表现样式与网页结构分离的一种声明式设计语言，可以使用CSS控制HTML页面中的文本内容、图片外形以及版面布局等外观的显示样式。 CSS其设计目标是让浏览器以指定的特性去绘制页面元素。 发展 CSS1.0 1991年2月W3C发布了第一个有关样式的标准CSS1.0。这个版本中，已经包含了的相关 font 的相关属性、颜色与背景的相关属性、文字的相关属性、 box 的相关属性等。 CSS2.0 1985年5月，CSS2.0正式推出。这个版本推荐的是内容和表现效果分离的方式，并开始使用样式表结构。在布局上增加了 浮动 、 定位 等概念。 CSS2.1 2004年2月，CSS2.1正式推出。它在CSS2.0的基础上略微做了改动，删除了许多不被浏览器支持的属性。 CSS3 早在2001年，W3C 就着手开始准备开发CSS第三版规范。在今天还在不断的迭代完善，一些处于实验阶段，有争议未完全纳入标准的功能，不同厂商的浏览器的支持略有差别。目前比较流行的 Flex布局、em ...

WEB起源 蒂姆·伯纳斯-李 爵士万维网(WWW)的发明人 1991年8月6日，世界上第一个服务器和第一个网站在欧洲核子研究中心上线 世界第一个网站：http://info.cern.ch/hypertext/WWW/TheProject.html 伯纳斯李1994年建立万维网联盟（W3C） W3C的出现为了指定网页开发标准，以使同一个网页在不同的浏览器中有相同的效果 网页的组成根据W3C标准： 一个网页主要由三部分组成：结构、表现、行为 结构(HTML)HTML 用于描述网页结构 表现(CSS)CSS 用于控制页面中元素的样式 行为(JavaScript)JavaScript 用于响应用户操作 HTML(HyperText Markup Language)HTML即 超文本标记语言 超文本：是指一种带有链接关系的任何信息内容（如 文字、图片等） 标记语言：通过内容注释的方式来表示相应的信息并使内容结构化的语言 拓展：超文本文档是指使用超链接的方式，把文字和图片信息相互联结，形成具有相关信息体系，并且超文本文档的格式也有很多，比如苹果推出的的rtf（富士文档 ...