一、上次内容回顾

　　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. 基于Redisson实现分布式锁

    前言 最近开发了几个微服务上线了,发现定时任务执行了很多次,查看rancher发现这几个微服务都是多实例的,也就是说定时任务执行了多次,恰好所用框架中使用的是Redisson, 正好记录下使用Redi ...

  2. Javaweb学习笔记——（四）——————JavaScript基础&DOM目录

    1.案例一:在末尾添加节点 第一个:获取到ul标签 第二部:创建li标签 document.createElement("标签名称")方法 第三步:创建文本 document.cr ...

  3. 理解django框架中的MTV与MVC模式

    1．Models:一个抽象层,用来构建和操作你的web应用中的数据,模型是你的数据的唯一的.权威的信息源.它包含你所储存数据的必要字段和行为.通常,每个模型对应数据库中唯一的一张表. from dja ...

  4. MGR架构 ~ MGR+proxysql(2)

    一 简介: 上篇环境已经搭建完成,我们开始进行测试 二 工具和环境: sysbench ,mgr+proxysql 三 测试方式: sysbench+oltp.lua脚本 四 模拟故障 1 并发环境观 ...

  5. 深入剖析ThreadLocal实现原理以及内存泄漏问题

    关于ThreadLocalMap<ThreadLocal, Object>弱引用问题: 当线程没有结束,但是ThreadLocal已经被回收,则可能导致线程中存在ThreadLocalMa ...

  6. 20165230田坤烨《网络对抗》Exp1 PC平台逆向破解

    实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包含另一个代码片段,getShe ...

  7. Jetson tk1 hash sum mismatch

    sudo apt-get update遭遇Hash Sum Mismatch 修改DNS服务器地址: sudo gedit /etc/resolv.conf 解决办法: 在装有goagent的情况下: ...

  8. High level GPU programming in C++

    https://github.com/prem30488/C2CUDATranslator http://www.training.prace-ri.eu/uploads/tx_pracetmo/GP ...

  9. windows2008r2系统破解登录密码方法

    破解windows 2008 r2系统登录密码方法: 1.重启系统,使用windows2008r2安装光盘引导 按住shift+f10 2.切换到d:windows\system32目录(使用cmd. ...

  10. 转载：abstract的方法是否可同时是static,是否可同时是native，是否可同时是synchronized?

    原文:http://blog.csdn.net/fhm727/article/details/5222965 1.abstract与static (what) abstract:用来声明抽象方法,抽象 ...