一前言关键词：前端必知，css基础，前端面试适用人群：对CSS有简单了解的新手，前端准备面试，或者把CSS当作日常前端人员参考手册优点：（1）视觉效果的命令集中在一个方便的位置（2）创建可应用于多个页面的样式表（3）有助于尽可能减少文档的大小尽可能地，大大减少文档下载的时间两种文本替换元素和非替换元素替换元素：指用于替换文档内容中没有直接表示的元素内容的部分。与img元素一样，它由文档本身之外的图像文件替换。示例：imginput非替换元素：一种非替换元素，其内容由用户代理（通常是浏览器）显示在元素本身生成的框中。示例：内联元素，如divpaul和块级元素内联元素概念：内联元素在文本行内生成元素框，不会打断文本行。特点：【待补充】例如：一个span块级元素概念：会生成一个元素框，（默认情况下）会填充父元素的内容区域（宽度：100%），并且有旁边不能有其他元素。特点：【待补充】例如：divpulliconvertdisplay:block|内联|行内块|flex...@import概念：css文件用于web浏览器加载外部样式表，在规则发挥作用之前必须将其放置在other中。带来的问题：【】selectorMSDNCSSselector选择器优先！important(Infinit)>inline-style(1000)>id(100)>类|属性|伪类(10)>标签选择器|伪元素(1)>通配符(0)>继承（无特异性）特权值同样，后出现的优先级高。注意：不是数字大小的比较，而是ID选择器或地雷选择器从左到右一个一个比较？(1)可以为任意数量的元素指定同一个类，但是ID选择器只会被使用一次(2)ID选择器不能组合使用，不允许使用空格分隔的单词列表(3)如果你想可以肯定的是，你应该发送一个Whichstylesareappliedtoagivenelement，ID可以包含更多的含义（唯一，可以用于位置标识）伪类元素使用顺序考虑样式级联（当权限值为同样，后面的样式会覆盖前面的样式：L(link)V(visited)H(hove)A(active)::beforeand::after[待补充]样式继承可以继承：文本字体颜色,size,fonttype等不能继承：boxmodel相关，比如marginpaddingwidthbackgroundboxmodel分为：standardboxmodel和IEboxmodelsetting:box-sizing:content-box;标准盒子模型box-sizing:border-box;//IE盒模型标准盒模型元素盒的总宽度：width+padding-left+padding-right+border-left+border-right+margin-left+margin-right；元素框的总高度：height+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom；IE盒模型元素盒的总宽度：padding-left+padding-right+border-left+border-right；元素框的总高度：padding-top+padding-bottom+border-top+border-bottom;水平居中内联元素水平居中display:inline-block;//Changetoblock-levelelementstext-align:center;//设置text-align块级元素水平居中方法一【固定宽度】：marginmargin:0auto方法二：使用定位固定宽度//set父元素的相对定位position:relative;//设置当前元素position:absolute;left:50%;//left会计算margin-left:--元素宽度相对于父元素宽度的一半元素px;//或者transform:translate(50%);翻译可变宽度会相对于元素自身的宽度来计算//设置父元素的相对定位position:relative;//设置当前元素position:absolute;left:50%;transform:translateX(-50%);方法三【不定宽度】：方案三：转换成行内块级/行内元素//设置text-align:centerontheparentelement;//setdisplay:inline-blockonthecurrentelement;//或显示：内联；方法四：使用flexbox布局实现水平居中【宽度可以固定也可以不固定】display:flex;证明内容：居中；垂直居中单行内联元素垂直居中只需要设置单行内联元素的“行高等于框的高度”//行高32px，文字垂直居中line-height:32px;或者设置verticle-align:middle使多行的内联元素垂直居中display:table-cell;vertical-align:middle;//verticle-align只适用于行内元素块级元素与table元素的垂直居中方案一：使用定位实现固定高度//父元素设置position:relative//子元素设置position:absolute;顶部：50%；margin-top:-元素高度的一半像素；//ortranslateY(-50%)indeterminateheight://父元素设置position:relative//子元素设置position:absolute;top:50%;translateY(-50%)方法二：使用flexbox布局实现(heightfixed可能不可以)//给父元素添加属性display:flex;对齐项目：居中；水平垂直居中已知高宽的元素方法一：//设置父元素为相对定位display:relative;//给当前元素Setdisplay:absolute;top:0;右：0；底部：0；左：0；保证金：自动；方法二：//设置父元素为相对定位display:relative;//给子元素设置绝对定位display:absolute;左：50%；顶部：50%；margin-left:--元素宽度的一半像素；margin-top:--元素高度的一半；高宽未知的元素方法一：使用定位属性//设置父元素为相对定位display:relative;//设置子元素绝对定位display:absolute;left:50%;顶部：50%；转换：translateX(-50%)translateY(-50%)；方案二：使用flex布局实现//设置父元素display:flex;//当前元素justify-content:center;对齐项目：居中；clearfloating对当前元素应用clear:both;在浮动元素后添加新元素，applyclear:both;Parentdiv定义overflow:autoClearfloating最佳实践：.clearfix:after{visibility:hidden;显示：块；字体大小：0；内容：””;明确：两者；高度：0；}value&Unit&Fontweb-safecolor:256colors电脑上总能避免抖动的颜色。%,80%)。em：定义为给定（当前元素）字体的字体大小值。rem：rem与根元素关联，不依赖于当前元素。无论你在文档中的什么地方使用这个单位，1.2rem的计算值都等于根元素字体大小的1.2倍。px：像素实际上是一个相对的度量单位（不同的设备会将像素缩放到更合理的度量），尽管像素在网页设计中的表现很像绝对单位。学会区分在哪些场景下使用哪些工具。我的选择是使用rem表示字体大小，使用px表示边框，使用em表示其他测量方法，例如padding、margin和border-radius。但是，在必要时，我更喜欢在声明容器的宽度时使用百分比。响应式demo//root相当于htmlselector:root{font-size:0.75em;}@media(最小宽度:800px){:root{字体大小:0.875em;}}@media(最小宽度:1200px){:root{字体大小:1em;}}normalboldbolder400700相对于父元素，字体粗细有点大，最多900font-size：根据父元素的字体大小计算百分比。//font-size可以继承，继承的值不是百分比，会导致字号错误。12px*120%=14.4px=>14px14px*135%=18.9px=>19pxline-heightvsverticle-alignline-height是指文本行的基线之间的距离。指定行高可用于增加或减少文本行之间的垂直间距。Application:AllelementsInheritance:Thereislinespacing(top/bottom)=(line-heightvalue-font-sizevalue)/2//对于块级元素可能是负值，指定元素的最小高度线框。对于非替换元素，用于计算行框高度。verticle-alignapplication:inlineelementreplacementelementtableelementinheritance:no百分比:相对于line-height的值对行高的影响.意识到垂直对齐的文本不会成为另一行的一部分，也不会覆盖其他行上的文本，这会影响行高（它需要足够高以包含最高内联框的顶部和最低内联框的底部盒子）。三篇后记css相关其他参考css进阶指南
