糖尿病康复 > 继承性和层叠性权重盒模型 padding(内边距) border(边框) margin

继承性和层叠性权重盒模型 padding(内边距) border(边框) margin

时间：2019-09-28 23:52:14

内容总结:

1.继承性和层叠性继承性: 像一些文本的属性: color,text-*,line-*,font-* 这些属性是可以继承下来的2.层叠性就是权重 ,谁的权重大就显示谁的属性如何看权重:就是数数,选择器的个数 :id class 标签 1.针对于选中的标签(谁的权重大就会显示谁的属性)2.如果权重一样大,以 =>后设置的为准3.如果是继承下来的属性,它权重为0 ,跟**选中的标签**没有可比性4.如果权重都都为0,那么谁描述的近(就近原则),就显示谁的属性5.如果权重为0,描述的一样近的时候,回顾原始状态(数权重)

3.盒模型:属性:width :内容的宽度height: 内容的高度padding:内容到border的区域border:边框margin:标准流的标签 margin的使用通常是用在兄弟之间的标签坑: margin水平方向是没有任何问题垂直方向会出现'塌陷问题' 以设置最大的值为基准,以后在写网站标准流的盒子垂直方向只设置一个方向即可如果儿子踹他爹可以踹那么只需要给父加border,那么问题来了页面冗余,可能会影响界面的布局记住:前提是标准流下的盒子如果是父子之间,调整位置,那么使用paddingmargin的塌陷要避免,只设置一个方向浮动元素对行内元素和块元素的影响:(1)如果标准流下的标签浮动,定位(绝对定位,固定定位)了不区分是行内还是块级元素可以任意的设置宽高(2)浮动对块元素的影响,像把块元素转化成行内元素*************浮动不做压盖现象*****************

07-css的继承性和层叠性

css有两大特性：继承性和层叠性

继承性

面向对象语言都会存在继承的概念，在面向对象语言中，继承的特点：继承了父类的属性和方法。那么我们现在主要研究css，css就是在设置属性的。不会牵扯到方法的层面。

继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。

记住：有一些属性是可以继承下来：color、font-*、text-*、line-*。主要是文本级的标签元素。

但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="./reset.css"><style>/**{padding: 0;margin: 0;}ul{list-style: none;}a{text-decoration: none;}*/.box{/*width: 420px;*/height: 50px;background-color: purple;}.box ul{/*width: 100%;*/height: 50px;}.box ul li{/*浮动的标签不区分块还是行内标签,浮动的标签可以任意的设置宽高*//*background-color: red;*/float: left;/*width: 70px;*/height: 50px;/*像一些字体属性是可以继承下来: text-*,color,font-**/font-size: 14px;color: green;/*文本水平居中*/text-align: center;/*盒子水平居中*//*margin: 0 auto;*//*行高 == 盒子的高度实现文本垂直居中*/line-height: 50px;margin: 0 10px;/*cursor: pointer;*/}.box ul li a{color: green;height: 50px;display: block;}</style></head><body><div class="box"><ul><li><span>秒杀啊啥的当</span></li><li><a href="#">优惠券抠脚大汉就看得见肯定会</a></li><li><a href="#">PLUS会员</a></li><li><a href="#">闪购</a></li><li><a href="#">拍卖</a></li><li><a href="#">京东服饰</a></li></ul></div></body></html>

列表浮动

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>继承性</title><style>.father{width: 100px;height: 100px;background-color: yellow;color: red;line-height: 100px;text-align: center;font-size: 20px;text-decoration: underline;}p{background-color: green;}</style></head><body><div class="father"><div class="child"><a href="#">alexsb</a></div></div></body></html>

继承

层叠性

层叠性：权重的标签覆盖掉了权重小的标签，说白了，就是被干掉了

权重：谁的权重大，浏览器就会显示谁的属性

谁的权重大？非常简单就是小学的数数。

数：id的数量 class的数量标签的数量，顺序不能乱

/*1 0 0 */显示红色#box{color: red; }/*0 1 0*/.container{color: yellow;}/*0 0 1*/p{color: purple;}

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>/*1 0 0*/#box1{color: red;}/*0 1 0*/.box{color: blue;}/*0 0 1*/p{color: green;}</style></head><body><p class="box" id="box1">猜猜我的颜色</p></body></html>

层叠1

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>/*2 1 1*/.wrap1 #box2 div p{color: green;}/*1 1 2*/#box1 .wrap2 div p{color: red;}/*#box1 #box2 #box3 p{}*/</style></head><body><div class="wrap1" id="box1"><div class="wrap2" id='box2'><div class="wrap3" id="box3"><p>猜猜我的颜色</p></div></div></div></body></html>

层叠加深

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>/* 1 1 2*/.wrap1 #box2 div p{color: green;}/*1 1 2*/#box1 .wrap2 div p{color: red;}</style></head><body><div class="wrap1" id="box1"><div class="wrap2" id='box2'><div class="wrap3" id="box3"><p>猜猜我的颜色</p></div></div></div></body></html>

