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

时间  2019-12-06 标签 06 css 入门 高级 技巧 4

复习

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

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

id选择器：全页面id惟一；面试

class选择器：同一个标签能够带多个class： <p class="”para1" spec”></p>性能

class选择器不要求页面惟一 <p class="”para1" spec”></p> <h3 class="”spec”"></h3>学习

  • 继承性： 哪些属性能继承：color、font-、text-、line-开头的。 不能继承的：background-color、盒模型的属性、浮动、定位
body{
   font-size:12px;
}

  • 层叠性： 碰见冲突，听谁的。有一个很是严密的图。!important提高权重，要知道!important能提高什么，不能提高什么？好比不能影响就近原则：离得近的就是近的，远的写!important没用；不能把继承来的提高权重：选中了的就是选中了的，继承来的!important也没法干掉选中了的。spa

  • 文本属性：3d

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; 上、右、下、左code

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

边框的三要素：blog

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在标准流中一个经典的行内元素，可是浮动了，就能够不转块直接设置宽度、高度。

<span class="no1">1</span>

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

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

2.依次贴边

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

若是以前的兄弟已经不足以容纳本身，好比老4没有足够的空间并排了，那么将依次寻找老三、老二、老一、父亲的边框去贴：

2.2 依次贴边 左浮动：

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

若是以前的兄弟已经不足以容纳本身，好比老4没有足够的空间并排了，那么将依次寻找老三、老二、老一、父亲的边框去贴： 贴边

可是不钻： 不贴

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

margin塌陷现象消失

margin塌陷是标准流的性质，由于浮动脱标了，就没有这个事儿了。

4.让出了标准流

<div class="box1"></div>  → 浮动
<div class="box2"></div> → 没有浮动

让出了标准流

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

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

5.字围

字围

清除浮动

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

清除浮动

下面的代码，no一、no2都浮动了，box就不能被儿子撑出高度：

<div class="box">
	<p class="no1"></p>
	<p class="no2"></p>
</div>

由于父亲只能被标准流的元素撑高。

2.治这个病的一个偏方

有一个属性叫作 overflow:hidden; 可以解决事情。 如今先来学习overflow:hidden;的本意是什么 overflow:hidden

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

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

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

<div class="box">  →不能被撑出高了，解决办法：  overflow:hidden;
	<p class="no1"></p>  → 脱标了
	<p class="no2"></p> → 脱标了
</div>

overflow:hidden

3.有高度的盒子可以管住本身内部的浮动元素

有高度的盒子

有高度的盒子，可以管住本身的内部的浮动元素，不会影响别人内部的浮动元素，也不会受别人影响。

<div class="box1">
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>4</p>
</div>
<div class="box2">
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

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

咱们发现，有高度的盒子能够管住本身的儿子，可是若是父盒子没有高度，那么序列就乱套了，第二个序列就去追随第一个序列了： clear:both

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

clear就是清除意思，它的值能够是： clear:left; 表示清除左浮动带来的影响 clear:right;表示清除右浮动带来的影响 clear:both；表示清除全部浮动带来的影响

clear:both

这个东西很差用，缘由是：

  • box仍是没有高
  • margin失效

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

隔墙法是很是经常使用的，在网页中两个很是大的部分，咱们总但愿之间隔一堵墙，把两部份内部的浮动都关在里面，不要相互影响，小技巧就是margin依旧失效，能够用墙的高度来模拟间隔。

<div class="box1">
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>4</p>
</div>
<div class="cl h20"></div>
<div class="box2">
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

盒子没有高度

margin虽然失效，可是能够用小技巧来弥补，能够用墙的高来当作间隔。 可是盒子依然没有高。

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

cl就是clear:both;

<div class="box1">
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>4</p>
	<div class="cl"></div>
</div>

<div class="box2">
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<div class="cl"></div>
</div>

内墙法

如今margin好用了，而且盒子也有高了，全部的事情都解决了！可是仍是有问题：

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

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

<div class="box1">  → 这个盒子没高，就写上overflow:hidden;
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>4</p>
</div>

<div class="box2">  → 这个盒子没高，就写上overflow:hidden;
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

总结：记住，清除浮动的方法有不少，可是不少都是在面试中有意义。工做中：

  • 咱们总喜欢给内部有浮动的父盒子加上overflow:hidden;
  • 咱们总喜欢在两个大部分之间隔外墙
<div class="header">
	
</div>
<div class="cl h18"></div>
<div class="content">
	
</div>
<div class="cl h18"></div>
<div class="footer">
	
</div>
联系我们 沪ICP备2021010478号-7