CSS常见样式(二)

  • 第一种:在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 条评论
登录 后参与评论

相关文章

  • 什么是CSS预处理器

    小胖
  • 关于浮动

    小胖
  • CSS理解之margin

    小胖
  • 可替换元素和非替换元素

    可替换元素replaced element也称作可置换元素,其展现效果不是由CSS来控制的,这些元素是一种外部对象,它们外观的渲染,是独立于CSS的。非置换元素...

    WindrunnerMax
  • Spock测试框架实践(三)

    在上一次Spock实践中我们介绍了Spock的基本概念,今天我们继续介Spock的数据驱动和一些技巧。

    用户5521279
  • CSS--外边距合并的问题

    简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

    Clearlove
  • 作为一名数据科学家Python需要掌握到什么程度?

    之前一直用R,最近正在学python,因为没有什么工作经验,也只能谈谈自己的感悟。 数据科学家算是统计师和程序员的结合体,来源也主要是这两个专业的毕业生。不...

    机器学习AI算法工程
  • python编写爬虫刷流量

    这代码不是我自己写的,我是看视频写的。我也不知道算不算是原创,只能说放在这里做个记录,以后自己看了方便。

    py3study
  • 机器人强化迁移学习指南:架设模拟和现实的桥梁

    近年来,强化学习(Reinforcement learning)在人工智能领域中表现出了显著的性能,例如基于原始像素的 Atari 游戏,连续复杂控制策略的学习...

    机器之心
  • python之windows安装mysq

    mysql-python包含MySQLdb模块,此模块是python用来连接mysql数据库,今天在windows上安装mysql-python模块遇到了一些问...

    py3study

扫码关注云+社区

领取腾讯云代金券