层叠性2

是不是感觉明白了呢？好的，再给大家加深点难度。

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>

View Code

#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;}

View Code

好的。那么上面的这个案例大家是否懂了呢？那么接下来我们继续看案例

还是上面那个html结构，如果我设置以下css，会显示什么颜色呢。

1 #box2 .wrap3 p{2 color: yellow;3 }4 5 #box1 .wrap2 p{6 color: red;7 }

View Code

答案是红色的。结论：当权重一样的时候是以后来设置的属性为准，前提必须权重一样。‘后来者居上 ’。

Good,我们继续看下面的css，你来猜以下此时字什么颜色？

#box1 #box2 .wrap3{color: red;}#box2 .wrap3 p{color: green;}

View Code

答案是绿色。哈哈，是不是感觉快懵掉了。其实大家只要记住这点特性就可以。第一条css设置的属性值，是通过继承性设置成的红色，那么继承来的属性，它的权重为0。它没有资格跟我们下面选中的标签对比。

那大家猜想一下如果都是被继承来的属性，那么字会显示什么颜色呢？

#box1 #box2 .wrap3{color: red;}.wrap1 #box2{color: green;}

小案例证明：权重都是0:那么就是"就近原则" ：谁描述的近，就显示谁的属性。所谓描述的近，就是选中到最内层的距离越近。

小总结一下：

总结：

1.先看标签元素有没有被选中，如果选中了，就数数（id,class,标签的数量）谁的权重大就显示谁的属性。权重一样大，后来者居上

2.如果没有被选中标签元素，权重为0。

如果属性都是被继承下来的权重都是0 。权重都是0:"就近原则" ：谁描述的近，就显示谁的属性

08-层叠性权重相同处理

直接上代码，看效果！

第一种现象：当权重相同时，以后来设置的属性为准，前提一定要权重相同

#box2 .wrap3 p{color: yellow;}#box1 .wrap2 p{color: red;}

我们会发现此时显示的是红色的。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>/*继承性权重为0*/#box1{color: yellow;}.wrap1 .wrap2{color: red;}</style></head><body><div class="wrap1" id="box1"><div class="wrap2" id='box2'><div class="wrap3" id="box3"><p>猜猜我的颜色</p></div></div></div></body></html>

权重深入1

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>/*继承性权重为0*/.wrap1 #box2 div{color: yellow;}#box1 .wrap2 div{color: red;}</style></head><body><div class="wrap1" id="box1"><div class="wrap2" id='box2'><div class="wrap3" id="box3"><p>猜猜我的颜色</p></div></div></div></body></html>

权重深入2

第二种现象：第一个选择器没有选中内层标签，那么它是通过继承来设置的属性，那么它的权重为0。第二个选择器选中了内层标签，有权重。

所以继承来的元素权重为0。跟选中的元素没有可比性。

#box1 #box2 .wrap3{color: red;}#box2 .wrap3 p{color: green;}

我们会发现此时显示的是绿色的。

第三种现象：如果都是继承来的属性，谁描述的近，显示谁的属性。'就近原则'

#box1 #box2 .wrap3{color: red;}.wrap1 #box2{color: green;}

!important 的使用。

！important:设置权重为无限大

!important 不影响继承来的权重，只影响选中的元素。不要随便使用!important,因为使用它会影响页面的布局

09-盒模型

盒模型

在CSS中，"box model"这一术语是用来设计和布局时使用，然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。

盒模型有两种：标准模型和IE模型。我们在这里重点讲标准模型。

盒模型示意图

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>.box{width: 200px;height: 200px;background-color: red;padding: 20px;border: 5px solid green;}</style></head><body><div class="box"></div></body></html>

盒模型

盒模型的属性

width：内容的宽度

height: 内容的高度

padding：内边距，边框到内容的距离

border: 边框，就是指的盒子的宽度

margin：外边距，盒子边框到附近最近盒子的距离

如果让你做一个宽高402*402的盒子，您如何来设计呢？

答案有上万种，甚至上一种。

盒模型的计算

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>.box{width: 0;height: 0;background-color: red;padding: 150px; border: 1px solid green;}</style></head><body><div class="box"></div></body></html>

计算盒模型

如果一个盒子设置了padding，border，width，height，margin(咱们先不要设置margin，margin有坑，后面课程会讲解)

盒子的真实宽度=width+2*padding+2*border

盒子的真实宽度=height+2*padding+2*border

那么在这里要注意看了。标准盒模型，width不等于盒子真实的宽度。

另外如果要保持盒子真实的宽度，那么加padding就一定要减width，减padding就一定要加width。真实高度一样设置。

10-padding(内边距)

