摘要：一和都可以为页面引入，区别方式方式祖先的差别，属于标签，而完全是提供的一种方式。继承父元素属性的值十有哪些性特征。给超出高度的标签设置或者设置行高小于你设置的高度
一. link和import都可以为页面引入css，区别？
link方式：
@import 方式
① 祖先的差别，link属于XHTML标签，而@import完全是css提供的一种方式。link标签除了可以加载css外，还可以做很多其他的事情，比如定义RCC，定义rel连接属性等；@import就只能加载css了。
② 加载顺序的区别。当一个页面被加载的时候，link引用的css会同时被加载，而@import引用的css会等到页面全部被下载完再被加载。所以有时候浏览@import加载css的页面时开始会没有样式（就是闪烁），网速慢时更为明显
③ 兼容性的差别，@import是css2.1提出的所有老浏览器不支持。@import只有在IE5以上的才能识别，而link标签无此问题
④ 使用DOM控制样式时的差别，当使用JavaScript控制DOM改变样式时，只能使用link标签，@import不是DOM可以控制的
二. css盒子模型，与低版本IE的盒子模型区别
标准盒子模型（IE6以上版本和firefox，chrome等）：宽度 = 内容宽度（content）+border+padding+margin
低版本IE盒子模型(IE6和以下的版本)：宽度 = 内容宽度（content+border+padding）+margin
三. box-sizing属性（content-box默认值与W3C标准盒子模型一致，元素外盒宽高=content+padding+border+margin，css中设置的width只是包含content的宽;border-box与IE低版本的盒子模型一致，外盒宽高 =content（content+padding+border）+margin），css中设置的width包含content+padding+border宽度；inherit默认继承父类盒子模型。
四.css选择器有哪些？哪些属性可以继承
css选择器：id选择器（#id），类选择器（.class），标签选择器(div p h1-h6 em strong等)，相邻选择器(h1+p)，子选择器(ul>li),后台选择器(li a),通配符选择器(*),属性选择器(a[name=’content’]),伪类选择器(a:hover,li:nth-child)
可继承的属性：font-size,font-weightfont-family等以font开头的属性,color
不可继承的属性：borderpadding margin width height 等
优先级（就近原则）:!important>[id>class>tag]
!important比内联优先级高
五. css优先级算法如何计算
！important最高
内联样式：1000
Id选择器：100
类选择器 伪类选择器 属性选择器：10
标签选择符：1
通用选择器，子选择器，相邻同胞选择器：0
六. css3新增伪类有哪些
p:first-of-type 对应p:first-child 父元素的第一个元素
p:last-of-type 对应p:last-child 父元素的最后一个元素
p:only-of-type 对应p:only-child 父元素的唯一的子元素
p:nth-of-type(2) 对应p:nth-child(2) 父元素的第二个子元素
p:nth-last-of-type 对应p:nth-last-child(2) 父元素第二个子元素，从最后一个元素开始计数
:enabled :disabled 表单控件的禁用状态
：checked单选框或复选框被选中
:not :not(p)选择非p元素的每个元素
:root 选择文档的根元素
:empty p:empty 选择没有子元素的每个p元素
:target #news:target 选择当前活动的#news元素
[attr^=value] a[name^=’abc’]匹配属性name的值以abc开头的所有a元素
[attr$=value] a[name^=’abc’]匹配属性name的值以abc结束的所有a元素
[attr*=value] a[name^=’abc’]匹配属性name的值包含abc的所有a元素
::selection 被用户选取元素部分
11
22
33
44
55
66
aa
bb
cc
dd
ee
七. div如何垂直水平居中
八. display有哪些值？说明作用
① display:none;
② display:block;(块级元素，多带带占一行，块级元素都是从上向下排列，设置width，height，padding，margin均有效)
③ display:inline;(内联元素从左向右排列，设置width，height无效，宽高根据自身的文字高度和长度。padding和margin设置上下值无效，左右值有效，padding-top和padding-bottom不会影响它的高度，但是会影响他的背景高度。)
hhh
④ display:inline-block(结合了block和inline两个元素特征，不多带带占一行，并且设置宽高都有效，padding，margin不管上下还是左右都有效)
④和⑤，inline和inline-block元素之间的空白（解决方案:1.设置父元素的font-size:0，子元素自行设置元素字体大小，如果要有兼容性问题结合letter-spacing或word-spacing去除间隙；2：编写inline元素和inline-block元素时，直接写在一行）
⑥display:table;display:table-cell将元素类似表格元素垂直水平居中显示
⑦display:flex 详见http://www.ruanyifeng.com/blo...^%$
九：position的值
static（默认）：按照正常文档流进行排列，忽略top,bottom,left,right或者z-index
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。
inherit继承父元素position属性的值
十：css3有哪些性特征。参考https://segmentfault.com/a/11...
十一：用纯css创建一个三角形的原理？
首先需要把元素的宽高设置为0，然后设置边框样式。border分为border-top,border-right,border-bottom,border-left。详细参考http://www.cnblogs.com/jack-c...
.content{
border-top: 50px solid #f00;
border-right: 50px solid #0f0;
border-bottom: 50px solid #00f;
border-left: 50px solid rgb(85, 201, 255);
height: 0;
width: 0;
}
.right{
width: 0;
height: 0;
border-left: 50px solid #f00;
border-top:50px solid transparent;
border-bottom: 50px solid transparent;
}
.left{
width: 0;
height: 0;
border-right: 50px solid #0f0;
border-top:50px solid transparent;
border-bottom: 50px solid transparent;
}
.top{
width: 0;
height: 0;
border-bottom: 50px solid #f96;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.bottom{
width: 0;
height: 0;
border-top:50px solid #00f;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
十二：常见兼容性问题
1.去掉浏览器间隙问题
*{
margin:0;
padding:0;
box-sizing:border-box;
}
2.图片间的空隙，只要是display:inline;display:inline-block;元素分行写都会有间隙，设置父元素font-size:0 如果还有间隙，可设置 letter-spacing: 和;word-spacing: 的值为负数
.content{
width: 800px;
height: 800px;
font-size: 0;
}
.img{
width: 100px;
height: 100px;
}
3.E8及IE更低版本不支持opacity rgba
.content1{
width: 500px;
height: 100px;
background: red;
opacity: 0.1;
/* background-color: rgba(255, 0, 0, 0.1) */
}
.content2{
border:1px solid #333;
width: 800px;
height: 500px;
}
4.块属性标签float后，又有横行的margin情况下，在IE6显示margi比设置的大
常见症状：在IE6下后面的一块被顶到下一行
解决方案：在float的标签样式控制中加入display:inline;将其转换成行内属性
5.设置较小高度标签(一般小于10px),在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden,或者设置行高line-height小于你设置的高度
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116692.html
摘要：层叠样式表二修订版这是对作出的官方说明。速查表两份表来自一份关于基础特性，一份关于布局。核心第一篇一份来自的基础参考指南简写速查表简写形式参考书使用层叠样式表基础指南，包含使用的好处介绍个方法快速写成高质量的写出高效的一些提示。 迄今为止，我已经收集了100多个精通CSS的资源，它们能让你更好地掌握CSS技巧，使你的布局设计脱颖而出。 CSS3 资源 20个学习CSS3的有用资源 C...
摘要：结果是选手获胜，名为的元素，最终的值为。而合理的命名约定，的确是组织代码的有效策略。它们会再由转换为适当的组合。虽然本文为了严谨，结果写了相当长的篇幅，但希望你读过之后，还能觉得是简单易懂的。 不要误会，CSS Modules可不是在说css模块化这个好像在某些地方见过的词，它其实是特指一种近期才出现的技术手段。 什么技术手段呢？请待后文说明。 层叠样式表 我们知道，css的全名叫做层...
摘要：能最大化地结合现有生态预处理器后处理器等和模块化能力，几乎零学习成本。编码相关的所有样式上例中打印的结果是注意到是按照自动生成的名。实践手动引用渲染结果使用可以实现使用属性自动加载模块。 文章同步于Github Pines-Cheng/blog 随着前端这几年的风生水起，CSS作为前端的三剑客之一，各种技术方案也是层出不穷。从CSS prepocessor（SASS、LESS、Styl...
摘要：一个叫的人用纯重绘并模拟了种不同的移动设备包括可以给你的网站添加不相关的独立组件的一个库。每一个组件都是针对移动设备定制的，并且它有很多你在传统的框架中看不到的功能。如果你用开发移动优先的网站，并想要网站正常运行在低版本的上，可以考虑。 众所周知，CSS是非常棒的，它使网站看起来很漂亮，可以为网站添加动画，并让呈现和内容分离。去了解CSS的一切是非常难做到的，它只会变得更加困难,因为我...
摘要：层叠即表示允许以多种方式来描述样式，一个元素可以被渲染呈现出多种样式。可以让属性的变化过程持续一段时间，而不是立即生效。比如，将元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用后，将按一个曲线速率变化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全称是 Cascading Style Sheet...
摘要：上例中打印的结果是对中的名都做了处理，使用对象来保存原和混淆后的对应关系。结合实践在处直接使用中名即可。如因为只会转变类选择器，所以这里的属性选择器不需要添加。 showImg(http://gtms01.alicdn.com/tps/i1/TB15w0HLpXXXXbdaXXXjhvsIVXX-600-364.png); CSS 是前端领域中进化最慢的一块。由于 ES2015/201...
阅读 3665·2021-11-23 09:51
阅读 1328·2021-11-10 14:35
阅读 3992·2021-09-22 15:01
阅读 1251·2021-08-19 11:12
阅读 367·2019-08-30 15:53
阅读 1668·2019-08-29 13:04
阅读 3413·2019-08-29 12:52
阅读 3030·2019-08-23 16:14
