永远是蓝色
css是从右往左解析的。
white-space:nowrap;
word-wrap: break-word;
word-break:
letter-spacing
word-spacing
fixed失效
flex
flex变大和缩小
动画监听
grid了解多少 （超详细）强大的grid布局
多种水平居中和垂直居中的方法
清除浮动的方法
消除幽灵空白节点
postion属性
doctype是什么
BFC概念
bem命名规范
盒子模型
css实现宽高同高
---------------------移动端
移动端适配的5种方案
移动的viewport里边写什么
html中设置字体字号,html中设置字体大小的方法
1px 的解决方案
移动端调试的方法：vconsole, 真机链接，charles
auto的使用
那为什么从右向左的规则要比从左向右的高效？
彻底弄清translate、transform、transition和animation的区别和联系
css background-attachment属性详解
【CSS 单位 (详细介绍)】
移动端点滴yan
104道 CSS 面试题，助你查漏补缺
html5的新特性
css3的新特性
常见的移动端兼容问题以及解决方案
移动端布局常遇到的问题
vw、vh、vmin、vmax 的含义
flex布局
[flex]
* 容器的属性
* 1、flex-direction :属性决定主轴的方向 (即项目的排列方式）row，row-reverse ，column，column-reverse
* 2、flex-wrap : 默认情况下，项目都排在一条线（又称"轴线"上）nowarp，wrap，wrap-reverse
* 3、flex-flow：是flex-direction 属性和flex-wrap属性的简写，默认值row、nowrap
* 4、justify-content：属性定义了项目在主轴上的对齐方式,flex-start,flex-end,center,space-between,space-around
* 5、align-items :定义项目交叉轴上如何对齐（单行）
* 6、align-content :多行轴线对齐（用法同align-items ）
* flex项目属性
* 1、order 定义项目排列顺序
* 2、flex-grow 定义项目放大比例
* 3、flex-shrink 定义项目缩小比例
* 4、flex-basis 定义项目自身大小
* 5、flex：属性是flex-grow，flex-shrink ,flex-basis的简写，默认值为0、1、auto
* 6、align-self 项目自身对齐
flex: 4; 理解为 flex: 4 4 0%;
flex: 1; 理解为 flex: 1 1 0%;
flex: 50%; 理解为 flex: 1 1 50%;
flex: 200px; 理解为 flex: 1 1 200px;
子的margin会计算在父的宽度里边，但是子的宽度里边不会计算。
flex布局align-items和align-content的区别
css类的权重比，决定了优先级。
比如id: 100 ,class 10, 标签1
当class的权重比超过了id那么他就超过了优先级。
小三角 border实现。
一般用双引号表达伪元素
::after ::before
单引号表达伪类
:first-child :nth-child :not
双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法。
属性选择器
属性选择器的优先级大于类选择器
not的用法：
ul li:not(:first-child){
color:red;
}
ul li:not(:last-child){
font-size:20px;
}
CSS选择器中nth-child和nth-type-child的区别
css3的动画
animation: name duration timing-function delay iteration-count direction;
#app{
text-align:center;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);
opacity: 0;
}
to {
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);
opacity: 1;
}
}
多行文本溢出显示省略号
https://www.html.cn/archives/5206/
// 当行文本
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// 多行文本
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
当子容器成为浮动元素后，并脱离了文档流，父容器认为自己内容为空而导致的。
方法1: 在容器的末尾加入个清理浮动的div。 在网页中的任何地方，当遇到容器不扩展时，只需加入以下代码段，便能修复问题。
方法2: 伪元素后边添加: clear: both;
左定宽右自适应布局
考虑左边到底是定宽还是不定宽
https://juejin.im/post/5ab991dd5188255585078f7a#heading-4
https://juejin.im/post/5c88838fe51d4572a74287ee#heading-2
左边定宽,右边自适应
<div class="parent">
<div class="left">asd</div>
<div class="right">asd</div>
</div>
--------------------------------方法一 float left + margin距离法
.left{
width:100px;float:left;background:blue;
}
.right{
margin-left:100px;
background:red;
}
--------------------------------方法二 float+overflow （左float右overflow:hidden; 左float + 右BFC）
.left{
width:100px;float:left;background:blue;
}
.right{
background:red;
height:100px;
overflow:hidden;
}
--------------------------------方法三 table
.left{
width:100px;
background:blue;
display: table-cell;
}
.right{
background:red;
height:100px;/*这个属性无所谓*/
display: table-cell;
}
--------------------------------方法四:flex
.left{
background-color: red;
width: 100px;
margin-right: 20px;
}
.right{
background-color: green;
flex:1;
}
--------------------------------方法五：line-block +position absolute
.content{
position: relative;
}
.left{
background-color: red;
width: 100px;
display: inline-block;
}
.right{
background-color: green;
position: absolute;
left: 100px;
width: 100%;
top:0;
}
---------------------------------方法6 左右都是absolute
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
===
.parent{
position: relative;
}
.left{
position: absolute;
left: 0;
width: 100px;
}
.right{
position: absolute;
left: 120px; //比.left的left多出20px，相当于间隔
right: 0;
}
---------------------------------方法7 左float left 右float right 自适应最好的
.left{
float: left;
/* // 向左浮动 */
width: 100px;
/* //固定宽度 */
position: relative;
/* //由于.left与.right-fix重合，且.right-fix在DOM树上的位置比.left要后，因此.right-fix会遮挡住.left，设置.left为relative可以让其冒出来。 */
}
.right-fix{
float: right;
/* //向右浮动 */
width: 100%;
/* //为了自适应设为100% */
margin-left: -100px;
/* //由于宽度设为100%，.right-fix遭到浏览器换行处理；因此通过设置负的margin值，在左侧制造出100px的空白，使.right-fix与.left重合（即处于同一行） */
}
.right{
margin-left: 120px;
/* //由于.left和.right-fix重合了，因此给.right设置一个margin-left，避免内容区（.right）与.left重合。另外，120px - 100px = 多出来的20px实际上就相当于.left和.right之间的间隔了。 */
}
3列布局
首先看看双飞翼布局和圣杯布局的区别 https://blog.csdn.net/smlljet/article/details/93379411
其他的3列布局方式 https://segmentfault.com/a/1190000015231007#item-2
圣杯布局 float + position relative + margin100%;
双飞翼布局 float + margin0200
三列布局
要求：两边的宽度都是200px 中间自适应
方法一：两边绝对定位法，缺点：如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。我个人现在不在建议使用这种布局
方法二：margin负值法
这种方法是在实际的网站中应用的最多的，我个人感觉多少有些跟风的嫌疑。此方法很难用一句话概括。首先，中间的主体要使用双层标签。外层div宽度100%显示，并且浮动（本例左浮动，下面所述依次为基础），内层div为真正的主体内容，含有左右210像素的margin值。左栏与右栏都是采用margin负值定位的，左栏左浮动，margin-left为-100%，由于前面的div宽度100%与浏览器，所以这里的-100%margin值正好使左栏div定位到了页面的左侧；右侧栏也是左浮动，其margin-left也是负值，大小为其本身的宽度即200像素。
方法三：自身浮动法，左栏左浮动，右栏右浮动,一定要把main写到最后
方法四：flex布局
<div class="parent">
<div class="left"></div>
<div class="main">asdfasdfasdfasdf</div>
<div class="right"></div>
</div>
.parent{display:flex}
.left{
width:100px;
background:blue;
flex:0 0 100px;
height:50px;
}
.right{
background:red;
width:100px;
flex:0 0 100px;
height:50px;
}
.main{flext:1;}
多种水平居中和垂直居中的方法
flex
absolute + transform
grid
table-cell
margin auto
垂直，水平
1.center,middle,单行文本line-height.
2.margin
3.table-cell
4.position + transform (包含定宽的postion abosolute margin-)
5.flex
无定宽水平垂直居中
---方法1: table-cell+vertical-align: middle
父元素为：table，子元素为：cell-table，这样就可以使用vertical-align: center，实现水平居中,
优点：多行文档，垂直居中也是这么搞了。父元素（parent）可以动态的改变高度（table元素的特性）
缺点：IE8以下不支持
.parent {
width: 500px;height: 200px;background-color: black;
display: table-cell;
vertical-align: middle;
}
.parent .son {
width: 100px;height: 50px;background-color: firebrick;
margin: 0 auto;
}
// ps 若子元素是图像，不可使用table-cell，而是其父元素用行高替代高度，且字体大小设为0,子元素本身设置vertical-align:middle
.parent{ text-align: center; line-height: 100px; /*消除幽灵空白节点的bug*/ font-size: 0; }
.img{ vertical-align: middle; }
---方法2: 子元素绝对定位 距离顶部 50%，左边50%，然后使用css3 transform:translate(-50%; -50%)
优点：高大上,可以在webkit内核的浏览器中使用
缺点：不支持IE9以下不支持transform属性
.parent{
position: relative;
height:300px;
width: 300px;
background: #FD0C70;
}
.parent .child{
position: absolute;
top: 50%;
left: 50%;
color: #fff;
transform: translate(-50%, -50%);
}
---方法3 使用css3 flex布局
优点：简单 快捷
缺点：兼容不好吧，详情见：http://caniuse.com/#search=flex
#parent{
display: flex;
justify-content: center;
align-items: center;
}
---方法4: text-align + line-height实现单行文本水平垂直居中
.father0 {
width: 500px; height: 200px; background-color: black;
line-height: 200px;
text-align: center;
}
.son0 {
width: 100px; height: 50px; vertical-align: middle; background: forestgreen;
display: inline-block;
}
定宽水平居中
margin:0 auto
绝对定位 如果宽度是200px left:50%; margin-left:-100px;
定高垂直居中
如果是span之类的用
line-height:20px;或者vertical-align:middle;
如果div的块元素比较难了
还有一种定宽和顶高的水平和垂直居中的方法margin:auto
<div class="app1">
<div class="app2"></div>
</div>
.app1{
position:relative;
border:1px solid red;
width:300px;
height:300px;
}
.app2{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
width:200px;
height:200px;
margin: auto;
background:black;
}
css 垂直居中
(1) margin:auto法
<div> <img src="mm.jpg"> </div>
div{
width: 400px; height: 400px;
position: relative;
border: 1px solid #465468;
}
img{
position: absolute;
margin: auto;
top: 0; left: 0; right: 0; bottom: 0;
}
(2) 定高的margin负值法
.container{ width: 500px; height: 400px; border: 2px solid #379; position: relative; }
.inner{ width: 480px; height: 380px; background-color: #746; position: absolute; top: 50%; left: 50%; margin-top: -190px; /*height的一半*/ margin-left: -240px; /*width的一半*/ }
(3) table-cell（未脱离文档流的） 设置父元素的display:table-cell,并且vertical-align:middle，这样子元素可以实现垂直居中
div{ width: 300px; height: 300px; border: 3px solid #555; display: table-cell; vertical-align: middle; text-align: center; }
img{ vertical-align: middle; }
(4) 利用flex
将父元素设置为display:flex，并且设置align-items:center;justify-content:center;
.container{
width: 300px; height: 200px; border: 3px solid #546461;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.inner{ border: 3px solid #458761; padding: 20px; }
css 的水平居中
=============
1、行内元素水(display: inline)平居中（文本、图片等）是通过给父元素设置 text-align：center；来实现的。如果子元素设置子元素设置inline-block也符合这条。
=============
2 定宽块状元素(dispaly: block)水平居中（块状元素的width是一个固定值），满足块状和定宽两个条件时，即可通过给自己设置“左右margin为auto”来实现。
> <div style="width: 200px; text-align: center; margin: 0 auto;">定宽块状元素水平居中</div>
=============
3 不定宽块状元素水平居中
> 方法一: text-align: center
<div style="text-align: center;">
<div style="display: inline;">不定宽块状元素水平居中</div>
</div>
> 方法二: 利用绝对定位，让元素向右偏移50%，然后再向左偏移自身的50%
<div style="position: absolute; left: 50%; transform: translateX(-50%);">不定宽块状元素水平居中</div>
> 方法三利用flex 父级设置display：flex，+子justify-content：center；
> flex+flex-direction:column;+子align-self:center;
<div style="display:flex;flex-direction:column;">
<div style="align-self:center;">asdfaf</div>
</div>
===== 不常用的方法
> 利用flex实现水平居中 flex + margin: 20px auto;
<div style="display: flex;">
<div style="margin: 20px auto;">不定宽块状元素水平居中</div>
</div>
> 利用flex实现水平居中 CSS3的fit-content配合左右margin为auto实现水平居中方法
<div style="width: fit-content; margin-left: auto; margin-right: auto;">不定宽块状元素水平居中</div>
几种常见的CSS布局 https://juejin.im/post/5bbcd7ff5188255c80668028#heading-4
css清除浮动的方式的几种方式
https://www.cnblogs.com/wush-1215/p/10623243.html
响应式布局
幽灵空白节点
inline-block元素之间，inline-block和img之间。
图片的幽灵空白节点
原因: 因为 img 标签的基线就是图片的底部，那么一行文字包括当前行内的图片都是基于基线对齐的.。浏览器渲染的空白节点,占据了下边的高度，想办法把空白节点的高度去掉就可以了。
可以line-height,font-size,vertical-algin(图片的)
解决img标签的间隙： 幽灵空白节点
消除幽灵空白节点
1、只有元素是行内元素或行内块元素，vertical-align这个属性才生效。所以我们想让vertical-align失效，那么就让img变成块级元素—设置display属性值为block
2、设置vertical-align的值不使用baseline，使用其他的比如 bottom top middle等等都可以
3、这个缝隙是文字的大小改变的，所有我们可以对文字设置font-size为0 前提是这个行框不能出现文字
4、我们改变文字的高度也是可以解决间隙的问题，将高度设置为0即可，但是文字的高度也可以由line-height决定,所以设置line-height为0也可以解决
5、手动在html中删除
postion属性
relative
absolute
fixed
sticky
static
inherit
unset
inherit
initial
其中:
relative对于当前文档流
absolute对于最近的绝对定位(可以是relative, 也可以是absolute)
fixed相对window，当元素祖先的 transform 属性非 none 时，定位容器由视口改为该祖先。
static：默认值，没有定位，元素出现在正常的文档流中
inherit: 规定应该从父元素继承 position 属性的值。
sticky 使用条件：
父元素不能overflow:hidden或者overflow:auto属性。
必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
父元素的高度不能低于sticky元素的高度
sticky元素仅在其父元素内生效
FAQ:
这样子的代码在正常的页面没问题，但是在react中就行了，react的modal框还是有点特别的。、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
adadsaaadasasdfasdfaadadsaaadasassasdfasdfaadadsaaadasassasdfasdfaadadsaaadasassasdfasdfaadadsaaadasasdfaaadasassasdfasdfaadadsaaadasassasdfasdfaadadsaaadasassasdfasdfaadadsaaadasasdfasdfaadadaaadasassasdfasdfaadadsaaadasassasdfasdfaadadsaaadasassasdfasdfaadadsaaadasasdfasdfaadadaaadasassasdfasdfaadadsaaadasassasdfasdfaadadsaaadasassasdfasdfaadadsaaadasasdfasdfaadadasdfaadadsaaadasasdfasdfaadadsaaadasasdfasdfaadadsaaadasasdfasdfaadadsaaadasasdfasdfaadadsaaadasasdfasdfaadadsaaadasasdfasdfaadadsaaadasasdfasdfaadadsaaadasasdfasdfaadadsaaadasasdfasdfaadadsaaadasasdfasdfa
</div>
<div class="test1">
<div class="test2">
<div class="test3">test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3</div>
<div class="test4">
test4test4test4test4test4test4test4test4test4test4test4test4test4test4test4test4
</div>
</div>
</div>
<style>
.test1 {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 10;
}
.test2 {}
.test3 {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 11;
background: rgba(0, 0, 0, 0.5);
}
.test4 {
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: 11;
width: 200px;
background: white;
}
</style>
</body>
</html>
什么叫盒子模型
在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。
标准模型和诡异模型的区别和联系
box-sizing的值：content-box|border-box|inherit
标准模式：box-sizing:content-box;
怪异模式：box-sizing:border-box;
在标准模式下的盒模型如下图所示，盒子总宽度/高度=width/height+padding+border+margin
盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;
优雅降级与渐进增强
渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
区别： a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给 b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要 c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带
伪类和伪元素的区别和联系
CSS中的伪元素大家以前看过：:first-line,:first-letter,:before,:after;那么在CSS3中，他对伪元素进行了一定的调整，在以前的基础上增加了一个“：”也就是现在变成了“::first-letter,::first-line,::before,::after”另外他还增加了一个“::selection”,两个“：：”和一个“：”css3中主要用来区分伪类和伪元素，到目前来说，这两种方式都是被接受的，也就是说不管使用哪种写法所起的作用都是一样的，只是一个书写格式不同而以。
简述同步和异步的区别
同步是阻塞模式，异步是非阻塞模式。 同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去； 异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
行内元素：a、b、span、img、input、strong、select、label、em、button、textarea 块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote 空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img
简述一下src与href的区别
href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
.什么是CSS Hack?
一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。
几种解决兼容的方法。-webkit -ms -o -moz
IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack（详细参考CSS文档：css文档）
px和em的区别
px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。 浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em
浏览器的内核分别是什么
IE: trident内核 Firefox：gecko内核 Safari：webkit内核 Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核 Chrome：Blink(基于webkit，Google与Opera Software共同开发)
meta兼容模式
<meta http-equiv=“X-UA-Compatible” content="i.e.=edge,chrome=1”> 兼容模式,会优先以edge内核来渲染,如果没有则会以chrome
css sticker
- 父不能设置overflow: hidden;
- 子元素设置top属性。
.parent {
position: relative;
height: 300px;
border: 1px solid red;
overflow: auto;
}
.children {
position: sticky;
border: 1px solid blue;
top: 10px;
}
图片和右侧的文字对不齐哈
<div>
<img src="tishi.png" alt="">
<span>对其的文字</span>
</div>
改变图片的宽度为14px,14px，或者16px,16px你在尝试着对其实施看。
BFC概念 BFC（Block Formatting Context）块级格式化上下文，是一个独立的渲染区域，并且有一定的布局规则。
只要元素满足下面任一条件即可触发 BFC 特性
* body 根元素
* 浮动元素：float 除 none 以外的值
* 绝对定位元素：position (absolute、fixed)
* display 为 inline-block、table-cells、flex,但是block就不会出发bfc
* overflow 除了 visible 以外的值 (hidden、auto、scroll)
BFC的特性及应用
可以清除浮动
同一个BFC下外边距会发生重叠
BFC 可以包含浮动的元素（清除浮动）比如浮动元素的父元素设置overflow:hidden，可以避免高度为0.
BFC 可以阻止元素被浮动元素覆盖 左右布局，浮动元素的右侧元素设置overflow:hidden，避免重合。
上下的，父是一个bfc,但是子两个block没有出发新的bfc，会合并结果20，
左右的父同一个bfc，子自己触发了两个bfc，不会合并结果30。
<body>
<div class="overflow-hidden">
<div class="block red" style="margin-bottom: 10px;">
上
<span class="inline-block red" style="margin-right: 10px;">children1</span>
<span class="inline-block blue" style="margin-left: 20px;">children2</span>
</div>
<div class="block blue" style="margin-top: 20px;">下</div>
</div>
<div class="overflow-hidden">
<!-- 这里的child1和child2的margintop就会合并，如果设置border就不会合并 -->
<div class="child1" style="margin-top: 20px;background-color: red;">
<div class="child2" style="margin-top: 30px;background-color: green;">测试</div>
</div>
</div>
<div class="overflow-hidden">
<!-- 这里的child1和child2的形成了独立的bfc就不会合并-->
<div class="child1 overflow-hidden" style="margin-top: 20px;background-color: red;">
<div class="child2 overflow-hidden" style="margin-top: 30px;background-color: green;">测试</div>
</div>
</div>
<style>
.overflow-hidden {
overflow: hidden;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.red {
border: 1px solid red;
}
.blue {
border: 1px solid blue;
}
</style>
</body>
[CSS] 同一个BFC下的垂直相邻外边距的重叠问题及其解决方案
<body>
<style>
* {
margin: 0;
padding: 0;
}
.parent {
border: 1px solid red;
// 因为有了这句所以有了高度
overflow: hidden;
}
.children {
border: 1px solid blue;
float: left;
height: 100px;
width: 100px;
}
</style>
<div class="parent">
<div class="children"></div>
</div>
</body>
<body>
<style>
* {
margin: 0;
padding: 0;
}
.parent {
border: 1px solid red;
}
.left {
border: 1px solid blue;
width: 100px;
height: 100px;
float: left;
}
.right {
border: 1px solid green;
width: 100px;
height: 100px;
// 因为有了这句所以没有和左边重合
overflow: hidden;
}
</style>
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
transition和animation的区别
#### CSS 图片宽度100%时如何设置图片宽度和高度相等
<div class="l-img-div">
<img src="https://www.baidu.com/img/bd_logo1.png" >
</div>
<style>
.l-img-div{width:100%;height:0;position: relative;padding-bottom: 100%}
.l-img-div img{width:100%;height:100%;position: absolute;}
</style>
上面可以做到 让图片 和div同宽 同高
如果仅仅想要外层div同宽高，而图片保持原图代销不被撑大， 可以将图片属性换成下面这个
{
max-width:100%;
max-height:100%;
margin: auto;
top: 0；
left: 0;
right: 0;
bottom: 0;
}
doctype是什么
DOCTYPE 标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。
文档模式: 混杂模式，标准模式。
标准模式又分为，标准模式，准标准模式，超级标准模式。看下图。
近标准模式和标准模式之间的唯一区别在于是否对<img>元素给定行高(line-height)和基线(baseline)。
近标准模式中，如果<img>标签所在行没有其他的行内元素，将不指定基线对齐(baseline)，<img>标签因此会紧贴着父元素底部。
在标准模式中，<img>标签会指定基线对齐baseline。即使行框内并没有任何内容。
html5
<header>代表头部
<nav>代表超链接区域
<main>定义文档主要内容
<article>可以表示文章、博客等内容
<aside>通常表示侧边栏或嵌入内容
<footer>代表尾部
常见的几种css兼容性问题
自己遇到的；
1. 不同的浏览器动画快慢不同transition，用will-change才解决。
问题一.不同浏览器的标签默认的外补丁和内补丁不同
现象：不同浏览器标签的margin/padding差异较大
解决方案：*{margin:0;padding:0}
问题二. 块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
现象：在横向布局中，使用div float布局时，同时横向间距设置用margin实现时，在IE6中后面的一块会被顶到下一行
解决方案：在float的CSS标签样式控制中添加display:inline，将其转换为行内属性
问题三. 设置较小高度标签（一般小于10px)，在IE6/7，遨游浏览器中高度超出自己设置的高度。
原因：IE8以前的浏览器会给标签一个最小默认行高，即使为空
解决方案：给超出高度的标签设置overflow:hidden；或者设置行高line-height小于设置的高度
问题四. 图片默认有间距
现象：几个img标签放在一起时，有些浏览器会有默认间距，即使使用问题一的通配符也不行
解决方案：为img使用float属性布局
问题五. 给标签设置最低高度min-height不兼容问题
原因：min-height本身即兼容性较差。 有时需求当容器高度小于300px时，为300px，大于时则被撑高，而不是出现功滚动条。此时会出现该问题
解决方案：采用 {min-height: 200px; height: auto !important; height:200px; overflow:visable;}
问题六. 透明度的兼容CSS设置
解决方案：设置透明度时，写2个。
opacity:0;
filter:alpha(opacity:0)
----超链接访问后，hover样式不显示：
问题描述：同时设置a:visited和a:hover样式后，超链接访问后，hover的样式不显示，
问题原因：标签中的样式顺序出现了错误。
解决方案：将他们的样式排序为 a:link , a:visited , a:hover , a:active .
----ul在浏览器中不同表现，具有默认边距在不同浏览器中显示的位置不同
问题描述：在IE中，ul的默认边距是margin，在Firefox中，ul的默认边距是padding。
解决方案：设置其属性 padding：0px ; Margin : 0px;
-----按钮默认大小不一
问题描述：不同浏览器的默认按钮大小可能不同。
解决方案：用a标签来模拟按钮，添加样式；如果按钮是一张背景图片，那么直接给按钮添加背景图；
----容器不扩展问题
问题描述：div嵌套结构中，外层的高度并没有随着子容器的高度自动扩展，却是形成了一条线。
问题原因：因为当子容器成为浮动元素后，并脱离了文档流，父容器认为自己内容为空而导致的。
解决问题：在容器的末尾加入个清理浮动的div。 在网页中的任何地方，当遇到容器不扩展时，只需加入以下代码段，便能修复问题。
css3系列之transform 详解skew
什么是BFC？看这一篇就够了
CSS object-fit 属性
object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。
您可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式
user-select介绍
point-events
css模块化
vue scoped modules
React中使用CSS Modules 文件名字用.module.scss打包工具就会自动帮助我们打包
bem命名规范
BEM的意思就是块（block）、元素（element）、修饰符（modifier），是由Yandex团队提出的一种CSS命名方法。
search-form__button_active
css动画回调
css transition回调
需求
需要在一个css css transition执行完毕之后执行一个回调的方法。
解决
可以用window.addEventListener(‘transitionend’);监听到transition执行完毕。
存在的问题
当前页面中所有的transition执行完毕后都会触发该监听，使用的时候需要在回调中甄别是否是指定的transition，可以根据触发监听的dom元素来实现。
代码
window.addEventListener('transitionend', this.callbackTransitionend);
......
callbackTransitionend(e) {
if (e.srcElement.className === 'progress') ......;//用类名判断是否是自己需要的transition
},
“margin设置百分比是基于父容器的宽度,所以无论是margin-top还是margin-bottom都是基于父容器的宽度。”
想让高度永远是宽度的0.75
(1) div包含一张图片，图片自己按自己的比例撑大，缩小,div自动的也会撑大缩小。
(2) 高度按calc(100vm * 0.75)
(3) absolute + padding-top0.75计算。
background-size: cover
flex布局居中
<div class="parent">
<div class="son1">
<div>123123</div>
<div>123123</div>
</div>
<div class="son2"></div>
</div>
<style>
.parent {
display: flex;
}
.son2 {
height: 500px;
flex: 0 0 200px;
border: 1px solid red;
}
.son1 {
flex: 1;
border: 1px solid blue;
}
</style>
此时如果想让左边的垂直居中，右边的内容不垂直居中。
方法1：son1 设置display: flex 好像也没问题
css支持
h1{
height: 400px;
text-align: center;
background: url(https://files.authing.co/authing-website/home-0830-s-3-1-t.png) center no-repeat,linear-gradient(to bottom,red,#3c3f40);
line-height: 400px;
background-size: 100% 100%;
}
图片比较小时候
图片比较大的时候
background-image可以设置渐变,background-color不能设置渐变。
padding和border都不能设置为auto,也绝不能为负数
清除浮动的方法
- 父元素添加overfiow属性
- 父元素增加高度
- after,before添加clear:both。
- 后边添加一个元素添加clear:both。
antd
官网说的是 antd 的样式使用了 Less 作为开发语言，并定义了一系列全局/组件的样式变量
动画监听
<body>
<style type="text/css">
h1 {
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 100%;
}
to {
margin-left: 0%;
width: 100%;
}
}
</style>
<h1 id="ani">Test CSS3 SlideIn</h1>
<script>
ani.addEventListener('animationstart', function() {
console.log('animate start')
}, false);
ani.addEventListener('animationend', function() {
console.log('animate end')
}, false);
</script>
</body>
---------------------------------------------------
<body>
<style type="text/css">
*{margin:0;padding: 0;}
.demo{
margin:100px;
width:100px;
height: 100px;
background-color: #ddc;
transition: all 0.5s ease-out;
}
.demo:hover{
width: 200px;
}
</style>
<div id="demo" class="demo">
鼠标移入
</div>
<script type="text/javascript">
var element = document.getElementById('demo')
element.addEventListener('transitionend', handle, false)
function handle(){
alert('transitionend事件触发')
}
</script>
</body>
css实现宽高同高
<div class="parent"></div>
.parent {
width: 100px;
background: brown;
}
.parent:before{
content: '';
display: inline-block;
padding-top: 100%;
}
// ============ 下边这个就是不行，不知道为啥
.parent {
width: 100px;
background: brown;
padding-top: 100%;
}
rem缺点
- 在奇葩的dpr设备上表现效果不太好,比如一些华为的高端机型用rem布局会出现错乱。
- 使用iframe引用也会出现问题。
- rem适配和当前设计理念出现了设计哲学不一样，到底是看的更多的问题还是更清楚的问题。
- rem在多屏幕尺寸适配上与当前两大平台的设计不一致，即大屏的出现到底是为了看得又大有清楚还是更多的问题。
margin-left: auto; 对 flex影响
<body>
<style>
.parent {
display: flex;
align-items: center;
justify-content: left;
width: 500px;
margin-bottom: 10px;
border: 1px solid red;
}
.son {
border: 1px solid blue;
font-feature-settings: 'tnum';
display: inline-flex;
align-items: baseline;
line-height: unset;
cursor: pointer;
margin: 0;
padding: 0;
}
.son3 {
/* margin-left: auto; */
}
</style>
<div class="parent">
<div class="son son1">aaaaaa</div>
<div class="son son2">bbbbb</div>
<div class="son son3">cccccc</div>
</div>
</body>
获取一个元素的宽高3种方式
JavaScript DOM:元素偏移量 offset 系列、元素可视区 client 系列、元素滚动 scroll 系列
621
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
