本文详细介绍了CSS绘制三角形的三种方法，包括使用边框、线性渐变和旋转。接着，解释了CSS选择器的优先级机制，包括行内样式、内部样式表和外部样式表的引入方式。此外，文章探讨了不同元素的居中布局策略，如定位、弹性盒和表格属性。还深入讨论了盒模型，包括W3C标准盒模型和IE怪异盒模型。最后，文章提到了CSS定位、浮动和清除浮动，以及媒体查询和响应式设计的基本概念。
HTML/CSS
1、如何使用css绘制一个三角形？
方法一：使用border绘制三角形（可以是等腰也可以是直角）
不给盒子元素设置宽高，给4个方向分别设置边框，但是颜色都为透明（把不要的部分颜色都设置为transparent）， 设置其中一个方向边框色，例如border-bottom，那么将绘制一个三角朝上的三角形。
#traingle { width: 0; height: 0; border: 100px solid transparent; border-bottom: 100px solid #ccc; }
margin和padding是不能设置颜色的，margin没有背景颜色，是完全透明的。margin可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性，而padding是跟随背景颜色（background-color可包括内容、内边距和边框区域）。
方法二：使用线性渐变linear-gradient（直角三角形）
实现一个45度的渐变,然后让它的颜色从渐变色变为两种固定颜色，最后再让其中一种颜色透明即可。
#traingle { width: 100px; height: 100px; background:linear-gradient(45deg,black,black 50%,red 50%,red 100%) }
方法三：使用transform:rotate和overflow:hidden
选中一个旋转中心，进行旋转，之后配合overflow:hidden截取想要的部分
2、简述css3选择器的优先级机制？(CSS权重及其引入方式 )
css 选择规则的权值不同时, 权值高的优先;css 选择规则的权值相同时, 后定义的规则优先; css 属性后面加 !important 时, 无条件绝对优先;
(1)权重
我们把特殊性分为几个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。
(2)引入方式
行间样式(直接为标签添加style属性)
<div style="background: red;">内联样式</div>
内部样式表（内嵌样式） 在head标签写style标签
<html>
<head>
<title>内部样式表</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
font-size: 12px;
}
</style>
</head>
<body></body>
</html>
外部css文件 使用link标签引入（在head标签中），引入地址写在href属性中。
<link rel="stylesheet" type="text/css" href="..."/>
导入样式
<style type = test/css>
@import url("外部样式表的名称");
</style>
3、请写出1rem、1em、1vh、1px、代表的含义
1rem ：继承根元素的字体大小，rem不仅可以设置字体的大小，还支持元素宽、高等属性。
1em ： em是相对于当前元素或父元素的字体大小，em的值并不是固定的。是一个相对单位。相对于当前对象内文本的font-size（em会继承父元素的字体大小），如果当前文本的字体尺寸没有设置，则相对于浏览器的默认字体尺寸。即1em=16px
1vh ： 视窗的（vw）宽度和 (vh)高度，相当于 屏幕宽度和高度的 1%
1px ：相对长度单位。像素px是相对于显示器屏幕分辨率而言的
4、标签全部作用 参考1参考2
设置herf属性可作为超链接、锚点（通过返回顶部能够实现一个常见的返回顶部的功能。）、打电话或者发邮件和协议限定符
5. 未知宽高元素水平垂直居中（方案及比较）–内容水平和垂直居中？
方法1：通过定位和transform属性来实现
思路：子元素绝对定位，距离顶部 50%，左边50%，然后使用css3 transform:translate(-50%; -50%)
优点：高大上,可以在webkit内核的浏览器中使用
缺点：不支持IE9以下不支持transform属性
<style>
.parent{
width:100%;
height:400px;
background:#666;
position:relative;
}
.children{
position:absolute;
top:50%;
left:50%;
background:red;
transform:translate(-50%,-50%);
}
</style>
方法2：使用弹性盒，通过利用flex布局
思路：使用css3 flex布局
优点：简单 快捷
缺点：兼容不好吧，详情见：http://caniuse.com/#search=flex
<style>
.parent{
width:100%;
height:400px;
background:#666;
display:flex;
align-items:center;
justify-content:center;
}
.children{
background:red;
}
</style>
方法3：通过table属性实现，主要原理是将父元素设置为table，子元素设置为table-cell，利用table属性让子元素垂直水平居中
准备一个已知宽高的父元素，子元素嵌套其中，父元素设置为table，绝对定位，子元素设置为table-cell，然后设置子元素 的vertical-align为middle就可以使其垂直居中，text-align为center使其水平居中。
优点：父元素（parent）可以动态的改变高度（table元素的特性）
缺点：IE8以下不支持
<style>
.parent{
display:table;
width:100%;
height:400px;
background:#666;
}
.children{
display:table-cell;
vertical-align:middle;
text-align:center;
background:red;
}
</style>
原文：添加链接描述
各方案比较：方法三使用table对于图片不管用，
方法4：添加链接描述
思路：使用一个空标签span设置他的vertical-align基准线为中间，并且让他为inline-block，宽度为0
缺点：多了一个没用的空标签，display:inline-blockIE 6 7是不支持的(添加上：_zoom1;*display:inline)。
当然也可以使用伪元素来代替span标签，不过IE支持也不好，但这是后话了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未知宽高元素水平垂直居中</title>
</head>
<style>
.parent2{
height:300px;
width: 300px;
text-align: center;
background: #FD0C70;
}
.parent2 span{
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
zoom: 1;/*BFC*/
*display: inline;
}
.parent2 .child{
display: inline-block;
color: #fff;
zoom: 1;/*BFC*/
*display: inline;
}
</style>
<body>
<div class="parent2">
<span></span>
<div class="child">hello world-2</div>
</div>
</body>
</html>
- 元素种类的划分
（1）块级元素（一行只能放一个）
所有块级元素都是非替换元素。元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一样）。
（2）行内元素也叫内联/嵌元素（一行可以放多个，占满一行才会换行），行内元素又分为行内替换元素和行内非替换元素
a.行内替换元素(也叫内联块级元素/行内块元素，可以设置宽高)
浏览器根据表示的元素和属性决定显示的内容,如：<img src="image.jpg">由标签元素img和属性src来决定显示的内容， 还有<input type="text">根据标签input和属性type来决定显示。常见的有：img、input、iframe、video、embed、canvas、audio
b. 行内非替换元素(不可以设置宽高，宽高由内容决定)
非替换元素：浏览器直接显示标签元素的内容
常见行内非替换元素有：a、strong、span、code、label
总结：替换元素（包括块级元素和行内替换元素）可以设置宽高、margin和padding，而非替换元素不能直接设置宽高（宽高取决于内容(文字图片)的宽高，不可变），也不能设置上下内外边距（左右有效，上下无效）。
非替换元素如何设置宽高：1可以通过设置display属性，如：display:inline-block变成行内块元素就可以设置了。2行内元素设置了position属性或float属性后属性默认变成inline-block，所以也可以设置宽高。
通过设置display属性可以对行内元素和块级元素进行切换：有display:inline-block、display:block和display:inline - HTML块级元素与行内元素的嵌套规则
（1）块级元素可包含行内元素或某些块元素，但行内元素不可包含块元素，只能包含行内元素。
（2）块级元素不能放在<p>里面
（3）几个特殊块级元素h1~h6、p、dt只能包含行内元素，不能包含块级元素。
（4）li 内可包含 div 标签
（5）嵌套时块级元素与块级元素并列、行内元素与行内元素并列，不能块级和行内元素并列。
如<div><h2></h2><span></span></div>错误 - 盒子模型及其理解
HTML中的每个标签都是一个盒子。当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。
一个盒子由四个部分组成：content、padding、border、margin。
从三维角度看：盒模型从底层到顶层的立体结构: margin->background-color->background-image->padding->content->border。
在CSS中，盒子模型可以分成：W3C 标准盒子模型和IE 怪异盒子模型，默认情况下，盒子模型为W3C 标准盒子模型。
（1）标准盒模型（浏览器默认的盒模型，盒子的宽度和高度都是指内容区的宽高）
盒子总宽度 = width + padding（左右） + border （左右）+ margin（左右）;
盒子总高度 = height + padding（上下） + border（上下） + margin（上下）；
（2）怪异盒模型（width/height 包含了 padding和 border值）
盒子总宽度 = width + margin（左右） ;
盒子总高度 = height + margin（上下）;
注：CSS 中的 box-sizing 属性定义了引擎应该如何计算一个元素的总宽度和总高度。
box-sizing: border-box;//怪异盒模型，元素的 width/height 包含padding，border
box-sizing: content-box;//标准盒， 默认值，元素的 width/height 不包含padding，border
box-sizing: inherit;//从父元素继承盒模型属性
- 定位方式及其区别（文档流） -四种
会脱离文档流 将使元素变为block元素，并脱离文档流
（1）绝对定位
相对于最近的已定位(非static定位的padding外边界或者说border内边界定位)的祖先元素。有已定位(指 position不是 static的元素)祖先元素, 以最近的祖先元素为参考标准。如果无已定位祖先元素, 以 body元素为偏移参照基准, 完全脱离了标准文档流。
（2）固定定位fixed
会相对于视窗来定位,这意味着即便页面滚动，它还是会停留在相同的位置。将使元素变为block元素，并脱离文档流。
不会脱离文档流
（3）相对定位，相对于元素的初始位置定位，不会脱离标准文档流。
（4）静态定位 位置不会发生改变不会脱离文档流
static 是默认值。top left bottom right这几个偏移属性还有z-index不会影响其静态定位的正常显示。
10. margin塌陷及合并问题
所谓的外边距合并就是，当两个垂直外边距相遇时，它们将形成一个外边距。合并的外边距的高度等于两个发生合并的外边距的高度中的较大者。
问题：造成margin塌陷主要有三种情况：
（1）两个相邻块元素垂直外边距塌陷,两个兄弟元素相邻的两个外边距合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。
解决办法：
a. 尽量给只给一个盒子添加margin值，可以直接改变其中一个的外边距的值，使之达到想要的效果,只给一个设置margin达到它们之间想要的距离。(推荐使用)。
b.BFC解决办法：给两个都加一层父级再加bfc,将兄弟元素分别作为子元素放在块级元素内，然后将其父级元素的渲染规则该为BFC。(不推荐使用,会破坏HTML文档结构)
（2）嵌套块元素垂直外边距的塌陷,两个元素是父子关系（没有内边距或边框把外边距分割开,margin-top会合并）
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，父元素的上外边距会与子元素的上外边距发生合并（子元素设置外边距并不会改变相对于父元素的距离），合并后的外边距为两者中的较大者。
解决办法：
a.可以通过给父元素添加边框或内边距.(不建议使用,会破坏布局)
b.使用BFC解决: 将父元素的渲染模式改为BFC渲染模式,触发bfc(块级格式上下文),改变父级的渲染规则.
（3）一个空元素，没有边框和填充，设置上下外边距时，上下合并成一个（取大），若该空元素遇到其他元素还会和其他元素发生外边距合并。只有普通文档流中块级元素（block）的垂直外边距才会发生外边距合并。行内框，浮动框或绝对定位之间的外边距不会合并。
-
CSS高度塌陷
在文档流中，父元素没有设置宽高的情况下，父元素的高度默认是被子元素撑开的，也就是说 子元素有多高，父元素就有多高，但是当子元素设置浮动之后，子元素会完全脱离文档流。此时将会导致子元素无法撑开父元素的高度，导致父元素高度塌陷（变为0）。父元素高度塌陷后，父元素以下的元素都会向上移动，导致布局混乱，所以我们要解决高度塌陷的问题。
解决办法：
（1）给父元素添加高度（不推荐使用），优点：简单，缺点：高度不能自适应，只能固定了。
（2）给父元素触发BFC
BFC有一个特性是计算BFC的高度时，浮动元素也参与计算，所以将将父元素触发为BFC后可以解决高度塌陷。
（3）给所有的浮动元素后面(若是兄弟元素则是最后一个)加一个空的标签。给添加的这个空标签添加声明 clear: both; 。可以再加上height: 0; overflow: hieedn;是为了避免这个空标签如果是li的话，在IE6和IE7. 上有默认高度撑着，所以要解决一下。)
（4）万能清除法（推荐）：给高度塌陷的元素添加如下after伪类（也可以是其他伪类）.box::after{ content: ''; clear: both;/*清除两侧浮动*/ display: block;/*转成成一个块元素*/ both; overflow: hidden; visibility: hidden; } -
浮动模型及清除浮动的方法
css提供了三种布局方式：标准文档流、浮动和定位，浮动和定位是为了解决一些标准文档流无法实现的布局（比如块级元素独占一行，不能一行排几个块）。
浮动造成的问题：
浮动的元素脱离了标准文档流、浮动元素会生成一个块级框，具有块级元素的特性，但是不占整行、当浮动元素没有设置尺寸,会适应浮动元素内的子元素尺寸、浮动的元素不占尺寸,标准流元素可以撑起父级块的尺寸,浮动元素不可以、浮动元素设置margin_top不会发生塌陷现象（因为触发了BFC）、元素浮动可能会导致父元素高度塌陷。
注：如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。
父级有了高度，就不会影响下面的标准流了
清除浮动的本质是清除浮动元素造成的影响：浮动的子标签无法撑开父盒子的高度。
清除浮动的方法：
（1）固定宽高：即给浮动的元素添加父级div盒子,再给父级盒子设置高度。（缺点：固定不灵活、不宜维护，只能适用于一些万年不变导航栏,固定栏;）
（2）给浮动元素的父元素也添加浮动，一起浮动，这样父元素也脱离文档流（缺点：后面的DIV盒子依然会塌陷到浮动元素下面）
（3）额外标签法（添加的必须是块级标签）：在浮动的元素最后添加一个空div标签,里面设置style=‘clear:both’;触发bfc机制。（缺点：增加了无意义的代码，结构化较差）
（4）父级添加双伪元素：给父元素添加:after 方式是额外标签法的升级版。.clearfix:after{ content: ""; display: block; height: 0px; clear: both; visibility: hidden; } /*IE6\7 兼容*/ .clearfix{ *zoom: 1; }（5）父盒子添加overflow: hidden;触发BFC，BFC可以包裹浮动流，BFC中浮动元素的高度也被计算在内，可以实现清除浮动，但是无法显示溢出的元素。
-
CSS定位属性
在css中,定位属性是“position”属性;当属性的值为“absolute”时元素绝对定位,当属性的值为“fixed”时元素固定定位,当属性的值为“relative”时元素相对定位,当属性的值为“static”时元素默认没有定位,遵循正常的文档流对象,静态定位的元素不会受到 top, bottom, left, right影响。粘性定位(sticky)的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素。z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面，具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。 -
display及相关属性
display 属性规定元素应该生成的框的类型，默认值是inline。常用none、inline-block、block、table。
-
IFC与BFC
Formatting context(格式化上下文)是W3C 规范中的一个概念.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素如何定位,以及和其他元素的关系和相互作用.
（2）BFC
BFC 即 Block Formatting Contexts (块级格式化上下文)，具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性(内部不会影响到外部)。
BFC通常是默认关闭的，如何开启/触发BFC,只要满足以下任意一条件,将会触发BFC:
a.body根元素
b.给元素设置浮动：float：除none以为的值。left/right
c.设置绝对和固定定位position：absolute/fixed
d.设置display：inline-block/table-cells/flex
e.设置overflow：除了visible以外的值（hidden/auto/scroll)
BFC的使用场景：去除外边距重叠现象、清除浮动（让父元素的高度包含子浮动元素，解决高度塌陷）、 避免某元素被浮动元素覆盖、避免多列布局由于宽度计算四舍五入而自动换行（自适应两栏布局，在PC端布局中,常见左侧宽度固定,右侧随浏览器的变化而自适应,通常是将左侧栏浮动来实现的,右侧使用block来自动填满内容,但是随着右侧内容满了,就会挤到左侧底部，但我们只要为右侧大盒子触发bfc,触发后就是一个单独的空间,绝对不会挤到左侧去）。
-
圣杯布局和双飞翼布局的实现
-
Flex布局
flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思。
flex可以解决的问题：解决元素居中问题；自动弹性伸缩，合适适配不同大小的屏幕，和移动端。
设置：display:flex；
Flex布局详解 -
px、em、rem的区别
参考3，px像素单位、em以父级元素大小为单位，rem以根元素html大小为单位 -
Less预处理语言
Less 没有去掉任何 CSS 的功能，而是在现有的语法上，增添了许多额外的功能特性。
添加链接描述
less 是一门 CSS 预处理器语言，通过它来编写 CSS 效率能大大提升
html的结构会随页面的要求加高为变得复杂，深度变深，CSS选择器书写起来变得很长，不方便，less可以通过嵌套，使得选择器比较简洁。 -
媒体查询
-
vh与vw
视窗的（vw）宽度和 (vh)高度，相当于 屏幕宽度和高度(1vh )的 1%
(1) vh:
vh是当前屏幕可见高度的1%，height:100vh == height:100%;
注意：当元素没有内容时候，设置height:100%该元素不会被撑开，但是设置height:100vh，该元素会被撑开，其高度与屏幕高度一致。
(2)vm
vw就是当前屏幕宽度的1%
注意：设置width:100%，被设置元素的宽度是按照父元素的宽度来设置，但是100vw是相对于屏幕可见宽度来设置的，所以会出现50vw 比50%大的情况 -
H5的语义化作用及语义化标签
对html语义化标签的理解：语义化标签，目的是让标签有自己的含义，如p标签表示段落，main标签表示文档的主要内容。语义化标签可以使方便用户阅读，页面更加清晰，有利于开发维护；也方便搜索引擎的优化，搜索引擎根据标签来确定上下文和各个关键字的权重。常见的语义化标签： -
Web Worker和Web Socket
-
CSS3及相关动画
-
如何实现响应式布局
-
SEO的概念及实现
-
HTML5的新特性
-
Less和Sass
最近被问到less编译成css的原理：
扫一扫
779
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
