CSS常见样式(二)

1.CSS有几种引入方式? link 和@import 有什么区别?

  • 第一种:在head部分加入<link rel="stylesheet" type="text/css" href=""/>引入外部的CSS文件。这种方法可以说是现在占统治地位的引入方法。如同IE与浏览器。这也是最能体现CSS特点的方法,最能体现DIV+CSS中的内容与显示分离的思想,也最易改版维护,代码看起来也是最美观的一种。
  • 第二种:在head部分加入: <style type="text/css"> div{margin: 0;padding: 0;border:1px red solid;} </style> 这种方法的使用情况要少的多,最长见得就是访问量大的门户网站。或者访问量较大的企业网站的首页。与第一种方法比起来,优点突出,弊端也明显。优点:速度 快,所有的CSS控制都是针对本页面标签的,没有多余的CSS命令;再者不用外链CSS文件。直接在HTML文档中读取样式。缺点就是改版麻烦些,单个页 面显得臃肿,CSS不能被其他HTML引用造成代码量相对较多,维护也麻烦些。
  • 第三种:直接在页面的标签里加 <div style="border:1px red solid;"></div> 这种方法现在用的很少,它只能改变当前标签的样式,如果想要多个 拥有相同的样式,你不得不重复地为每个添加相同的样式,如果想要修改一种样式,又不得不修改所有的 style 中的代码。很显然,这种方式引入的 CSS 代码会导致 HTML 代码变得冗长,且使得网页难以维护。但对于并且不常改动的地方,使用这种方法反而是很好的选择。
  • 第四种:除了这三种常用的CSS引入方式,还有一种很多人都没有见过的引入方式 <style type="text/css"> @import url(my.css); </style>

link 和@import 的区别:

  • link属于XHTML标签,而@import完全是CSS提供的一种方式。 - - link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。
  • 加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显。
  • 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
  • 使用DOM控制样式时的差别 。当使用JavaScript控制DOM去改变样式的时候,只能使用link标签,因为@import不是DOM可以控制的。
  • @import可以在CSS中再次引入其他样式表,比如可以创建一个主样式表,在主样式表中再引入其他的样式表。

2.解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?

body{
  font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}

代码作用:

  • 该段代码设置了body的font样式,字体大小为12px,行高是字体1.5倍的像素值,后面则是第一到第五字体,用逗号隔开,如果用户浏览第一字体没有,则查询第二字体有没有,以此类推,如果都没有则采用系统默认字体;

字体为什么要加引号:

  • 因为采用中文或者英文字体有空格时,不加引号可能导致用户浏览器不能识别字体,产生乱码;

字体里的数字符号代表什么:

  • 代表字体的Unicod码,Unicode码全球通用,用该码表示字体是最保险的。unicode编码‘\5b8b\4f53’ 表示宋体,需要加引号,使用unicode编码是因为网页或css编码是utf-8是 直接写成中文,浏览器有可能不能识别,所以写成中文的unicode编码就不会造成这种问题

3.text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中

text-align: center的作用是让行内或类行内元素(比如文本和连接)相对父元素居中对齐,作用在块级父容器上。

4.IE 盒模型和W3C盒模型有什么区别?

Paste_Image.png

区别在于width和height的算法不同,如下表:

Paste_Image.png

1、W3C的标准Box Model:

/*外盒尺寸计算(元素空间尺寸)*/ 
Element空间高度 = content height + padding + border + margin 
Element 空间宽度 = content width + padding + border + margin
 /*内盒尺寸计算(元素大小)*/ 
Element Height = content height + padding + border (Height为内容高度) 
Element Width = content width + padding + border (Width为内容宽度)

2、IE)传统下Box Model(IE6以下,不含IE6版本或“QuirksMode下IE5.5+”):

/*外盒尺寸计算(元素空间尺寸)*/ 
Element空间高度 = content Height + margin (Height包含了元素内容宽度,边框宽度,内距宽度) 
Element空间宽度 = content Width + margin (Width包含了元素内容宽度、边框宽度、内距宽度)
 /*内盒尺寸计算(元素大小)*/ 
Element Height = content Height(Height包含了元素内容宽度,边框宽度,内距宽度) 
Element Width = content Width(Width包含了元素内容宽度、边框宽度、内距宽度)

5.*{ box-sizing: border-box;}的作用是什么?

让元素维持IE传统的Box Model(IE6以下版本),也就是说所有元素的内边距和边框不再会增加它的宽度。

6.line-height: 2和line-height: 200%有什么区别?

  • line-height:2 是指行高是为文字大小的2倍
  • line-height:200%是指行高是父元素文字大小的2倍

7.inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?

1.特性:既呈现inline的特性,不占据一整行,宽度由内容宽度决定,又呈现block的特性,可设置宽高,内外边距;

2、去除缝隙:真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,去除间隙方法:

  • 元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就没有了。考虑到代码可读性,显然连成一行的写法是不可取的
  • 将inline-block元素的父元素设置font-size:0;然后在给设置了inline-block的元素重新设置一个font-size。

3、顶端对齐:将设置了inline-block的元素加上 vertical-align: top。

8.让一个元素“看不见”有几种方式?有什么区别?

  • opacity:0;看不见,占用位置,可以点击(各种电影网站常用方式)
  • visibility:hidden;看不见,占用位置,无法点击。
  • display:none;完全消失,不占用位置,无法点击。
  • background-color:rgba(22,22,22,0):设置背景透明度;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Pythonista

css基础

    行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。

1002
来自专栏前端新视界

网页中添加下划线的方法汇总及优缺点

本文主要介绍了添加下划线样式的几乎所有方法,并且比较了每一种方法的优缺点。没想到之前一直没有注意的下划线还有这么多玄机奥秘! 本文由 nzbin 翻译,艾凌风...

18610
来自专栏练小习的专栏

封装图片滑动效果

by bopooo 在腾讯QQ软件下载的页面有一个图片滑动的效果,觉得还不错 就自己封装了一个 技术方面在 动作缓冲上 遇到一些问题 不过都解决了 不过还...

20410
来自专栏非著名程序员

Android 自定义标签 ViewLayout

自定义viewLayout实现标签View,UI的效果图如下: ? 如图,我们要自己实现带描边的,带花括号的,带三角形,带对勾的这样一个layout ,并且对...

20510
来自专栏木子昭的博客

<自动化办公> Python 操控 Word

虽然Word不好用, 但还必须得用它, python-docx是专门用于编辑Word文档的一个工具库, 它有两大用途, 自动化生成word文档 and 自动化...

1.1K6
来自专栏极客慕白的成长之路

50道CSS基础面试题

1225
来自专栏柠檬先生

VUE 入门基础(9)

十一,深入响应式原理    声明响应式属性     由于Vue不允许动态添加根级响应式属性,所以你必须在初始化实例钱声明根级响应式属性,哪怕只有一个空值。 ...

2185
来自专栏小古哥的博客园

读书笔记《CSS权威指南》

阅读本书主要目的: 自从学会CSS以来,虽然熟练掌握了其使用方法和技巧,但对其底层的原理和实现并不清晰,阅读本书想进一步系统化的学习和深入研究其本质,对这门前端...

3335
来自专栏小巫技术博客

A013-animator资源

693
来自专栏菜鸟前端工程师

JavaScript学习笔记012-DOM2级事件监听-代理0冒泡-捕获模式

Bootstrap,Foundation,Semantic UI,Angular,React Redux,Vue?

811

扫码关注云+社区