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 条评论
登录 后参与评论

相关文章

来自专栏木子昭的博客

学习React中ref的两个demo

虚拟Dom虽然能够提升网页的性能, 但虚拟 DOM 是拿不到用户输入的。为了获取文本输入框的一些操作, 还是js原生的事件绑定机制最好用~

563
来自专栏前端学习心得

React三大突出特点

992
来自专栏知道一点点

bootstrap快速入门笔记(五)-文本元素类,各种标签,排版

2,全局元素被直接赋予font-size 设置为 14px,line-height 设置为 1.428,<p> (段落)元素还被设置了等于 1/2 行高(即 1...

753
来自专栏菩提树下的杨过

温故而知新:Delegate,Action,Func,匿名方法,匿名委托,事件

一、委托Delegate 一般的方法(Method)中,我们的参数总是string,int,DateTime...这些基本的数据类型(或者没有参数),比如 p...

1716
来自专栏闻道于事

JavaScript事件与例子(三)

两个例子,好友选中效果和左侧右侧子菜单 一、好友选中效果 可以通过设置属性的方式判断当前是否被选中,也可以通过获取当前元素的颜色从而得知当前元素状态是否被选中,...

2746
来自专栏编程

前端学习自学笔记:day03

嗯,说实话,我写这个的话比较少人看啊,但是还是继续坚持下去吧,可不可能半途而废啊,接下来是第三天的笔记. ? 在此之前先为大家显示下前端工程师的路线图: 第三天...

1775
来自专栏大数据钻研

HTML+CSS 面试题整理(一)

1.web标准: (1)结构标准:其语言主要包括XHTML(实现HTML向XML的过渡。)和XML(用于弥补HTML的不足) (2)表现标准:其语言主要包括C...

2808
来自专栏逸鹏说道

Markdown基础(内含:锚点使用,使用HTML,新页面跳转,目录生成)

如果要语法高亮就在```后面加小写语言名,eg:html,css,javascript,python,cs(csharp)等等

993
来自专栏从零开始学 Web 前端

从零开始学 Web 之 DOM(五)元素的创建

762
来自专栏用户画像

H5 新增的元素和废除的元素

section元素定义文档或应用程序的一个区域,如章节、页眉、页脚或文档中的其他部分,它可以与h1、h2、h3、h4、h5、h6等元素配合使用,标示文档结构。

773

扫码关注云+社区