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.浮动不做压盖现象.

---恢复内容结束---