Web-9月14日随笔
—.Css层叠性质:
1.继承性(后代或子代继承父级元素的颜色,字体·,文本)
2.层叠性:层叠性是选择器的一种的能力
第一种情况:没有选择任何标签或者选择器起的名字(类),走继承性(如果有多个属性继承,就近原则)。
第二种情况:权重一样大,就近原则(后面的会把前面的覆盖掉); 谁的权重大就选谁。
二.
标准文档流(浏览器的排版是根据元素的特征,块/行级,从上往下,从左到右进行排版,这就是标准文档流。)
三.
浮动:float:left/right(左浮/右浮) 【浮动后的元素脱离标准文档流】 浮动还可以造成文字环绕的效果;
clear:both(浮动所带来的危害:撑不起父级高度了,所以得用clear:both)
清除浮动的三种方法:
1.直接给父级元素添加高度 2.给父级添加overflow-hidden(超出隐藏) 3.给浮动元素的后面添加一个空的div 添加样式为clear:both。
块级元素浮动:
范例: <!DOCTYPE html>
<html>
<head>
<meta charset="UFT-8">
<title>块级元素浮动效果</title>
【 <style>
.one{width:200px;
height:200px;
float:left }
.two{width:300px;
height:200px; } (效果:第二个隐藏在了第一个后面;
原因:因为块状元素都是独占一行,给第一个添加浮动后脱离了标准流,不受控制了。而第二个属于标准流,所以把它当成了第一位)】
</style>
</head>
<body>
<div class=“one”>(块状元素的特点:独占一行,自动换行,元素呈块状,可设宽高)
哈哈哈哈
</div>
<div class=“two”>
嘿嘿嘿嘿
</div>
</body>
</html>
行内元素浮动:
<!DOCTYPE html>
<html>
<head>
<meta charset="UFT-8">
<title>行内元素浮动</title>
<style>
.one{ width:“100px”
height:100px;
float:left }
.two { width:“100px”
height:100px;
float:left }【效果:给浮动后,行内元素有了宽高,能并排排列】
</style>
</head>
<body>
【<sapn class=“one”>哈哈哈</span>
<span class=“two”>嘿嘿嘿</span>】(行内元素特点:可以与其他元素在一行显示,不换行,不能设置宽高,根据内容的多少决定空间的大小)
</body>
</html>
四 : 1. visibility:hidden(隐藏)
2. disply:none(隐藏)
二者区别:第一个隐藏占据空间,第二个隐藏不占据空间。