padding

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>.box{width: 80px;height: 70px;background-color: purple;/*padding-left: 20px;padding-top: 10px;*/color: green;border: 1px solid red;cursor: pointer;/**/padding: 10px;/*两个值: 上下左右*/padding: 10px 20px;/*三个值: 上左右下*/padding: 10px 20px 30px;/*上右下左*/padding: 10px 20px 30px 40px;}</style></head><body><div class="box">李宁</div></body></html>

padding

padding：就是内边距的意思，它是边框到内容之间的距离

另外padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域

padding的设置

padding有四个方向，分别描述4个方向的padding。

描述的方法有两种

1、写小属性,分别设置不同方向的padding

padding-top: 30px;padding-right: 30px;padding-bottom: 30px;padding-left: 30px;

2、写综合属性，用空格隔开

/*上右下左*/padding: 20px 30px 40px 50px ;/*上左右下*/padding: 20px 30px 40px;/* 上下左右*/padding: 20px 30px;/*上下左右*/padding: 20px;

一些标签默认有padding

比如ul标签，有默认的padding-left值。

那么我们一般在做站的时候，是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置。

我们现在初学可以使用通配符选择器

*{padding:0;margin:0; }

But，这种方法效率不高。

所以我们要使用并集选择器来选中页面中应有的标签（不同背，因为有人已经给咱们写好了这些清除默认的样式表，reset.css）

/eric/tools/css/reset/

11-border(边框)

边框

border:边框的意思，描述盒子的边框

边框有三个要素：粗细线性样式颜色

border: solid

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>.box{width: 200px;height: 200px;background-color: blue;/*border: 1px solid red;*//*一般用这个属性干掉按钮或者表单控件的默认边框*//*border: none;*//*border-width: 5px 1px 5px 1px;border-style: solid dotted double dashed;border-color: red;*/border-top: 1px solid red;}</style></head><body><div class="box"></div></body></html>

border

如果颜色不写，默认是黑色。如果粗细不写，不显示边框。如果只写线性样式，默认的有上下左右 3px的宽度,实体样式，并且黑色的边框。

按照3要素来写border

border-width: 3px;border-style: solid;border-color: red;/*border-width: 5px 10px;border-style: solid dotted double dashed;border-color: red green yellow;*/

按照方向划分

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;

border:none；

border：0；

表示border没有设置样式。

使用border来制作小三角

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.box{width: 0px;height: 0px;/*background-color:red;*/border-left: 10px solid green;border-top: 10px solid transparent;border-bottom: 10px solid transparent; /*color: transparent;*/}</style></head><body><div class="box"></div></body></html>

制作三角

/*小三角箭头指向下方*/div{width: 0;height: 0;border-bottom: 20px solid red;border-left: 20px solid transparent;border-right: 20px solid transparent;}

12-简单认识下margin

margin

margin：外边距的意思。表示边框到最近盒子的距离。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.box{width: 300px;height: 300px;background-color: red;border: 1px solid green;/*border: 0px solid transparent;*//*padding-top: 50px;*/}.child{width: 200px;height: 200px;background-color: yellow;/*margin: 0 auto;*/margin-top: 50px;}</style></head><body><div class="box"><div class="child"></div></div></body></html>

父子margin

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title> </title><style>div{width: 200px;height: 200px;}div.a{background-color: yellow;margin-bottom: 100px;}div.w{background-color: green;margin-top: 50px }</style></head><body><div class="box"><div class="a"></div><div class="w"></div></div></body></html>

塌陷问题

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style> .a{background-color: red;margin-right: 20px;}.w{background-color: green;margin-left: 20px;}</style></head><body><span class="a">alex</span><span class="w">wusir</span></body></html>

View Code

/*表示四个方向的外边距离为20px*/margin: 20px;/*表示盒子向下移动了30px*/margin-top: 30px;/*表示盒子向右移动了50px*/margin-left: 50px;margin-bottom: 100px;复制代码

13-标准文档流

什么是标准文档流

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

标准文档流下有哪些微观现象？

1.空白折叠现象

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

2.高矮不齐，底边对齐

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

3.自动换行，一行写不满，换行写

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

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>a{font-size: 30px;}</style></head><body><span>alex</span><img src="../day45/timg.jpg" alt=""><a href="#">百度一下</a></body></html>

View Code

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>a{width: 100px;height: 100px;background-color: red;/*display: block;*//*在一行内显示可以设置宽高*/display: inline-block;}</style></head><body><a href="#">百度一下</a><a href="#">百度一下</a></body></html>

display属性的使用

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>a{float: left;background-color: red;width: 100px;height: 100px;}</style></head><body><a href="#">百度一下</a><a href="#">百度一下</a></body></html>

浮动的元素不区分标准流的标签

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>div{float: left;background-color: red;width: 200px;height: 200px;}</style></head><body><div>alex</div><div>nvshen</div><img src="./logo16366.gif" alt=""> </body></html>

浮动元素对块级标签的影响