一、上次内容回顾

　　1.CSS的三种引入方式：

　　　　行内式

　　　　内接式

　　　　外接式

　　　　　　链接式

　　　　　　导入式

　　2.基础选择器和高级选择器

　　　1）标签选择器 p{}

　　　2）  id选择器 #nva{}

　　　3） 类选择器 .nva{}

　　　4） 通配符选择器 *{}

　　　5） 后代选择器 div .nav{}

　　　6） 子代选择器 div>.nav{}

　　　7） 并集选择器 div，ul，ol{}

8)   交集选择器：第一个是标签选择器，第二个是类选择器

　　3.补充选择器

　　　9 )  属性选择器 label[for='user1']{}

　　　10） 伪类选择器

　　　　　　爱恨准则 LVoe HAte

　　　　　a:link{};a:visited{};a:hover{};a:active{}

　　　11)  伪元素选择器

　　　　p:first-letter{};p:before{};p:after{}　　

　　　

　　　　

二、今日内容总结

　　　　1.继承性和层叠性

　　　　　　继承：给父级设置的一些属性，子级继承了父级的该属性，这就是我们的css中的继承。
　　　　　　记住：有一些属性是可以继承下来：color、font-*、text-*、line-*。主要是文本级的标签元素。

　　　　　　但是像一些盒子元素的属性，定位元素（浮动，绝对定位，固定定位）不能继承。

　　　　2.权重问题

　　　　　　（1）先看标签有没有被选中，如果都选中了，数权重（顺序：id 类 标签）

　　　　　　　　　　如果没有被选中表示继承来的属性，继承来的属性权重为0，跟选中的标签没有可比性

　　　　　　（2）如果都是继承来的属性，谁描述的近（距离内层目的标签最近的标签）就显示谁的属性。

　　　　　　　　　　如果描述的一样近，这个时候继续数数。

　　　　　　（3） i！important 不管是继承来的还是非继承来的，只要牵扯到数权重的问题，那么！important属性始终设置该属性权重为无限大。

　　　　3.盒模型及其属性

　　　　　　　　　width：内容的宽度

　　　　　　　　　height：内容的高度

　　　　　　　　　padding：内容到边框的距离。加padding就要减盒子内容的宽或高。用于调整父子盒子之间的位置。

　　　　　　　　　border：边框

　　　　　　　　　margin：外边距：边框到另一个最近盒子边的距离。调整兄弟之间的位置。

　　　　　　　　　

　　　　　　　　　　计算盒模型：盒子的占据浏览器的宽度=width+padding+border

　　　　4.margin的塌陷问题

　　　　　　　 标准流的盒子，小的边距会掉到大的边距中

　　　　5.display none | inline | inline-block | block

　　　　　　　　行内标签：span、a、b、i、u、em。inline，基本全是文本级标签除了p

　　　　　　　　　　（1）在一行内显示

　　　　　　　　　　（2）不能设置宽、高

　　　　　　　　　　（3）它的宽高是内容的宽高

　　　　　　　　行内块：img、input。inline-block

　　　　　　　　　　（1）在一行内显示

　　　　　　　　　　（2）可以设置宽、高

　　　　　　　　块级标签：div、h系列、li、dt、dd、ul、ol、form、table。block

　　　　6.浮动

　　　　　　　　float：left | right

　　　　　　　　（1）浮动的元素脱标

　　　　　　　　　　 如果浮动的元素排在首位，设置为浮动元素后，其他同级标准流元素会挤占设置为浮动元素之前的元素的位置。

　　　　　　　　（2）浮动的元素相互贴靠

　　　　　　　　　　  ps：浮动的盒子，不会出现塌陷问题，可以使用margin调整父子盒子和兄弟盒子之间的位置

　　　　　　　　 （3） 浮动的元素有‘子围’效果

　　　　　　　　 （4） 收缩效果。

三、预习和拓展

　　　　1.标准流中一行内元素高低不等，底部对齐。而浮动元素的在其所在容器内靠左上对齐。

　　　　2.浮动元素不占用浏览器位置，整体布局主要是上下布局，主要通过标准文档流。

　　　　3.使用hover和display属性实现鼠标移动至父元素，子元素出现或消失

　　　　　　

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

            .father1{

                width: 100PX;

                height: 100PX;

                background-color: red;

            }

            .father2{

                width: 200PX;

                height: 200PX;

                background-color: green;

                display: none;

            }

            .father1:hover .father2{

                display: block;

            }

    </style>

</head>

<body>

    <div class="father1">

        <div class="father2">

        </div>

    </div>

</body>

</html>

　　　　　　display：none；隐藏作用，不占用位置。

　　　　　　visibility：hidden；隐藏作用，占用位置。要想不占用位置，用height=0，作用相当于设置display：none。

　　　4.对浮动元素的字围效果的理解：

　　　　1） 浮动的脱标，只是脱离文档空间（块空间），对行框空间（文字内容撑开的空间）还是有影响，实际上是浮动元素和非浮动元素共享父级的行框空间。

　　　　2） 绝对定位的脱标，是彻彻底底的脱标，两个空间都脱离了。

　　　5.清除浮动，实际上是清除浮动产生的影响，使得他重新占据空间。清除，浮动元素的父容器“塌陷”。

　　　

哪些情况会发生包裹？

比如行内框元素span包含文字

比如没有设置宽度和高度的一个浮动div块

比如没有设置宽度和高度的一个设置了display:inline的div

