一、层叠的问题

 CSS有两个性质:

  1、继承性

  2、层叠性:选择器的一种选择能力,谁的权重大就选谁

   层叠性又分为:

    1)、选不中:走继承性     (font、color、text、)     继承性的权重是0

      若有多个父级都设置了样式,走就近原则

    2)、选中了

      a、权重的问题,权重大,就选谁的样式

      b、权重相同,谁在后,选择谁

      *纯标签和类没有可比性,纯类和ID也没有可比性

二、标准文档流

  1、含义:浏览器的排版是根据元素的特征(快和行级),从上往下,从左到右排版,这就是标准文档流

  2、浮动  float:left/right

     效果:

      1)、块级加float

        a:两个元素都加浮动,后面的元素会紧跟前面的元素并排排列,只要加了float,这个元素就会脱离标准文档流

        b:第一个加了float,脱离了标准文档流,对于浏览器来说,第二个元素就变成了标准文档流中的第一个,于是就会把他排在第一位,而第一个依然存在,所以就会叠加

      2)、行级加float

        行级元素加float,脱离标准流,块不像块,行不像行,但能设置宽高,能并排排列,但Display就没有意义了

    拓展:

     使用元素标准流的方法:

      a、浮动:float

      b、绝对定位:position:adsolute;

      c、固定定位:position:fixed;      (fixed 固定的)

  2、浮动带来的好处

    给元素加了浮动,撑不起父级的高度了

  3、清除浮动

    a、给浮动的父级添加高度

    b、给父级添加overflow:hidden;

    c、给浮动元素的后面添加一个空的div,添加样式为clear:both;

      <ul>

       <li>首页</li>

       <li>新闻</li>

       <div  style-clear:"both;"></div>

      </ul>

    d、给浮动元素的父级添加一个类叫clearfix                 (clearfix 清除格式)

      这个类的写的样式属性有:

        .clearfix:after{

            content:"";

            display:"block";

            clear:"none";

            height:0;

            visibility:"hidden";          visibility    可见的

            }

  *注:伪类选择器

    只要选择后面带;都可以说他是伪类选择器

         a:hover{}  a:visited{}  a:active{}  p:after{}  p:before;

          超链接的四种状态:

       a:link{

          color:blue;

          }

       a:visited{

           color:red;

           }

       a:hover{

           color:green;

           }  

       a:active{

             color:yellow;

            }

    *这四种超链接的状态的顺序不能改变

      伪元素和伪类选择器的区别:

        伪元素有两个冒号,如 P:after{}               伪类选择器有一个冒号,P:hover{}

  注:

   1、margin:0 auto;和text-align:center;

      margin的居中是对自身;      text-align是对元素内部的文本集中的

   2、visibility:hidden;和display:none;

      visibility:隐藏之后还占据空间

     display:隐藏后不占据空间

CSS层叠的问题、标准文档流、伪类选择器的更多相关文章

  1. 前端css盒模型及标准文档流及浮动问题

    1.盒模型 "box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型.这里重 ...

  2. python全栈开发 * 继承性 层叠性 盒模型 标准文档流 * 180809

    ---恢复内容开始--- 一继承性 1.继承: 给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承. 2. 可继承: color . font-*(size). text-*(de ...

  3. css标准文档流

    css标准文档流 所谓的标准文档流指的是网页当中的一个渲染顺序,就如同人类读书一样,从上向下,从左向右.网页的渲染顺序也是如此.而我们使用的标签默认都是存在于标准文档流当中. 标准文档流当中的特性 空 ...

  4. CSS标准文档流 块级元素和行内元素

    标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 空白折叠现象 ...

  5. 浅谈,html\css脱离标准文档流相关

    (个人知识有限,难免有误,请见谅) 标准文档流,顾名思义,是要按照一定规矩排列的,默认的就是元素会从左至右,从上至下排列,块级会独占一行,行内元素会和小伙伴们共享一行. 本来在标准文档流下,各个元素相 ...

  6. Unit 6.标准文档流,浮动,清除浮动以及margin塌陷问题

    一. 什么是标准文档流 文本流其实就是文档的读取和输出顺序,也就是我们通常看到的由左到右.由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个 ...

  7. python 全栈开发,Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)

    昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...

  8. 页面标准文档流、浮动层、float属性(转)

    CSS float 浮动属性介绍 float属性:定义元素朝哪个方向浮动. 1.页面标准文档流.浮动层.float属性 1.1 文档流 HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块 ...

  9. day 41 标准文档流 浮动

    一.标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 标准文档 ...

随机推荐

  1. leetcode 677. Map Sum Pairs

    Implement a MapSum class with insert, and sum methods. For the method insert, you'll be given a pair ...

  2. 从零开始徒手撸一个vue的toast弹窗组件

    相信普通的vue组件大家都会写,定义 -> 引入 -> 注册 -> 使用,行云流水,一气呵成,但是如果我们今天是要自定义一个弹窗组件呢? 首先,我们来分析一下弹窗组件的特性(需求): ...

  3. linux:在vmware上模拟新加一个硬盘对其格式化分区

    在实际情况中,很容易有系统硬盘空间不够,然后需要添加新硬盘情况:这里我用vmware来模拟实验: 一:在一个Linux vmware上创建一个虚拟硬盘   1.打开vmware,选择一个已经搭建好的l ...

  4. 第一次通过AVD Manager创建了一个虚拟设备,但是在Android Studio运行程序时却无设备可选

    第一次通过AVD Manager创建了一个虚拟设备,但是在Android Studio运行程序时却无设备可选 原因是adb.exe未运行起来 至于adb.exe未正常运行起来的原因多半是5037端口被 ...

  5. CollectionView垂直缩放卡片布局

    实现效果 实现思路 从效果图可以看到变化是,越是往中间滚动的item显示最大,越显眼.而越是往前面,或者越是后面的,反而显示越小,这样就形成了视觉差. 实现的思路就是通过重写在可见范围内的所有item ...

  6. 并不对劲的bzoj4804:欧拉心算

    题目大意 \(t\)(\(t\leq5000\))组询问,每次询问给出\(n\)(\(n\leq10^7\)),求: \[\sum_{i=1}^{n}\sum_{j=1}^{n}\phi(gcd(i, ...

  7. [Codeforces 914D] Bash and a Tough Math Puzzle

    [题目链接] https://codeforces.com/contest/914/problem/D [算法] 显然 , 当一个区间[l , r]中为d倍数的数的个数 <= 1 , 答案为Ye ...

  8. 相对定位relative与绝对定位absolute

    relative:相对定位,并没有脱离原来文档流,依然在原来的位置上,可以通过设置left,top,来设置自己的偏移量,但是它依然占据自己原来的位置,偏移的位置会遮盖其他的元素 absolute:绝对 ...

  9. SCUT - 249 - Hello World - 数位dp

    https://scut.online/p/249 数位dp的模板题? 需要特殊判断0,这个很不优雅,因为0-1=-1是个很奇葩的东西? #include<bits/stdc++.h> u ...

  10. MySQL的分支

    1.MariaDB MariaDB数据库管理系统是 MySQL 的一个分支,主要由开源社区在维护,采用GPL授权许可 MariaDB的目的是完全兼容MySQL,包括API和命令行,使之能轻松成为MyS ...