学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的：1.HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。2.CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。3.JavaScrip...

虽然目前大多数网页都是采用的DIV+CSS布局的方式，但是也有少数的老式Web网页采用的是Table布局，我们可以一起来看看两种布局方式的优劣。布局对比div+css布局div+css的布局方式属于W3C标准，而且由于CSS的存在，HTML部分的代码会显得很纯净，满足行为，样式，结构分离的原则。页面加载速度更快，这是目前DIV+CSS使用更广泛的一个非常重要的原因。页面编码量相对于Table布局会...

行内元素分为两个，一个是非置换元素，一个是置换元素。这两个元素在布局上也是有所不同的。老规矩，先来说些概念：匿名文本，就是不包含标签的文本，比如之前例子中我们给span元素前面加上了x-height这样的文本就是匿名文本。字体框，顾名思义，就是font-size属性决定的字体占据的框行距，就是line-height属性设置的值减去font-size的值就是行高，除以2分配和字体上下两端，则是半...

我们都知道BFC、IFC这样的名词，也知道他们的定义，比如BFC，就是块级格式化上下文，表示块级盒子定义的区域，拥有自己的渲染规则，并且盒子之间不会相互影响等。但是具体包含了哪些渲染规则以及如何渲染可能知道的比较模糊，这里也是说下容易忽略的地方。在说这些渲染规则之前，先来说下一些概念，理解了这些概念，才能更好的理解盒模型。块级框，div等块级元素生成的框体就是块级框行内框，同理，span这样的...

这里选择符，就是平常所说的选择器。选择器的种类非常多，但大多就是上面列举的几种，除此之外，还有一些平时可能忽略的通用选择符：*{box-sizing:border-box;}看起来非常的简单，但是滥用他会造成一些意向不到的结果。首页就是他会给所有的元素都添加上对应的属性，即使这个元素压根就用不到这个属性，这样就造成了一定的性能浪费，另外一点则是非常容易忽视的地方在于他的优先级，也是我们说的特指...

全局关键字就是所有的属性都能使用的属性值，总共是有三个inherit，initial，unset。这些关键字是CSS3才出现的，在IE11以前和OperaMini是不支持的。inherit就是打破了上面的继承限制，只要属性值设置为inherit，那么就能从父元素继承这个属性。initial则是将属性设置为初始值，主要是用于那些没有预定义的初始值的属性，例如color属性，默认是取决于用...

<divclass="line3"><imgsrc="../../../assets/css_mindgraphy.png"width="100"></div>于是我们发现图片的下面出现了一点间隙，针对这种情况，vertical-align就可以出场了，只要将vertical-align设置为除默认值之外的位置值就可以了。.line3>img{vertical-align...

这是个在CSS中看不见，但却无处不在，有些书中将之称为空白节点。他是支撑内联文本存在的支柱。可以通过这种方法来看到他：.line1{line-height:0;border:1pxsolidred;font-size:20px;}根据上面学到的关于line-height的知识，当设置为0时，文本行高为0，那么外面的包含块，也就是父元素理论上也应该是0，但是我们发现这里的高...

首先需要明确的是line-height是作用在行内元素或者是行内块级元素上的，我们声明在块级框上的line-height实际也是作用于块级框中的内容的，因此经常可能看到会这么使用：div{line-height:100px;font-size:20px;}于是看到了这样的效果：可能下意识的就以为line-height就是作用在块级盒子上的。实际上呢，他是作用于块级盒子中的文本上的，如果去...

先来说字体，声明字体很简单，font-family声明就完事了，但是有时我们可能会看到这样的声明：h1{font-family:-apple-system,system-ui,SegoeUI,Roboto,Ubuntu,Cantarell,NotoSans,sans-serif,BlinkMacSystemFont,HelveticaNeue,PingFangSC,Hiragino...