CSS
CSS性能优化
1.雪碧图
2.将图像保存为base64：实现网页图片在网速不好的时候先于内容加载，减少http的请求次数（只需请求CSS,减少了一次请求图片）来减少网站服务器的负担。
link和@import的区别
1.Link属于html标签，而@import是CSS中提供的,link可以加载其他资源，@import只能加载CSS
2.在页面加载的时候，link会同时被加载，而@import引用的CSS会在页面加载完成后才会加载引用的CSS（异步加载）
3.@import只有在ie5以上才可以被识别，而link是html标签，不存在浏览器兼容性问题
4.Link引入样式的权重大于@import的引用（@import是将引用的样式导入到当前的页面中）
1.css样式表
行内样式表（行内样式直接定义在html文件中，使用style属性实现）
内嵌样式表（ 内嵌式在页面中使用标记将CSS样式包含在页面中）
外部样式表（将CSS样式定义在外部的一个单独文件中，在HTML中使用标记使用）
css样式表包括三部分：选择符、属性和属性值，语法为 选择符{属性：属性值；}
属性值：属性与属性值之间使用：分隔，当有多个属性时，使用；分隔。
选择器
1、ID #id
2、class .class
3、标签(元素选择器) p a
4、通用 *
5、属性 [type=“text”]
6、伪类 ：hover（状态）
7、伪元素 ::first-line(真实存在的元素)
8、子选择器、相邻选择器属性：包括文本属性、字体属性、背景属性、布局属性、边界属性、项目列表属性等。
优先级
！important > 行间样式 > id选择器 > class选择器||属性选择器 > 标签选择器 > 通配符选择器
!important 优先级是最高的。
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表标签选择器和伪元素选择器，如div p，权值为0001。
第五等：通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
继承的样式没有权值。
什么时候用到雪碧图？
a、静态图片，不随用户信息的辩护而变化
b、小图片，图片容量比较小
c、加载量比较大
CSS隐藏元素的方法
1.opacity 设为 0、该属性的意思是检索或设置对象的不透明度当他的透明度为0的时候,视觉上它是消失了,但是他依然占据着那个位置,并对网页的布局起作用。它也将响应用户交互。
2. visibility 设为 hidden、隐藏对应的元素并且挤占该元素原来的空间。 该属性类似opacity属性，该属性值为hidden的时候，元素将会隐藏，也会占据着自己的位置，并对网页的布局起作用，与 opacity 唯一不同的是它不会响应任何用户交互。
3. 将 display 设为 none 隐藏对应的元素但不挤占该元素原来的空间。该属性才是真正意义上的隐藏元素,当元素的display属性为none时,该元素就会就会从视觉中消失,并且连盒模型也不生成.也不会在页面占据任何位置,不但如此,就连它的子元素也会一同从盒子模型中消失。给他和它的子元素添加的任何动画效果交互效果都会不起作用。
4. position 设为 absolute 然后将位置设到不可见区域。该属性的意义就是把元素脱离文档流移出视觉区域，添加该属性后既不会影响布局，又能让元素保持可以操作。应用该属性后，主要就是通过控制方向（top,left,right,bottom），达到一定的值，离开当前可是页面。
26、rgba()和opacity的透明效果有什么不同？
rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，
而rgba()只作用于元素的颜色或其背景色。子元素不会继承透明效果！
position :absolute和float属性的异同
两者的共同点：对内联元素设置float或absolute属性，可以让元素脱离文档流（块级元素也可以），并且可以设置其宽高。
两者的不同点：float仍会占位置，position会覆盖文档流中的其他元素。
在左右布局时用浮动，其他用绝对定位
行内元素和块级元素
1常见块级元素有：html、body、div、header、footer、nav、section、aside、article、p、hr、h1~h6、ul、ol、dl、form、table、tbody、thead、tfoot、tr等；块级元素：会自动换行，在横向充满其父元素的内容区域，默认独占一行的，可修改宽高；
2常见行内元素有：span、a、br、strong、em、。·行内元素：不会自动换行，行内元素左右可以有其他元素，行内元素的宽高大多是auto*auto。；行内元素设置宽高无效（但是行内置换元素可以设置宽高，下面有详细解释）、设置上下margin无效，设置上下padding类似无效（不影响文档流排列）
(1)display:inline;转换为行内元素
(2)display:block;转换为块状元素
3)display:inline-block;转换为行内块状元素
inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行） 、 、
自适应的单位
1.vw：1vw等于视口宽度的1%。
2.vh：1vh等于视口高度的1%。
3.vm：选取vw和vh中最小的那个。
4.em:相对于父元素字体大小
5.rem:相对于根元素字体大小
bootstrap
bootstrap根据不同屏幕尺寸，选择不同的栅格选项。一共有四种栅格选项，超小屏（手机）、小屏（平板）、中屏（桌面）、大屏（超大桌面）。栅格系统分为12列，即每行最多可容纳12列。若里，一个.row内包含的列（column）大于12个（即，一行中的栅格单元超过12个单元），则会自动排版，总之，一行只能最多12列，
布局（左边固定，右边自适应）
1.表格布局 table
2.flexbox
而弹性布局中元素的大小是高度依赖父容器的大小的。因为，它所具有的“伸缩性”，目标就是为了撑满父元素。当然这是在任其“野蛮生长”的情况下，你也可以通过相关css属性控制其是否撑满、撑满什么轴。
弹性布局是一种全新的思维方式，让很多实现复杂的问题有了更好的理解方式（如垂直居中）。只需要给直接父容器设置为display: flex;，duang~ 子元素就默认具有了可收缩性。
1.垂直居中
.container {
display: inline-flex;
align-items: center;
justify-content: center;
}
2.一侧固定，一侧自适应
.container {
display: flex;
.sidebar {
width: 100px;
}
.content {
flex: 1;
}
}
3.多列等高
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: stretch;
}
自适应布局
一、左边固定，右边自适应的布局
- 左边左浮动，右边加个overflow:hidden;
#lt{ float: left;width:200px; background: #ff0;}
#rt{ overflow: hidden; background: #f0f;} - 左边左浮动，右边加个margin-left;
#lt{ float: left; width:200px; background: #ff0;}
#rt{ margin-left: 200px; background: #f0f;} - 左边绝对定位，右边加个margin-left;
#lt{ position: absolute; top:0; left:0; width:200px; background: #ff0;}
#rt{ margin-left: 200px; background: #f0f;} - 左右两边绝对定位，右边加个width,top,left,right
#lt{ position: absolute; top:0 ; left:0 ;width:200px; background: #ff0;}
#rt{ position: absolute; top:0 ; left:200px; width: 100% ; rigth:0;background: #f0f;}
二、右边固定，左边自适应的布局 - 左边左浮动，margin-left负值,右边右浮动;
#lt{float:left; width:100%;background: #00f;margin-right: -200px;}
#rt{float: right; width: 200px;background: #ff0;} - 右边绝对定位，左边margin-right;
#lt{margin-right:200px; background: #00f;}
#rt{ position: absolute; right:0; top:0; width: 200px;background: #ff0;} - 左右两边绝对定位，左边加个width,top,left,right
#lt{ position: absolute; top:0; left:0; rigth:0; width: 100% ; background: #f0f;}
#rt{ position: absolute; top:0; left:200px; width:200px; background: #ff0;}
CSS定位（position）
1.static positon定位的默认值，没有定位(设置是无效的)
2.relative 生成相对定位的元素，相对于其原来位置进行定位，一般在子元素设置absoute定位时，给父元素设置relative元素的位置通过top、right、bottom、left 控制，其值的定位起点都是是父元素左上角(这点和absoute、fixed不一样)
3.absoute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位,元素的位置通过top、right、bottom、left 控制，top、left的定位起点是包含块左上角，right、bottom的定位起点是包含块右下角。绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。
4.fixed 生成绝对定位的元素，相对于浏览器窗口进行定位，和absoute的区别是fixed不会跟随屏幕滚动(常见的各种贴屏广告)
元素的位置通过top、right、bottom、left 控制，top、left的定位起点是包含块左上角，right、bottom的定位起点是包含块右下角当position的值为fixed，元素的位置相对于浏览器窗口是固定位置。这时元素就会脱离文档流，不在占据文档流的空间，也就是说该元素是可以和文档流的元素可以重叠在一起。fixed主要是用来把元素固定在视窗里面。
盒模型：
内容(content)、填充(padding)、边界(margin)、 边框(border)
盒子实际宽度（高度）=内容（content）+边框（border）+间隙（padding）+间隔（margin）。
盒模型的宽高只是内容（content）的宽高，
而在IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。
border是元素的外围，计算元素的宽和高要把border加上特别是特殊网站页面（比如说活动专题页面等）上，这一点是很多新手忽略的地方。border有三个主要属性，color（颜色）、width（粗细）和style（样式）。
3、style属性可以设为none、hidden等，其中none和hodden是不显示border，hidden可以用来解决边框的冲突问题。
padding用于控制content与border之间的距离，同时设置上下左右的padding时，可以这样写padding:10px 20px 10px 10px;分别对应上、右、下、左四个方向的padding，逆时针排序，margin属性也可以这样书写。
margin用于控制块与块（可以理解成块级元素）之间的距离。为了便于理解可以把盒子模型想象成一幅画，content是画本身，padding是画与画框的留白，border是画框，margin是画与画之间距离。
CSS盒模型相互转化
box-sizing:content-box;
/IE模型/
box-sizing:border-box;
使用场景分析：当需要以content + padding + border为整体的时候使用border-box，例如：底部菜单栏等
圣杯布局
是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。三栏全部float:left浮动，并配合left和right属性。
main
left
right
.container {
padding: 0 300px 0 200px;
}
.left, .main, .right {
position: relative;
min-height: 130px;
float: left;
}
.left {
left: -200px;
margin-left: -100%;
background: green;
width: 200px;
}
.right {
right: -300px;
margin-left: -300px;
background-color: red;
width: 300px;
}
.main {
background-color: blue;
width: 100%;
}
浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。我们可以用"float:left"和"float:right"来使元素块向左向右浮动。 浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。如果图像是右浮动，下面的文本流将环绕在它左边。
浮动元素引起的问题
1.由于浮动元素已脱离文档流，所以父元素无法被撑开，影响与父级元素同级的元素。
2.与浮动元素同级的非浮动元素（内联元素）会跟随其后，也是由于浮动元素脱离文档流，不占据文档流中额位置。
3.如果该浮动元素不是同级第一个浮动的元素，则它之前的元素也应该浮动，否则容易影响页面的结构显示。
解决方法
1.使用css样式中的clear：both可以用来解决上述问题中的2、3
2.使用after伪元素清除浮动
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
3.给浮动的元素的祖先元素加上高度
4:父级设置overflow:hidden;
边距重叠
父元素没有设置margin-top，而子元素设置了margin-top：20px;可以看出，父元素也一起有了边距。
(BFC)“块级格式化上下文”
BFC的原理
内部的box会在垂直方向，一个接一个的放置，每个元素的margin box的左边，与包含块border box的左边相接触（对于从做往右的格式化，否则相反）
box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠
bfc的区域不会与浮动区域的box重叠
bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来，里面的也不会影响外面的
计算bfc高度的时候，浮动元素也会参与计算
怎么取创建bfc
float属性不为none（脱离文档流）
position为absolute或fixed
display为inline-block,table-cell,table-caption,flex,inine-flex
overflow不为visible
根元素
应用场景
自适应两栏布局
清除内部浮动
防止垂直margin重叠
1、BFC
BFC(Block Formatting Contexts)直译为"块级格式化上下文"。Block Formatting Contexts就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。如何产生BFC？
那BFC一般有什么用呢？比如常见的多栏布局，结合块级别元素浮动，里面的元素则是在一个相对隔离的环境里运行。
2、IFC
IFC(Inline Formatting Contexts)直译为"内联格式化上下文"，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)，水平排列
IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。 同个ifc下的多个line box高度会不同。 IFC中时不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。
那么IFC一般有什么用呢？
水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。
3、GFC（css3）“网格布局格式化上下文”
当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。
那么GFC有什么用呢，和table又有什么区别呢？首先同样是一个二维的表格，但GridLayout会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染语义和控制。
4、FFC（css3）“自适应格式化上下文”
display值为flex或者inline-flex的元素将会生成自适应容器（flex container）
Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。
伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox 定义了伸缩容器内伸缩项目该如何布局。
25、什么是外边距重叠？重叠的结果是什么？
外边距重叠就是margin-collapse。
在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
折叠结果遵循下列计算规则：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。
负边距
在css中，有两种边距，分别为内边距padding和外边距margin。
内边距padding是元素内动与边框之间的距离，外边距margin为元素边框到父元素框外边距之间的距离。
内边距padding只能设置为正值，而外边距margin可以设置为正值也可以设置为负值。
我们还需要了解一点，元素的背景是可以占用内边距padding距离的。
垂直水平居中的几种实现方式
一、水平垂直居中
1、行内元素水平居中 text-align :center ;vertical-align:center
2、块级元素水平居中 margin:0 auto
3、可以使用 flexbox 实现垂直居中，对于父级容器为 display: flex 的元素来说，它的每一个子元素都是垂直居中的；
2、块级元素
三、水平垂直居中
宽高固定元素
设定父级容器为相对定位的容器，设定子元素绝对定位的位置 position: absolute; top: 50%; left: 50%，最后使用负向 margin 实现水平和垂直居中，margin 的值为宽高（具体的宽高需要根据实际情况计算 padding）的一半。
.box-container{
position: relative;
width: 300px;
height: 300px;
}
.box-container .box {
width: 200px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -50px; /* 高度的一半 */
margin-left: -100px; /* 宽度的一半 */
}
宽高不固定元素
如果无法获取确定的宽高，同样需要设定父级容器为相对定位的容器，设定子元素绝对定位的位置 position: absolute; top: 50%; left: 50%。不同的是，接下来需要使用 transform: translate(-50%, -50%); 实现垂直居中：
.box {
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
flexbox
使用 flexbox 实现水平和垂直居中，只需使用两条居中属性即可：
.parent { display: flex;
justify-content: center;
align-items: center;
}
4、div+css的布局较table布局有什么优点？
改版的时候更方便 只要改css文件。
页面加载速度更快、结构化清晰、页面显示简洁。
表现与结构相分离。
易于优化（seo）搜索引擎更友好，排名更容易靠前。
5、 img的alt与title有何异同？ strong与em的异同？
a:alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显示)
title(tool tip):该属性为设置该属性的元素提供建议性的信息。
strong:粗体强调标签，强调，表示内容的重要性
em:斜体强调标签，更强烈强调，表示内容的强调点
10、简述一下src与href的区别。
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加
14、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。
27、css中可以让文字在垂直和水平方向上重叠的两个属性是什么？
垂直方向：line-height
水平方向：letter-spacing
letter-spacing的妙用
答案:可以用于消除inline-block元素间的换行符空格间隙问题。
30、描述一个”reset”的CSS文件并如何使用它。知道normalize.css吗？
重置样式非常多，凡是一个前端开发人员肯定有一个常用的重置CSS文件并知道如何使用它们。他们是盲目的在做还是知道为什么这么做呢？原因是不同的浏览器对一些元素有不同的默认样式，如果你不处理，在不同的浏览器下会存在必要的风险，或者更有戏剧性的性发生。
你可能会用Normalize来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗体的标题）。
在这一方面，无法做每一个复位重置。它也确实有些超过一个重置，它处理了你永远都不用考虑的怪癖，像HTML的audio元素不一致或line-height不一致。
31、Sass、LESS是什么？大家为什么要使用他们？
他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。
结构清晰，便于扩展。可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。可以轻松实现多重继承。完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。
72、b标签和strong标签,i标签和em标签的区别？
后者有语义，前者则无。
动画
设置transition设置过渡，添加transform设置形状，形成动画效果，如下：
2、添加animation属性，设置动画效果，如下：
.divadd {
transition: All 0.4s ease-in-out;
-webkit-transition: All 0.4s ease-in-out;
-moz-transition: All 0.4s ease-in-out;
-o-transition: All 0.4s ease-in-out;
transform:rotate(360deg);
-ms-transform:rotate(360deg); /* IE 9 */
-webkit-transform:rotate(360deg); /* Safari and Chrome */
}
.a1 {
position: absolute;
animation: a1 3s;
opacity: 0
}
@keyframes a1 {
0% {left: 10px;opacity: 0}
30% {left: 60px;background-color: pink;font-size:23px;opacity: 1}
90% {left: 100px;background-color: red;opacity: 1}
100% {left: 10px;opacity: 0}
}
多字体fallback
（实现多平台下的字体的适配）（字体族不加引号）
CSS属性font-family的作用是设置一组按优先级排序的字体列表，如果该列表中的第一个字体未在访问者计算机上安装，那么就尝试列表中的下一个字体，依此类推，直到列表中的某个字体是已安装的。比如：font-family:“Times New Roman”,Georgia,Serif;所以，一般在给出字体列表时，自然应把首选字体放在前面、把候选字体放在后面。建议在列表的最后给出一个族类（generic family），这样，当没有一个指定字体可用时，页面至少可以采用一个相同族类的字体来显示。
自定义字体
远程字体
字体行高
行高是指上下文本行的基线间的垂直距离。
行距是指一行底线到下一行顶线的垂直距离，即第一行粉线和第二行绿线间的垂直距离。
内容区：底线和顶线包裹的区域，即下图深灰色背景区域。
行框（line box），行框是指本行的一个虚拟的矩形框，行框高度等于本行内所有元素中行内框最大的值
要使得每行的文字一定的间距距离所以可以通过line-height样式（可以实现垂直居中）
vertial-align不同字体的对齐方式
图片下面空白
原理：图片是一个inline-block元素,默认vertical-align属性为baseline基线对齐。
解决：1 vertial-align（bottom）
2 display:block
3 父对象overflow:hidden;
4 img {float:left;}
背景
背景的渐变：background: linear-gradient(top（或left或角度）, #000000 0%, #ffffff 100%,可以加多个参数，比如4个颜色参数);
背景的平铺：background-size:30px 30px;(一条杠就会被平铺成一堆线)
将图像设为背景，不平铺：background-repeat:no-repeat;
背景图居中：background-position:center center;
多背景叠加：设置多个background,就会叠加
雪碧图
CSS雪碧 即CSS Sprite，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。
优点;
图标放在一起, 可以令图标的总容量稍小一点.
对于 Web 服务器上的每个独立资源, 都需要去连接和获取的.将很多图标放在一个图片上, 连接一次就全部取回来.
让浏览器将图标预先下载
缺点：
（1）图片难以管理, 难以定位。如果你要更换一个图标, 那么你需要编辑整个大图片.
CSS三角形
.tag{
width:300px;
height:100px;
border:5px solid #09F;
position:relative;
} //正方形
.tag em{
display:block;
border-width:20px;
border-style:solid;
position:absolute;
bottom:-40px;
left:100px;
border-color:transparent #09F transparent transparent;
} //
.tag span {
display: block;
border-width: 20px;
border-style: solid;
position: absolute;
bottom: -33px;
left: 100px;
border-color:#FFF transparent transparent;
}
/**
* 带阴影的三角形通过在一个模糊的三角形上叠加一个正常的三角形实现
*/
.triangle {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #f60;
position: absolute;
top: -10px;
left: 50%;
margin-left: -10px;
}
.triangle:after {
content: '';
position: absolute;
top: 0;
left: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #000;
position: absolute;
margin-left: -10px;
z-index: -1;
filter: blur(2px);
}
宽度自适应的正方形
.box{
width:50%;
height:50vw;
background-color:lightblue;
}
.box{
width:50%;
height:0;
padding-bottom:50%;
background-color:lightblue;
}
滚动：overflow :visible hidden scroll auto
文字换行：word-wrap
自定义字体的使用场景
字体图标 宣传品牌文案
伪类与伪元素
伪类与伪元素都是用于向选择器加特殊效果
伪类与伪元素的本质区别就是是否抽象创造了新元素
伪类只要不是互斥可以叠加使用
伪元素在一个选择器中只能出现一次，并且只能出现在末尾
伪类与伪元素优先级分别与类、标签优先级相同
响应式布局