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 模型

(三) 盒模型示意图:

python全栈开发   * 继承性 层叠性  盒模型 标准文档流   *    180809

(四).盒模型的属性(标准模型)

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的塌陷要避免,只设置一个方向

实现如图效果 

python全栈开发   * 继承性 层叠性  盒模型 标准文档流   *    180809

坑 :

  因为父亲没有border,那么儿子margin-top实际上踹的是“流” 踹的是行,所以父亲掉下来了,一旦给父亲一个border发现就好了。

解决方案:

  我们不可能在页面中无缘无故的去给盒子加一个border,所以此时的解决方案只有一种。就是使用父亲的padding。让子盒子挤下来。

四.标准文档流

1.宏观:

  宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”。而设计软件 ,想往哪里画东西,就去哪里画

2.微观现象

(1)空白折叠现象

  个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙,如果在一行内写img标签,就解决了这个问题,但是我们不会这样去写我们的html结构。这种现象称为空白折叠现象。

(2)高矮不齐,底边对齐

  文字还有图片大小不一,都会让我们页面的元素出现高矮不齐的现象,但是在浏览器查看我们的页面总会发现底边对齐

(3)自动换行,一行写不满,换行写

  如果在一行内写文字,文字过多,那么浏览器会自动换行去显示我们的文字。

五.浮动元素 对行内元素和块元素的影响:

  1.如果标准流下的标签浮动,定位(绝对定位,固定定位)了,不区分是行内还是块级元素

  可以任意的设置宽高.

  2.浮动对块级元素的影响,像把块元素转化成行内元素.

  3.浮动不做压盖现象.

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

上一篇:zabbix安装


下一篇:SQLServer 2008中SQL增强之三 Merge(在一条语句中使用