比如设置了display:inline-block的a标签

比如设置了overflow:hidden的元素

比如设置了position:absolute绝对定位的元素

它们的尺寸就由包容的元素决定

也就是说具有包裹性的有6种，行内框，浮动，display:inline-block的行内框，display:inline的块框，overflow:hidden，position:absolute

　　　　　　　

python全栈开发day39-CSS继承性和层叠性、权重问题、盒模型和其属性、文本级标签和块级标签、浮动的更多相关文章

  1. Python全栈开发：css引入方式

    css的四种引入方式: 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. <p style="color: red;backgr ...

  2. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  3. python 全栈开发，Day99(作业讲解,DRF版本,DRF分页,DRF序列化进阶)

    昨日内容回顾 1. 为什么要做前后端分离? - 前后端交给不同的人来编写,职责划分明确. - API (IOS,安卓,PC,微信小程序...) - vue.js等框架编写前端时,会比之前写jQuery ...

  4. python全栈开发目录

    python全栈开发目录 Linux系列 python基础 前端~HTML~CSS~JavaScript~JQuery~Vue web框架们~Django~Flask~Tornado 数据库们~MyS ...

  5. Python全栈开发相关课程

    Python全栈开发 Python入门 Python安装 Pycharm安装.激活.使用 Python基础 Python语法 Python数据类型 Python进阶 面向对象 网络编程 并发编程 数据 ...

  6. Python 全栈开发【第0篇】：目录

    Python 全栈开发[第0篇]:目录   第一阶段:Python 开发入门 Python 全栈开发[第一篇]:计算机原理&Linux系统入门 Python 全栈开发[第二篇]:Python基 ...

  7. Python全栈开发【面向对象进阶】

    Python全栈开发[面向对象进阶] 本节内容: isinstance(obj,cls)和issubclass(sub,super) 反射 __setattr__,__delattr__,__geta ...

  8. Python全栈开发【面向对象】

    Python全栈开发[面向对象] 本节内容: 三大编程范式 面向对象设计与面向对象编程 类和对象 静态属性.类方法.静态方法 类组合 继承 多态 封装 三大编程范式 三大编程范式: 1.面向过程编程 ...

  9. Python全栈开发【模块】

    Python全栈开发[模块] 本节内容: 模块介绍 time random os sys json & picle shelve XML hashlib ConfigParser loggin ...

  10. Python全栈开发【基础四】

    Python全栈开发[基础四] 本节内容: 匿名函数(lambda) 函数式编程(map,filter,reduce) 文件处理 迭代器 三元表达式 列表解析与生成器表达式 生成器 匿名函数 lamb ...

随机推荐

  1. 开源项目练习EF+jQueryUI前后端分离设计

    最近大家流行把项目开源,我也来玩玩.只是开源公司项目不好,小弟只好从公司项目经验上另外弄出一套练习开源给大家. 这个项目可以做简单的团队任务系统(做一些简单的任务分配,没经过严格测试.功能单一别喷啊, ...

  2. JavaScript之DOM概念

    一.DOM概念 1.DOM是什么? 1.1 起源.DOM起源于Netscape与Microsoft 公司的DHTML(动态HTML). 1.2 名词解释.Document Object Model,文 ...

  3. luogu P1081 开车旅行

    传送门 这题的暴力做法显然是照题意模拟,从每个点出发暴力跳.而这个暴跳显然是可以倍增优化的,就是预处理出从每个点,(一开始是A)往后跳\(2^k\)步,能到哪里,以及\(A\)和\(B\)的路程,然后 ...

  4. luogu P2900 [USACO08MAR]土地征用Land Acquisition

    写这道题时,预处理部分少打了等号,吓得我以为斜率优化错了或者被卡精了 mmp 首先有一个很明显的结论(逃),就是一个土地如果长(\(x\))与宽(\(y\))都比另一个土地小,那么这个土地一定可以跟那 ...

  5. 一分钟了解contextlib模块

    cobtextlib模块用于简化上下文管理器,其内置装饰漆@contextmanager,我们通过编写一个被contextmanager装饰的generator来简化上下文管理. from conte ...

  6. F - 回转寿司 （权值线段树）

    题目链接:https://cn.vjudge.net/contest/281960#problem/F 题目大意:中文题目 具体思路:权值线段树,我们每次寻找的是满足 (i<j)   L< ...

  7. tidb 架构 ~Tidb学习系列(5)

    一 简介:今天我们继续学习tidb的增量传输 二 说明: tidb高度兼容mysql,可以仿照mysql的主从同步复制机制实现mysql->tidb的增量传输 三 实验: 1 下载tidb官方工 ...

  8. CMake 实践教程

    本篇博客是根据 <<CMake Practice>> 一文编写, 目的有三: 其一: 提取出其中的精要部分; 其二: 对其中不易理解的地方进行简要说明; 其三: 方便后续查找复 ...

  9. 【windows核心编程】系统消息与自定义钩子（Hook）使用

    一.HOOk Hook是程序设计中最为灵活多变的技巧之一,在windows下,Hook有两种含义: 1.系统提供的消息Hook机制 2.自定义的Hook编程技巧 其中,由系统提供的消息钩子机制是由一系 ...

  10. 存储器结构、cache、DMA架构分析--【原创】

    存储器的层次结构       高速缓冲存储器  cache   读cache操作     cache如果包含数据就直接从cache中读出来,因为cache速度要比内存快 如果没有包含的话,就从内存中找 ...