06_CSS入门和高级技巧(4)

复习

  • CSS : 负责样式层,层叠式样式表cascading style sheet。CSS2.1,最新版本CSS3。

  • CSS选择器: 选择哪些元素加样式。基本选择3种:标签p、id选择器#id、class选择器.;高级选择器4种:后代选择器div p 、交集选择器div.haha 、并集选择器div,p 、通配符*

id选择器:全页面id唯一;

class选择器:同一个标签可以带多个class:

class选择器不要求页面唯一


  • 继承性:
    哪些属性能继承:color、font-、text-、line-开头的。
    不能继承的:background-color、盒模型的属性、浮动、定位
body{
   font-size:12px;
}
  • 层叠性:
    遇见冲突,听谁的。有一个非常严密的图。!important提升权重,要知道!important能提升什么,不能提升什么?比如不能影响就近原则:离得近的就是近的,远的写!important没用;不能把继承来的提升权重:选中了的就是选中了的,继承来的!important也无法干掉选中了的。

  • 文本属性:

font-weight:bold;
font-weight:700;
font-style:italic;
text-decoration:underline;
font-size:12px;
line-height:24px;
font-family:”Consolas”,”Microsoft Yahei”,”SimSun”;
font:12px/24px ”Consolas”,”Microsoft Yahei”,”SimSun”;
  • 盒模型
width:200px;   /*盒子内容的宽度*/
height:200px;  /*盒子内容的高度*/
padding:10px;  /*内边距*/
border:1px solid red; 
margin:40px;

我们在这里补充强调一下:padding区域有背景颜色;并且现在的知识水平,你不能给padding
区域单独设置颜色;
padding: 10px 20px 30px 40px;
上、右、下、左

padding:10px 20px 30px;
上、左右、下

边框的三要素:

border-width:1px;
border-style:solid;
border-color:red;

还能继续拆:
border-top-style:dashed;

三要素的写法可以上右下左:
border-width:1px 2px 3px 4px;

  • 浮动:我们还没有科学的介绍,一些性质还不知道,没关系作业已经能做了。因为浮动是干嘛的我们已经知道了:制作并排的。

标准文档流中元素分为两种:
block-level : 能够设置宽高、不能并排,比如div、h、p、li、dt、dd
inline-level: 不能设置宽高、能并排,比如span、a、b、u、i
浮动,就能让元素又能并排,又能设置宽高。

深入了解浮动的性质

1.浮动的元素脱离标准流,没有标准流的行块之分了

脱离标准流一共就3个方法:
浮动:
float:left;
绝对定位:
position:absolute;
固定定位:
position:fixed;

浮动的元素已经脱离了标准流,所以没有inline、block之分了。

span在标准流中一个经典的行内元素,但是浮动了,就可以不转块直接设置宽度、高度。

1

    .no1{
        float: left;
        width: 300px;
        height: 50px;
        background-color: orange;
    }

div在标准流中是一个经典的块级元素,不设置宽度在标准流中是自动撑满父亲的width。但是浮动了,就不自动撑满了,而是自动收缩了,收缩为内部文字的大小了:


浮动了,就不自动撑满

2.依次贴边

左浮动:
父盒子的左边框内部 ← 老1 ← 老2 ← 老3 ← 老4

如果之前的兄弟已经不足以容纳自己,比如老4没有足够的空间并排了,那么将依次寻找老3、老2、老1、父亲的边框去贴:

2.2 依次贴边
左浮动:

父盒子的左边框内部 ← 老1 ← 老2 ← 老3 ← 老4

如果之前的兄弟已经不足以容纳自己,比如老4没有足够的空间并排了,那么将依次寻找老3、老2、老1、父亲的边框去贴:


贴边

但是不钻:


不贴

3.竖直方向上的margin塌陷现象消失

margin塌陷现象消失

margin塌陷是标准流的性质,因为浮动脱标了,就没有这个事儿了。

4.让出了标准流

→ 浮动
→ 没有浮动
让出了标准流

注意,这个性质没啥用,工作中制作“压盖”使用定位,而不是用这个浮动的小技巧

橙色盒子浮动了,让出了标准流的位置,标准流的光标还在页面左上角,所以蓝色盒子就渲染在左上角,被橙色盒子压住了。

5.字围

字围

清除浮动

1.父亲不能被浮动的儿子撑出高

清除浮动

下面的代码,no1、no2都浮动了,box就不能被儿子撑出高度:

因为父亲只能被标准流的元素撑高。

2.治这个病的一个偏方

有一个属性叫做
overflow:hidden;
能够解决事情。
现在先来学习overflow:hidden;的本意是什么

overflow:hidden

overflow是英语“溢出”的意思;hidden就是隐藏的意思。

这个属性的意思,就是让溢出边框的内容隐藏。


溢出边框

就如同橘子皮就是橘子皮,但是我们发现可以治感冒,就是世界上存在很多这样的事情,八竿子打不着的事儿,居然有联系。
overflow:hidden;是用来隐藏掉溢出边框的内容的,是用来变魔术的。但是我们发现,overflow:hidden;有神奇的别的用处,就是能够让父亲认识自己脱标的儿子,能够让父亲被自己脱标的儿子撑出高度。

→不能被撑出高了,解决办法: overflow:hidden;

→ 脱标了

→ 脱标了
overflow:hidden

3.有高度的盒子能够管住自己内部的浮动元素

有高度的盒子

有高度的盒子,能够管住自己的内部的浮动元素,不会影响别人内部的浮动元素,也不会受别人影响。

1

2

3

4

1

2

3

4.清除浮动方法1:clear:both;

我们发现,有高度的盒子可以管住自己的儿子,但是如果父盒子没有高度,那么序列就乱套了,第二个序列就去追随第一个序列了:


clear:both

解决办法挺简单,就是给后面的盒子加上
clear:both;

clear就是清除意思,它的值可以是:
clear:left; 表示清除左浮动带来的影响
clear:right;表示清除右浮动带来的影响
clear:both;表示清除所有浮动带来的影响

clear:both

这个东西不好用,原因是:

  • box还是没有高
  • margin失效

5.清除浮动方法2:隔墙

隔墙法是非常常用的,在网页中两个非常大的部分,我们总希望之间隔一堵墙,把两部分内部的浮动都关在里面,不要相互影响,小技巧就是margin依旧失效,可以用墙的高度来模拟间隔。

1

2

3

4

1

2

3

盒子没有高度

margin虽然失效,但是可以用小技巧来弥补,可以用墙的高来当做间隔。
但是盒子依然没有高。

6.清除浮动方法3:内墙法

cl就是clear:both;

1

2

3

4

1

2

3

内墙法

现在margin好用了,并且盒子也有高了,所有的事情都解决了!但是还是有问题:

HTML标签有点放置的太多了。这些标签页没有语义,看起来不爽。

7.清除浮动方法4:overflow:hidden;

→ 这个盒子没高,就写上overflow:hidden;

1

2

3

4

→ 这个盒子没高,就写上overflow:hidden;

1

2

3

总结:记住,清除浮动的方法有很多,但是很多都是在面试中有意义。工作中:

  • 我们总喜欢给内部有浮动的父盒子加上overflow:hidden;
  • 我们总喜欢在两个大部分之间隔外墙

你可能感兴趣的:(06_CSS入门和高级技巧(4))