前端面试 CSS三大特性
CSS的三大特性
1.层叠性
代码由上向下执行，相同选择器设置到同一元素上，样式冲突的，会执行比较靠近html的样式，样式不冲突的情况下不影响
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box {
margin: 0 auto;
height: 200px;
width: 200px;
background-color: black;
}
.box1 {
background-color: red;
width: 100px;
height: 100px;
}
.box1 {
background-color: pink;
}
</style>
<div id="box">
<div class="box1">11</div>
</div> </body>
</html>
2.继承性
CSS具有继承父类元素的特性，如 字体大小，颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box {
margin: 0 auto;
height: 200px;
font-size: 30px;
}
.box1 { width: 100px;
height: 100px;
}
</style>
<div id="box">
<div class="box1">继承性</div>
</div> </body>
</html>
3.优先级
- 继承样式的权重为0 ，
- 行内样式，style属性的元素，行内样式权限非常高
- !important命令，拥有最大的优先级
|
Div ul li |
0,0,0,3 |
|
.nav ul li |
0,0,1,2 |
|
a:hover |
0,0,1,1 (伪类) |
|
.nav a |
0,0,1,1 |
|
#nav p |
0,1,0,1 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box {
margin: 0 auto;
height: 200px;
font-size: 30px;
color: #ffbbff !important;
}
.box1 {
width: 100px;
height: 100px;
color: red;
}
</style>
<div id="box">
<div class="box1">优先级</div>
</div> </body>
</html>
前端面试 CSS三大特性的更多相关文章
- python 之 前端开发（CSS三大特性、字体属性、文本属性、背景属性）
11.38 css三大特性 11.381 继承性 1.定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性2.注意: 1.只有以color.font-.text-.l ...
- CSS.02 -- 样式表 及标签分类（块、行、行内块元素）、CSS三大特性、背景属性
样式表书写位置 内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...
- Css - 三大特性
css - 三大特性 1.层叠性 如果通过两个相同选择器设置了同一个元素的某个相同的css属性,按照css相同属性的出现顺序,后面的样式会覆盖前面的样式 2.继承性 祖先元素的关于文本的样式会遗传给后 ...
- CSS三大特性（继承、优先级、层叠）之个人见解
首先声明一下CSS三大特性——继承.优先级和层叠.继承即子类元素继承父类的样式,比如font-size,font-weight等f开头的css样式以及text-align,text-indent等t开 ...
- CSS 三大特性 层叠 继承 优先级
css三大特性 层叠性: 如果一个属性通过两个相同选择器设置到同一个元素上,相同的属性就会出现冲突,那么这个时候一个属性就会将另一个属性层叠掉,采用的是就近原则 继承性: 子标签会继承父标签的某些样式 ...
- css三大特性及权重说明
一.三大特性简述 层叠性: 后来的覆盖前面的 (长江后浪推前浪) 继承性: 子标签会继承父标签的某些样式 (跟文字有关的一般都会继承) 优先级: 设计到一个算法“css特殊性(Specificity) ...
- 前端面试——css篇
css盒子模型 在W3C模型中: 总宽度 = margin-left + border-left + padding-left + width + padding-right + border-rig ...
- CSS系列 (03)：CSS三大特性
层叠性 层叠性指的是样式的优先级,当产生冲突时以优先级高的为准,优先级相同时取后面定义的属性样式. 继承性 继承性指的是子孙元素可以继承父元素的属性. 记录一下开发中常用的继承属性: 字体系列 fon ...
- 2021前端面试css（三）
overflow 原理 块格式化上下文是css可视化渲染的一部分,它是一块区域,规定了内部块盒的渲染方式,以及浮动相互之间的影响关系,当元素设置了overflow 样式且值不为visible时,元素就 ...
随机推荐
- 攻防世界 reverse android-app-100
android-app-100 suctf-2016 jeb启动,找到点击事件: 验证流程: 输入作为参数 --> processObjectArrayFromNative 得到一返回值(r ...
- [set]JZOJ 5821 手机信号
Description
- kubernetes 降本增效标准指南| 容器化计算资源利用率现象剖析
作者:詹雪娇,腾讯云容器产品经理,目前主要负责腾讯云集群运维中心的产品工作. 张鹏,腾讯云容器产品工程师,拥有多年云原生项目开发落地经验.目前主要负责腾讯云TKE集群和运维中心开发工作. 引言 降本增 ...
- Python—关于Pandas缺失值问题(国内唯一)
获取文中的CSV文件用于代码编程以及文章首发地址,请点击下方超链接 获取CSV,用于编程调试请点这 在本文中,我们将使用Python的Pandas库逐步完成许多不同的数据清理任务.具体而言,我们将重点 ...
- 201871030122-牛建疆 实验三 结对项目——《D{0-1}KP 实例数据集算法实验平台》项目报告
项目 内容 课程班级博客链接 班级博客链接 作业要求链接 作业要求链接 我的课程学习目标 (1)体验软件项目开发中的两人合作,练习结对编程(Pair programming).(2)掌握Github协 ...
- OGG-Oracle 集成模式抽取进程，REGISTER DATABASE都做了什么？
一.学习目标 有同事问OGG技术问题,OGG软件,在oracle数据库中,集成模式抽取进程REGISTER DATABASE,都做了什么操作? 有什么风险? 并且提到了一个抽取进程注册,在瞬时间并发占 ...
- （十五）struts2的文件上传和下载
文件上传的原理 我们以前学习上传的时候知道需要将表单的enctype属性设置为multipart/form-data. 表单的enctype属性指定的是表单数据的编码方式,有三个值: -applica ...
- python进阶(3)--条件判断、用户输入
文档目录: 一.if语句二.检索条件三.用户输入input四.while+inoput(),让用户选择何时退出五.break与continue六.while循环处理字典和列表 ------------ ...
- B1029/A1048 旧键盘损坏了，在输入一段文字时坏了的键不可以正常使用，现给出应输入的一段文字，和实际输出的文字，找出坏掉的键。
#include<cstdio> #include<cstring> const int maxn = 1000; bool HashTable[maxn] = { false ...
- Java刷题-tree
一.分别按照二叉树先序,中序和后序打印所有的节点. 这道题就是书上的算法思想的实际使用,唯一需要特别注意到的是用递归的方式建树,还是比较巧妙的,因为一棵树的建立过程字符流是重复使用的,用递归的方式对根 ...