Web-9月14日随笔
Posted lovels
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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（隐藏）
二者区别：第一个隐藏占据空间，第二个隐藏不占据空间。
以上是关于Web-9月14日随笔的主要内容，如果未能解决你的问题，请参考以下文章