软件测试学习之路 CSS (二）

一、元素展示类型
HTML中本身定义许多元素有自己默认在网页中显示的样式，如有些元素默认情况下，你设置的宽高属性不起作用，有些元素独占一行。这种现象我们称为元素展示类型，为了方便记忆将元素展现类型分为三种：1.块元素 2.行内元素 3.行内块元素

块元素:当时存在多个块元素时，每一个块元素都会独占一行，且默认情况的宽高属性可以显示。
行内元素：当多个行内元素时，这些元素会在一行显示，如果放不下就会自动换行放置。默认情况下宽高属性不起作用。
行内块元素：当存在多个块元素的时候，这些元素会显示在一行，默认情况下宽高属性起作用。

二、布局标签补充

div标签，它是html中定义好的双标签（DIV+CSS）。div是一个体积最大的标签。
span标签，它是一个双标签，主要用来放文字，体积小。
段落标签不能嵌套标题标签，浏览器无法正常解析。

三、元素展示类型转换
当在网页布局中，若需要标签展示特定形式，那么我们可以通过display强制转换类型来达成目的。

转成块内元素：display：block；
转成行内块元素：display：inline-block
转成行内元素：display：inline；
不显示：display：none

四、简单选择器权重
权重可认为是优先级，对于简单选择器来说其优先级都不一样。
优先级：
id选择器>类名选择器>标签选择器
特性：
1.在优先级一样的时候，同一个元素后写的CSS样式会覆盖掉先写的CSS样式
2. CSS的定义存在继承特点，即子元素会继承父元素的一些样式
注：不是所有css属性都可继承，不是所有类型的元素都会继承父（祖）元素的样式（一般发生在块元素上）
3. 不同选择器对相同元素的控制能力不同，优先级越高，先控制，优先级低无作用。
五、复合选择器
在多层嵌套中，通常我们需要使用复合选择器，使我们简单的从一堆元素中选取一个或者多个元素进行样式设置。

1.后代选择器：以某一元素为起点，向后查找，去选择他的后代元素。
样式：起点元素后代元素 …{设置样式}

例子：

div p span {width: 200px;height: 200px;background-color: red}

以辈分理解div为爷爷辈，p为父辈，span为子辈
注：
（1）.复合选择器中的每一部分都可用任意简单选择器代替。以上面代码举个例子：在div中设置了class类型后，可以用.类名来代替div。
（2）.不同部分之间用空格隔开。

2.并列选择器：就是讲多个选择器用都厚连接，表示同时选择这些元素，设置相同样式，其中每一个选择器都可以由任意类型选择器构成。

样式：元素1，元素2，元素3，…{设置样式}
例子：

h4,p,a{width: 200px;height: 200px;background-color: red}

六、选择器权重总结
1.优先级：
id选择器>类名选择器>标签选择器
2.复合选择器：在复合选择器中人为设定权重值，以区分不通选择器对同一个元素的控制力。
ID选择器 100
类选择器 10
标签 1
注：对于复合选择器来说，复合选择器相加的权重值越大，对元素控制力越强，但要注意的是仅在复合权重中适用。

软件测试学习之路 CSS (二）相关推荐

软件测试学习之路 CSS (三）
一.CSS文件存放位置 css代码可以放在许多地方,习惯性有三种说法:内嵌css.外链css.行内css. 1.内嵌css指的是将css代码写在html网页中 2.外链css指的是将css代码写在外部 ...
软件测试学习之路 CSS（一）
一.CSS与HTML关系 HTML是网页的骨架,只有简单的内容框架,而CSS提供内容的样式,而我们所看到的网页都是经过CSS美化呈现出来的 . css代码分布在html的head标签之间title标签 ...
Go语言学习之路（二）
Go语言学习之路(二) 面对对象编程思想抽象封装继承接口文件命令行参数 Json 序列化反序列化(unmarshal) 单元测试 Redis Redis简介 Redis基本使用 Go连接 ...
python爬虫学习之路（二）re库的使用方法
python基础爬虫学习之路(二) 在上一篇文章中,我们已经学习了有关爬虫对URL的访问以及利用xpath表达式对网页中的信息进行提取,这一篇文章我们将从信息提取的角度来进一步学习爬虫. 正则表达式提 ...
ElasticSearch (ES)学习之路（二）Win10安装ES，可视化界面，Kibanna
ElasticSearch (ES)学习之路(二)Win10安装ES,可视化界面,Kibanna 我前一段时间学习的时候ES 还是7.6.x 现在看ES 官网已经到了7.8.X了,迭代维护的速度还是挺 ...
3台云腾讯云开始hadoop学习之路笔记二
3台云腾讯云开始hadoop学习之路笔记二(接上) 大三党开始学习hadoop之路了,菜鸟学习hadoop,有啥错误请大佬指教.由于自己电脑配置不够,只能买3台腾讯云服务器来学习了.以下笔记都是记录我 ...
嵌入式学习之路（二十）——数据结构（2）
嵌入式学习之路(二十)--数据结构(2) 上次我们讲了排序的四个基本的算法,今天我们先来讲讲数据结构一.什么是数据结构是指相互之间具有一定联系的数据元素的集合. 元素之间的相互联系称为逻辑结构. ...
python之路 mysql 博客园_教为学：Python学习之路（二）：MySQLdb的几种安装方式，以及用Python测试连接MySql...
教为学:Python学习之路(二):MySQLdb的几种安装方式,以及用Python测试连接MySql Easy_install安装MySQLdb 很简单,以至于我不晓得该怎么说.一句话. sodu ...
n76e003引脚图_N76E003的学习之路（二）
N76E003的学习之路(二) N76E003 作者:张凌001 来源:不详发布时间:2018-03-09 19:48:36 浏览:1157 最近一直在想N76E003和STM8M003的对比情 ...

软件测试学习之路 CSS (二）

软件测试学习之路 CSS (二）相关推荐

最新文章

热门文章

软件测试 学习之路 CSS (二）

软件测试 学习之路 CSS (二）相关推荐

最新文章

热门文章

软件测试学习之路 CSS (二）

软件测试学习之路 CSS (二）相关推荐