层叠样式表(英文全称：Cascading Style Sheets)
html标签引用
<style type="text/css">
</style><link rel="stylesheet" type="text/css" href="style.css">相关站点
- w3c css3手册 http://www.w3school.com.cn/cssref/index.asp
- CSS 选择器参考手册
https://www.w3school.com.cn/cssref/css_selectors.asp - translate3d() (Transforms) - CSS 中文开发手册 - 开发者手册 - 云+社区 - 腾讯云
https://cloud.tencent.com/developer/section/1072456 - CSS行高——line-height - 谦行 - 博客园
https://www.cnblogs.com/dolphinX/p/3236686.html
Block Formatting Context (BFC)
https://www.cnblogs.com/chakson/p/4972286.html
Flex布局
详细查看flex-layout文件夹
background-size
http://www.w3school.com.cn/cssref/pr_background-size.asp
https://blog.csdn.net/wd4java/article/details/50537562
:first-of-type
http://www.w3school.com.cn/cssref/selector_first-of-type.asp
media query
- 媒体查询使用方法@media https://www.cnblogs.com/zyl-Tara/p/5519144.html
@media screen and (max-width:480px){
.ads {
display:none;
}
}上面表示的是：当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏。
@media screen and (min-width:900px){
.wrapper{width: 980px;}
}上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。
当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”，如下所示。
@media screen and (min-width:600px) and (max-width:900px){
body {background-color:#f5f5f5;}
}在智能设备上，例如iPhone、iPad等，还可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。同样的，对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的“max-device-width”所指的是设备的实际分辨率，也就是指可视面积分辨率。
@media not print and (max-width: 1200px){样式代码}上面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。
only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性的设备，正常调用样式，此时就当only不存在；表示不支持媒体特性但又支持媒体类型的设备，这样就会不读样式，因为其先会读取only而不是screen；另外不支持Media Queries的浏览器，不论是否支持only，样式都不会被采用。如
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />在Media Query中如果没有明确指定Media Type，那么其默认为all，如：
<link rel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" />另外在样式中，还可以使用多条语句来将同一个样式应用于不同的媒体类型和媒体特性中，指定方式如下所示。
<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />上面代码中style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上。
到目前为止，CSS3 Media Queries得到了众多浏览器支持，除了IE6-8浏览器不支持之外，在所有现代浏览器中都可以完美支持。还有一个与众不同的是，Media Queries在其他浏览器中不要像其他CSS3属性一样在不同的浏览器中添加前缀。
css建议
编写css样式主题，建议主题以文件或文件夹为单位，比如 theme-red，theme-blue文件，表示两个主题，而不是把主题都放置在一个文件里面，通过class名来区分，通过class区分最好是区分粒度细一点的，比如btn-danger，btn-info
position
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
|---|---|
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
如果一个absolute的定位在一个relative定位里面，那么absolute的left right top bottom都是相对于它。如果定位在多个relative里面，那么absolute以它遇到的第一个relative为主要。如果全是static没有一个relative包裹这它，它会以窗口为目标。
css qa
1.如何正确理解CSS中的margin合并？
https://blog.csdn.net/xjlinme/article/details/79535794
概念
margin合并是指块级元素的上外边距与下外边距有时会合并为单个外边距，有两点需要理解。
- 在块级元素中，不包括浮动和绝对定位元素
- 只发生在和当前文档流方向的相垂直的方向上
场景
相邻兄弟元素margin合并
p { margin: 1em 0; }
<p>第一行</p>
<p>第二行</p>因为第一行和第二行的元素合并在一起，所以他们的间距还是1rem，而并非上下相加。
父级和子元素
.div1 { margin-top: 10px; }
.div2 { margin-top: 10px; }
<div class="div1">
<div class="div2"></div>
</div>由于父级和子级元素的合并，所以顶部的margin为10px，而不是20px。
空级块元素的合并
div1 { overflow: hidden; }
div2 { margin: 1rem 0; }
<div class="div1">
<div class="div2"></div>
</div>这个元素的margin-top和margin-bottom合并在一起，所以高度只有1rem。
解决方法
这里的解决方法我们分为三种情况来讨论，第一种就是解决兄弟元素之间的margin合并情况。
我们可以使用设置浮动元素来解决，例如：
p {
margin: 1em 0;
float: left;
}
<p>第一行</p>
<p>第二行</p>第二种是父级和子元素之间的margin合并，我们使用overflow属性来解决，例如：
.div1 {
margin-top: 10px;
overflow: hidden;
}
.div2 { margin-top: 10px; }
<div class="div1">
<div class="div2"></div>
</div>当然，我们还可以通过设置父元素为块状格式化上下文元素、设置border、padding等方式来解决问题。
第三种情况就是空块级元素的合并，一般为空块级元素设置一个高度就能够避免margin合并的问题。
div1 { overflow: hidden; }
div2 {
margin: 1rem 0;
height: 1rem;
}
<div class="div1">
<div class="div2"></div>
</div>意义
CSS中的margin合并是为了更好地进行图文信息展示而设计的，为了保证图文信息排版的舒服自然。我们不仅要理解它们存在的意义，而且要合理的运用它们。
2.在相对定位元素中的绝对定位元素如何实现居中？
方法1：
设置left,top值均为50%,同时margin-left设置为绝对定位元素width的一半取负,margin-top设为其height的一半取负。
例如，绝对定位元素的width:100px;height:100px;
position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;方法2：
设置margin:auto;设置left和right的值相等,top和bottom的值相等。
position:absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;注意：left和right的值不能超过其相对元素width减去它自身width的一半,否则绝对定位元素会优先取left值进行定位(前提是文档流是从左向右),但是top和bottom的值却没有这个限制。
3. [class$=“face”]是什么意思？
这是一个css3的选择器，
4. 24位颜色RGB转为32位的ARGB
RGB ：是24位的颜色值，高八位为R，中间八位为G，后八位为B。
ARGB：是32位的颜色值。高八位为A，次八位为R，再次八位为G，最后八位为B。
- A:alpha通道，透明值
- R:red通道，红色数值
- G:green通道，绿色数值
- B:blue通道，蓝色数值
每个值十进制最小为0，最大为255
十六进制为0，FF
ARGB和RGB转换
//取R,G,B单独的值
var r = pixelValue>>16 & 0xff;;
var g = pixelValue>>8 & 0xff;
var b = pixelValue & 0xff;
//左移进行到32位ARGB的转换
var color= (0xFF << 24) | (r << 16) | (g << 8) | b5.bug
1.border和outline的区别
outline是不占空间的，即不会增加额外的width或者height，而边框border会占用宽高；
发表评论