浮动
浮动的元素没有块级一说,原来多大浮起来就是多大,
只要是涉及到页面的布局都是用float布局的
<style>
#d1 {
height: 200px;
width: 200px;
background-color: red;
float: left;/*向左浮动*/
}
#d2 {
height: 200px;
width: 200px;
background-color: blue;
float: right;/*向右浮动*/
}
浮动带来的影响
·解决浮动带来的影响
·溢出属性
·定位
·验证浮动和定位是否脱离文档流
·Z-index模态框
·透明度
·简单的博客园搭建
·JS编程前戏
解决浮动带来的影响
带来父标签塌陷的问题
解决浮动带来的影响的 推导步骤
1·自己增加一个div设置高度
2· 利用clear属性
d4 {
clear: left;/*该标签的左边(地面和空中)都不能有浮动的元素 clear:right即为右侧不能有,both即为两侧都不能有*/
}
3·通用的解决浮动带来影响的方法
在写html之前 先提前写好处理浮动带来印象的css代码
.clearfix:after{
content:'';
display:block;/*把一个空的内容设置为一个块级标签,块级标签自带独占一行的属性*/
clear:both;/*使标签两侧都不能存在浮动的标签*/
}
之后只要出现了标签塌陷的问题就给该塌陷的标签增加一个clearfix属性即可
验证浮动和定位是否脱离文档流
浮动
相对定位
绝对定位
固定定位
不脱离文档流
1·相对定位不脱离文档流
脱离文档流
1·浮动
2·绝对定位
3·固定定位
在学习H5与CSS的过程中,会遇到很多让人疑惑的地方,我的解决方法是实践与记录。先将问题暂时记在记事本,再在过程中不断试验并记录截图,方便后期总结对比。总结的过程中也会重新发现很多当初没有注意或没有深入思考的点,而正是这些点促成我们的进步。
继承和层叠
层叠是指当元素应用了多个样式规则,哪个规则优先应用。 如果你曾经遇到过无法理解为什么某些CSS似乎没有应用的情况,那可能是层叠没有运用好。 层叠与继承紧密相关,继承定义了子元素可以继承父元素的样式属性。 它还与特异性有关,不同的选择器具有不同的特异性,当有几个选择器可以应用于一个元素时,继承可以决定应用哪个规则。