一、上次内容回顾

　　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. MySQL数据库中.SQL文件的导出方式

    转自:http://tech.watchstor.com/management-117401.htm 在MySQL数据库中导入SQL文件是件很麻烦的事情,但是这是一项大家非常值得学习的技术,本文就从最 ...

  2. Linux 设置最大链接

    最大连接数 ulimit -SHn # 最大文件句柄数,最大打开文件数(等同最大连接数) ulimit -a # 查看 /etc/security/limits.conf # 进程最大打开文件数 # ...

  3. JavaScript之HTML5 data-* 自定义属性[HTML5标准 node.dataset.attributeName]

    在HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-前缀加上自定义的属性名,使用这样的结构可以进行数据存放. 使用data-*可以解决自定义属性混乱无管理的现状. ...

  4. [C++]栈区（栈）与堆区(类链表)[转/摘]

     一.预备知识—程序的内存分配   一个由C/C++编译的程序占用的内存分为以下几个部分    1.栈区(stack)—   由编译器自动分配释放   ,存放函数的参数值,局部变量的值等.其    操 ...

  5. linux相关设置

    mysql开机自启: [root@workstudio system]# systemctl enable mysqld

  6. Java并发编程--并发容器之Collections

    在JDK1.2之前同步容器类包括Vector.Hashtable,这两个容器通过内置锁synchronized保证了同步.后面的ArrayList.LinkedList.HashMap.LinkedH ...

  7. Python3 日期时间 相关模块(time(时间) / datatime(日期时间) / calendar(日历))

    Python3 日期时间 相关模块(time(时间) / datatime(日期时间) / calendar(日历)) 本文由 Luzhuo 编写,转发请保留该信息. 原文: http://blog. ...

  8. nodejs 数据库操作，消息的发送和接收，模拟同步

    var deasync = require('deasync'); //导入模板 var mysql=require('mysql'); var Stomp = require('stompjs'); ...

  9. springboot系列七：springboot 集成 MyBatis、事物配置及使用、druid 数据源、druid 监控使用

    一.MyBatis和druid简介 MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.M ...

  10. zabbix3.0.4导入中文模板后乱码问题处理

    通过yum安装方式部署了zabbix3.0.4监控服务器,配置过程中发现当导入的模板中有中文时,图中的中文会变成方块 如下图所示: 这个问题是由于zabbix的web端没有中文字库,我们最需要把中文字 ...