前端面试CSS篇一、三种基本介绍方法外部样式表内部样式表/head>Inline这是一个段落。
2.CSS介绍中的link和@import的区别在于link是一个XHTML标签。除了加载CSS，它还可以定义RSS等其他东西；@import属于CSS的范畴，只能加载CSS。link是一个XHTML标签，没有兼容性问题；@import是CSS2.1提出的，低版本浏览器不支持。当link引用CSS时，在页面加载时同时加载；@import需要在页面完全加载后加载。link支持使用Javascript控制DOM改变样式；@import没有。3.CSS选择器优先级为!important>inline>id>pseudoclass=classclass>attribute>tag>wildcard3.1基础选择器类选择器.classNameID选择器#idName元素选择器elementName通配符选择*（效率最低，不推荐）attributeselectorelement[attr=value]3.2weight计算内联样式表weightupto1000;ID选择器权重为100Class类选择器权重为10HTML标签选择器权重为13.3。计算规则选择器有一个权重，权重越大，优先级越高；当权重相等时，后出现的样式表设置优于先出现的样式表设置；thecreator'srulesarehigherthanBrowser：网页编写者设置的CSS样式优先于浏览器设置的样式；继承的CSS样式不如后面指定的CSS样式；!important标记的规则在同一组属性设置中优先级最高；示例如下：3.4组合选择器后代选择器（空格字符）选择所有后代AB子元素选择器（大于号）选择某一类A>B相邻兄弟选择器（加号）A+B普通兄弟选择器（波浪号）A~B4、伪元素和伪类4.1伪类CSS伪类匹配用户激活的元素，伪类的序列-classes被称为LVHAsequence::link:visited:hover:active4.2伪元素元素被添加到选择器中，但它们不是描述一个特殊的状态，而是允许你对元素的某些部分进行样式设置（CSS3使用双冒号）:::after::before::first-letter::first-line::selection5,boxformulamodelmargin/border/padding/contentmargin:a,b,c,dtop/right/bottom/leftmargin:a,b,ctop/left/right/bottommargin:a,btop/bottom/left/rightmargin:aup/down/left6.几种定位方式：absolute/relative/fixed/static/stickyabsolute绝对定位元素的位置是相对于最近定位的父元素（即非静态定位）。如果该元素没有定位的父元素，那么它的位置是相对于的。绝对定位使元素的位置独立于文档流，因此不占用空间。relative相对定位是相对于它的正常位置。相对于其在正常流中的位置定位。相对定位的可移动元素和相互重叠的元素的内容不会改变它们原来占用的空间。通常用于绝对定位的容器块。固定元素的位置相对于浏览器窗口是固定的。固定定位使元素的位置独立于文档流，因此不占用空间。staticHTML元素的默认值，即没有定位，元素以正常流出现。静态定位的元素不受顶部、底部、左侧、右侧的影响。stickyposition属性最有趣的地方是sticky。对于有sticky设置的元素，当元素在屏幕范围（viewport）内时，其位置不受定位影响（top、left等设置无效）。当元素的位置即将移出范围偏移时，定位又会变固定，根据设置的left，top等属性达到固定位置的效果。可以知道，sticky属性有如下特点：元素没有脱离文档流，仍然保留着元素在文档流中的原始位置。当元素在容器中滚动超出指定的偏移量时，元素将固定在容器中的指定位置。也就是说，如果设置了top:50px，那么当sticky元素到达相对定位元素顶部50px的位置时，就会固定不动，不会向上移动。元素的固定相对偏移量是相对于其最近的带有滚动框的祖先元素。如果没有一个祖先元素可以滚动，则计算元素相对于视口的偏移量。7.清除文档流中的浮动浮动元素，不占用空间。浮动元素在碰到其包含边框或浮动元素的边框时停止。Extra标签添加
使用overflow为包含浮动元素的父标签添加css属性overflow:auto;缩放：1；zoom:1与IE6兼容。使用after伪对象#parent:after{/*注意内容必须有内容*/content:".";高度：0；可见性：隐藏；显示：块；清除：两者；}8、显示：无；与可见性：隐藏的区别；是隐藏元素，但前者在文档排版中不占空间，后者依然占空间。display:none隐藏并生成回流和重绘（reflowandrepainting）。前者是相关的，即父元素设置display:none后子元素怎么设置都不能显示，后者子元素设置visibility:visible后仍然可以显示。还是占篇幅，absolute可以覆盖10、box-sizing属性作用：主要用来控制元素的box模型的解析方式。默认值为内容框。content-box元素的宽度/高度由border+padding+content的宽度/高度决定。设置width/height属性是指content部分的width/height。border-box允许元素保持IE传统的框模型（IE6及更高版本和IE6~7的quirks模式）。设置width/height属性是指border+padding+contentinherit继承父元素的box-sizing属性11.左右布局：左边定宽，右边自适应，不少于3种方法//方法一（使用CSS3flex布局）.container{width:100%;display:flex;flex-flow:rownowrap;}.left{width:200px;height:200px;background:green;}.right{flex:1;height:200px;background:red;}//方法二（使用CSS3calc()，注意clac表达式中减号前后有空格）.left{float:left;width:200px;height:200px;background:green;}.right{float:left;width:calc(100%-200px);height:200px;background:red;}//方法三（不设置宽度，默认全）。left{float:left;width:200px;height:200px;background:green;}.right{margin-left:200px;height:200px;background:red;}//方法四（绝对定位，注意右边part).left{位置：绝对；宽度：200px；高度：200px；背景：绿色；}.right{位置：绝对；左：200px；右：0px；高度：200px；background:red;}//方法五（百分比宽度，这个方法不太好用，百分比不好确定）.left{float:le英尺；宽度：200px；高度：200px；背景：绿色；}.right{浮动：左；宽度：85%；高度：200px；div水平垂直居中的实现方法/*方法一：使用flex布局*//*添加边框和宽高方便浏览器测试*/.parent{border:1pxsolidblack;显示：弹性；证明内容：居中；align-items:center;}.child{border:1pxsolidblack;宽度：400px；height:400px;}/*方式二：绝对定位，left和right都是50%，margin-left和top是各自取值一半的负数*/.parent{position:relative;}.child{border:1px纯黑色；宽度：400px；高度：200px；位置：绝对；左：50%；顶部：50%；左边距：-200px；:-100px;}/*方法三：绝对定位，但是使用transform*/.parent{position:relative;}.child{position:absolute;顶部：50%；左：50%；转换：翻译（-50%，-50%）；}
