一、上次内容回顾

　　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. HTML5的manifest 本地离线缓存

    下面直接放测试代码: index.html <!DOCTYPE html> <html manifest="m.manifest"> <head> ...

  2. DotNetBar ButtonX添加下拉面板

    1. 2.在窗口上放一个控件 Control选择这个控件,即可,如果想让textBox下拉面板,需要使用textBoxDropDown,而不是textBoxX,DotNetBar的命名很奇怪.

  3. linux系统--磁盘管理命令（二）

    一.硬盘的分区模式 之前的硬盘分区模式为MBR 主分区不超过4个 单个分区容量最大为2TB 前面的分区模式就为MBR分区模式. 另一种分区模式为GPT 主分区个数限制:在GPT的分区表中最多可以支持1 ...

  4. pyqt5-布局控件

    在布局中添加控件用addWidght(),添加布局用addLayout() 垂直布局QVBoxLayout 需要导入  from PyQt5.QtWidgets import QVBoxLayout ...

  5. js 获取当前日期或者前、后N天yyyy-MM-dd的方法

    //js获取当前日期.当前日期前.后N天的标准年月日 //day=0为当前天,day=7为前7天,day=-7为当前日期的后7天 function getstartdate(day) {        ...

  6. Python(十) Python 中的 *args 和 **kwargs

    转载:团子的小窝 http://kodango.com/variable-arguments-in-python

  7. ssh Jetson tk1

    背景: 因为TK1要放到智能车上,不方便打开roscore和各个节点,因此需要PC远程控制. 方法: 在PC端用ssh命令登录: (1)命令sudo ssh tegra-ubuntu.local(te ...

  8. Django中全局Context处理器

    1.模板标签和模板变量 模板标签在{% %}中定义: {% if is_logged_in %} Thanks for logging in! {% else %} Please log in. {% ...

  9. git入门与实践【转】

    转自:http://www.cnblogs.com/shenhaocn/archive/2011/03/13/1982957.html 什么是版本控制 要了解什么是git,首先需要了解什么是版本控制( ...

  10. 所有Windows7下游戏的全屏问题

    Win键+R键,打开运行窗口,输入regedit 回车,这样就打开了注册表编辑器,然后,定位到以下位置:HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Control\ ...