一、上次内容回顾

　　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. castle动态代理的使用

    转自:https://blog.csdn.net/educast/article/details/6565447#动态代理的原理 原理其实很简单,就是在运行时生成新的对象,姑且叫做T,并使T继承自需要 ...

  2. SEO之robots.txt

    [关键词:robot.txt,sitemap,User-Agent,Disallow,Allow][声明:摘自Wikipedia] 1. 定义:robots.txt(统一小写)是一种存放于网站根目录下 ...

  3. 当WebView运行在特权进程时抛出安全异常，Hook方式解决方案（包含对Android 8.0的处理）

    1.问题起源报错语句是:java.lang.UnsupportedOperationException: For security reasons, WebView is not allowed in ...

  4. PP图和QQ图

     一. QQ图      分位数图示法(Quantile Quantile Plot,简称 Q-Q 图)       统计学里Q-Q图(Q代表分位数)是一个概率图,用图形的方式比较两个概率分布,把他们 ...

  5. IAR KEIL ECLIPSE使用JlinkScript文件进行调试

    转载自:https://wiki.segger.com/Using_J-Link_Script_Files Using J-Link Script Files     Contents [hide]  ...

  6. Linux 文件系统扩展属性【转】

    转自:https://blog.csdn.net/ganggexiongqi/article/details/7661024 扩展属性(xattrs)提供了一个机制用来将<键/值>对永久地 ...

  7. linux服务器last查看关机记录

    1.查看重启记录 last reboot命令 [root@test ~]# last reboot reboot system boot -.el6.x Mon May : - : (+:) rebo ...

  8. win7设置固定IP

    正文: 你必须知道你的路由器网关,一般是192.168.1.1(或192.168.0.1) 按传统的来:开始——控制面板——网络和共享中心——更改适配器设置.一般来讲,这里应该有两个图标,一个是有线网 ...

  9. Android用户界面开发：TabHost

    TabHost是整个Tab的容器,包括两部分,TabWidget和FrameLayout.TabWidget就是每个tab的标签,FrameLayout则是tab内容.TabHost的二种实现方式:第 ...

  10. js篇之对象数据属性与存取器属性

    在ECMAScript中,对象属性值可以用一个或两个方法代替,这两个方法就是getter和setter.由getter与与setter定义的属性叫做‘存取器属性’.当程序查询存取器属性的值时,js调用 ...