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三大特性的更多相关文章

  1. python 之 前端开发（CSS三大特性、字体属性、文本属性、背景属性）

    11.38 css三大特性 11.381 继承性 1.定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性​2.注意:    1.只有以color.font-.text-.l ...

  2. CSS.02 -- 样式表 及标签分类（块、行、行内块元素）、CSS三大特性、背景属性

    样式表书写位置  内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...

  3. Css - 三大特性

    css - 三大特性 1.层叠性 如果通过两个相同选择器设置了同一个元素的某个相同的css属性,按照css相同属性的出现顺序,后面的样式会覆盖前面的样式 2.继承性 祖先元素的关于文本的样式会遗传给后 ...

  4. CSS三大特性（继承、优先级、层叠）之个人见解

    首先声明一下CSS三大特性——继承.优先级和层叠.继承即子类元素继承父类的样式,比如font-size,font-weight等f开头的css样式以及text-align,text-indent等t开 ...

  5. CSS 三大特性 层叠 继承 优先级

    css三大特性 层叠性: 如果一个属性通过两个相同选择器设置到同一个元素上,相同的属性就会出现冲突,那么这个时候一个属性就会将另一个属性层叠掉,采用的是就近原则 继承性: 子标签会继承父标签的某些样式 ...

  6. css三大特性及权重说明

    一.三大特性简述 层叠性: 后来的覆盖前面的 (长江后浪推前浪) 继承性: 子标签会继承父标签的某些样式 (跟文字有关的一般都会继承) 优先级: 设计到一个算法“css特殊性(Specificity) ...

  7. 前端面试——css篇

    css盒子模型 在W3C模型中: 总宽度 = margin-left + border-left + padding-left + width + padding-right + border-rig ...

  8. CSS系列 (03)：CSS三大特性

    层叠性 层叠性指的是样式的优先级,当产生冲突时以优先级高的为准,优先级相同时取后面定义的属性样式. 继承性 继承性指的是子孙元素可以继承父元素的属性. 记录一下开发中常用的继承属性: 字体系列 fon ...

  9. 2021前端面试css（三）

    overflow 原理 块格式化上下文是css可视化渲染的一部分,它是一块区域,规定了内部块盒的渲染方式,以及浮动相互之间的影响关系,当元素设置了overflow 样式且值不为visible时,元素就 ...

随机推荐

  1. 【PAT甲级】1119 Pre- and Post-order Traversals（前序后序转中序）

    [题目链接] [题意] 根据二叉树的前序和后序序列,如果中序序列唯一,输出Yes,如果不唯一输出No,并输出这个中序序列. [题解] 众所周知,二叉树是不能够根据前序和中序建立的,为什么呢?首先需要明 ...

  2. VS2015上OpenCV-2.4.13安装与Hi35xx .jpg/.bmp格式转.bgr格式开发

    因为Hi3559AV100后期深度学习开发需要用到.bgr格式的图片,而目前在手的一般为.jpg或.bmp格式的图片,下面随笔将给出基于OpenCV-2.4.13的格式转换,实现Hi35xx .jpg ...

  3. 攻防世界 reverse 进阶 8-The_Maya_Society Hack.lu-2017

    8.The_Maya_Society Hack.lu-2017 在linux下将时间调整为2012-12-21,运行即可得到flag. 下面进行分析 1 signed __int64 __fastca ...

  4. python mac地址计算

    思路是10/16进制的转换和字符串的处理 开始造轮子 1.判断是否是mac地址 正则匹配是否符合条件 1 import re 2 3 def isMac(string): 4 preg = re.co ...

  5. 【JVM进阶之路】十：JVM调优总结

    1.调优原则 JVM调优听起来很高大上,但是要认识到,JVM调优应该是Java性能优化的最后一颗子弹. 比较认可廖雪峰老师的观点,要认识到JVM调优不是常规手段,性能问题一般第一选择是优化程序,最后的 ...

  6. Class类文件结构--访问标志

    访问标志的位置:在常量池结束之后的两个字节(16位)表示访问标志access_flags. 访问标志的作用:用于标识类或者接口层次的访问信息:比如该Class是类还是接口,是否为public类型.是否 ...

  7. HTML（二）：HTML常用标签（上）

    标签语义 学习标签是有技巧的,重点是记住每个标签的语义.简单理解就是指标签的含义,即这个标签是用来干嘛的. 根据标签的语义,在合适的地方给一个最为合理的标签,可以让页面结构更清晰. 标题标签<h ...

  8. Linux 文件基本属性与目录管理 (chmod chown ls cp mv cat )

    Linux 文件基本属性 Linux系统是一种典型的多用户系统,不同的用户处于不同的地位,拥有不同的权限. 为了保护系统的安全性,Linux系统对不同的用户访问同一文件(包括目录文件)的权限做了不同的 ...

  9. addeventlistener回调函数中的黑科技

    dom.addEventListener('click',callback/obj){},这里的callback除了传递一个函数之外,还可以传递一个属性带有 HandleEvent 方法的对象obj, ...

  10. Maven相关知识总结

    目录 认识Maven Maven下载安装 Maven能用来做什么 Maven核心概念 开发目录 坐标和仓库 POM文件 POM文件内容 Maven依赖管理 构建生命周期 构建多模块系统 聚合 继承 聚 ...