跳到主要内容

备忘录

有四种：内联(元素上的style属性)、内嵌(style标签)、外链(link)、导入(@import)。 @import写法很多种，但是@import url(style.css) 和@import url("style.css")是最优的选择，兼容的浏览器最多。从字节优化的角度来看@import url(style.css)最值得推荐。

<head> 
<link rel="stylesheet" rev="stylesheet" href="myCss.css" type="text/css" > 
<style type="text/css" >                
@import url("./myCss.css");        
// 支持媒体查询导入
@import url(images/style.css) screen and (max-width:768px){
</style>
 </head>

link和@import的区别：

  • 1、从属关系：link是html的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等；而@import是css的语法，只有导入样式表的作用。
  • 2、加载顺序：页面被加载时，link会和html同时被加载而；@import引入的 CSS 将在页面加载完毕后被加载。
  • 3、兼容性：@import是 CSS2.1 才有的语法，所以只能在 IE5以上 才能识别；而link是 HTML 标签，所以不存在兼容性问题。
  • 4、DOM：javascript只能控制dom去改变link标签引入的样式，而@import的样式不是dom可以控制的。@import是依赖css的，存在一定的兼容问题，并且根据浏览器渲染机制来说，他在dom树渲染完成后才会渲染，并且不能被js动态修改。
  • 5、link方式的样式权重高于@import的权重。

所以：

  • 相比之下link兼容性较好，且dom元素的样式可以被js动态修改
  • 又因为link的权重高于@import，所以 @import适用于引入公共基础样式或第三方样式，link适用于自己写的且需要动态修改的样式。

2.流式布局与响应式布局的区别​

流式布局 使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进 行伸缩，不受固定像素的限制，内容向两侧填充。

响应式开发 利用CSS3 中的 Media Query(媒介查询)，通过查询 screen 的宽度来指定某个宽度区间的网页布局。

  • 超小屏幕(移动设备) 768px 以下
  • 小屏设备 768px-992px
  • 中等屏幕 992px-1200px
  • 宽屏设备 1200px 以上

3."nth-child"和"nth-of-type"的区别​

“nth-child”选择的是父元素的子元素，这个子元素并没有指定确切类型，同时满足两个条件时方能有效果：其一是子元素，其二是子元素刚好处在那个位置；“nth-of-type”选择的是某父元素的子元素，而且这个子元素是指定类型

<h1>我是标题</h1>
<p>我是文章的第一个段落</p>
<p>我是文章的第二个段落</p><!** ==我要变成第二个段落== **>
p:nth-child(2){color:red;}/*第一个段落变成红色，不是我们需要的效果*/
p:nth-of-type(2){color:red;}/*第二个段落变成红色，是我们需要的效果*/

4.CSS隐藏元素的几种方式及区别​

display:none:元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。 visibility:hidden:其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排 opacity:0:隐藏后依旧占据着空间,可触发点击，前两个都不能

5.消除图片底部间隙的方法​

幽灵空白点造成的影响，图片与他基线对齐就造成了空隙

  • 图片块状化 - 无基线对齐：img { display: block; }
  • 图片底线对齐：img { vertical-align: bottom; }
  • 行高足够小 - 基线位置上移：.box { line-height: 0; }
  • 设置font-size: 0间接改变line-height。

6.rgb() 与 rgba() 颜色​

rgb() 表示颜色的红-绿-蓝（red-green-blue (RGB)）模式，rgba() 多一个 a ，表示其透明度，取值为 0-1。

7.在网页中的应该使用奇数还是偶数的字体？为什么呢？​

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。

8. 伪类和伪元素的区别​

  • 伪类用于当已有元素处于某种状态时候，为其添加对应的样式，这个状态是根据用户行为变化而变化的。比如说hover。虽然他和普通的css类似，可以为已有的元素添加样式，但是他只有处于dom树无法描述的状态才能为元素添加样式，所以称为伪类

  • 伪元素用于创建一些原本不在文档树中的元素，并为其添加样式，比如说:before。虽然用户可以看到这些内容，但是其实他不在文档树中。

  • 区别在于：有没有创建一个文档树之外的元素

9.html中title属性和alt属性的区别？​

alt信息
  • <img src="#" alt="alt信息" title="title信息" />
  • 当图片不输出信息的时候，会显示alt信息 鼠标放上去会出现title信息
  • 当图片正常输出的时候，不会出现alt信息，鼠标放上去会出现title信息

10. CSS 有哪些样式可以给子元素继承!​

可继承的:font-size,font-weight,line-height,color,cursor等 不可继承的一般是会改变盒子模型的:display,margin、border、padding、height等

11.absolute和relative对于重排重绘 那个性能好点​

将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。