python全栈开发 * 继承性 层叠性 盒模型 标准文档流 * 180809
---恢复内容开始---
一继承性
1.继承: 给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。
2. 可继承: color 、 font-*(size)、 text-*(decoration:underline)、line-*(height) 行高 等可以继承(主要是文本级的标签元素) (a比较特殊)
3.不可继承 :但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。
二.层叠性
层叠性 : 权重大的标签覆盖掉了权重小的标签 (数 id选择器 类选择器 标签选择器各自的数量)
1.针对于选中的标签谁权重大显示睡的属性;
简易版
/*1 0 0 */显示红色 #box{ color: red; } /*0 1 0*/ .container{ color: yellow; } /*0 0 1*/ p{ color: purple; }
复杂版
1 <div id='box1' class="wrap1"> 2 <div id="box2" class="wrap2"> 3 <div id="box3" class="wrap3"> 4 <p>再来猜猜我是什么颜色？</p> 5 </div> 6 </div> 7 </div> #box1 #box2 p{ color: yellow; } #box2 .wrap3 p{ color: red; } div div #box3 p{ color: purple; } div.wrap1 div.wrap2 div.wrap3 p{ color: blue; }
2.如果权重一样大显示以后设置的属性
1 #box2 .wrap3 p{ 2 color: yellow; 3 } 4 5 #box1 .wrap2 p{ 6 color: red; 7 }
3.继承下来的属性权重为0,没资格和选中的标签对比.
#box1 #box2 .wrap3{ color: red; } #box2 .wrap3 p{ color: green; }
4.如果权重都为0,谁描述的近,(就是选中到最内层的距离越近) 显示谁的属性.(就近原则)
#box1 #box2 .wrap3{ color: red; } .wrap1 #box2{ color: green; }
5.如果权重为0,描述一样近,回归原始状态,继续数权重.
总结:
1.先看标签元素有没有被选中，如果选中了，就数数 （id,class,标签的数量） 谁的权重大 就显示谁的属性。权重一样大，后来者居上
2.如果没有被选中标签元素，权重为0。
如果属性都是被继承下来的 权重都是0 。权重都是0:"就近原则" ： 谁描述的近，就显示谁的属性
补充:
!important 的使用。
！important:设置权重为无限大
!important 不影响继承来的权重，只影响选中的元素。不要随便使用!important,因为使用它会影响页面的布局
三.盒模型:(box model)
(一).定义
"box model"这一术语是用来设计和布局时使用，然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。
(二).类型: 标准模型(重点) 和 IE 模型
(三) 盒模型示意图:
(四).盒模型的属性(标准模型)
1.width 内容的宽度
2.height 内容的高度
3.padding: 内边框 边框到内容的距离 (描述父子盒子的关系)
padding: (一个值) 设置上下左右
padding: (两个值) 第一个值是上下宽度,第二个值是左右距离
padding: (三个值) 第一个是上方的宽度,第二个是左右的值,第三个是下方的值
padding: (四个值) 分别指代上右下左的值(顺时针)
4.border :边框,就是指盒子的边框
(1))三个要素:
5px: 边框的粗细
solid: 线性样式
注意
color: 颜色.
none (0) 指消除边框
如果颜色不写，默认是黑色。如果粗细不写，不显示边框。如果只写线性样式，默认的有上下左右 3px的宽度,实体样式，并且黑色的边框。
(2)写法
border-width : 3px
border-style : solid (dotted, double双下划,dashed虚线)
border-color : red
(3)按方向划分
border-top-width: 10px; border-top-color: red; border-top-style: solid; border-right-width: 10px; border-right-color: red; border-right-style: solid; border-bottom-width: 10px; border-bottom-color: red; border-bottom-style: solid; border-left-width: 10px; border-left-color: red; border-left-style:solid;
上面12条语句，相当于 bordr: 10px solid red;
另外一种写法:
border-top: 10px solid red; border-right: 10px solid red; border-bottom: 10px solid red; border-left: 10pxb solid red;
(4).用border 来制作小三角
div{ width: 0; height: 0; border-bottom: 20px solid red; border-left: 20px solid transparent; border-right: 20px solid transparent; }
5.margin 外边距,盒子边框到最近盒子的距离. (描述兄弟盒子的关系)
(1).margin塌陷问题: (垂直方向 解决办法: 只设置一个即可)
当给两个标准流下兄弟盒子 设置垂直方向上的margin时，那么以较大的为准，那么我们称这种现象叫塌陷 .
当我们给两个标准流下的兄弟盒子设置浮动之后，就不会出现margin塌陷的问题
(2)margin : 0 auto
当一个div元素设置margin：0 auto;时就会居中盒子，那我们知道margin:0 auto;表示上下外边距离为0，左右为auto的距离，那么auto是什么意思呢？
设置margin-left:auto；我们发现盒子尽可能大的右边有很大的距离，没有什么意义。当设置margin-right:auto；我们发现盒子尽可能大的左边有很大的距离。当两条语句并存的时候，我们发现盒子尽可能大的左右两边有很大的距离。此时我们就发现盒子居中了。
使用margin：0 auto;注意点
1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center;
2.只有标准流下的盒子 才能使用margin:0 auto (当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了)
3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center
总结:善于使用父亲的padding,而不是margin
标准流下的盒子;
父子间调整位置使用padding
margin的塌陷要避免,只设置一个方向
实现如图效果
坑 :
因为父亲没有border，那么儿子margin-top实际上踹的是“流” 踹的是行,所以父亲掉下来了，一旦给父亲一个border发现就好了。
解决方案:
我们不可能在页面中无缘无故的去给盒子加一个border，所以此时的解决方案只有一种。就是使用父亲的padding。让子盒子挤下来。
四.标准文档流
1.宏观:
宏观的将，我们的web页面和ps等设计软件有本质的区别，web 网页的制作，是个“流”，从上而下 ，像 “织毛衣”。而设计软件 ，想往哪里画东西，就去哪里画
2.微观现象
(1)空白折叠现象
个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙，如果在一行内写img标签，就解决了这个问题，但是我们不会这样去写我们的html结构。这种现象称为空白折叠现象。
(2)高矮不齐,底边对齐
文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐
(3)自动换行,一行写不满,换行写
如果在一行内写文字，文字过多，那么浏览器会自动换行去显示我们的文字。
五.浮动元素 对行内元素和块元素的影响:
1.如果标准流下的标签浮动,定位(绝对定位,固定定位)了,不区分是行内还是块级元素
可以任意的设置宽高.
2.浮动对块级元素的影响,像把块元素转化成行内元素.
3.浮动不做压盖现象.
---恢复内容结束---
