浮动、定位
来源:互联网 发布:贪吃飒淘宝店 编辑:程序博客网 时间:2024/06/04 19:03
盒模型
盒模型默认指块级元素;行内元素默认不能设置width、height、margin
行内元素==>块级元素: display:block
块级元素==>行内元素: display:inline
注意:
1. disply:inline-block
行内块元素
2. position:absolute|fixed
会将元素变为行内块
使用盒模型
创建浮动盒
可以使用float属性创建浮动盒(脱离文本流),浮动盒将元素的左边界或右边界移动到包含块或者另一个浮动盒的边界。
注意事项:
- 同级的一个元素浮动其他的元素也要浮动
- 浮动脱离文本流,父元素的宽、高不会被撑开
- 子元素浮动父元素一定要清除浮动
- 浮动的行内元素可以设置宽、高
示例:父元素不设置高、宽
<div class="content"> <div style="float: left;"></div> <div style="float: right;"></div></div>
浮动产生负作用
- 边框不能撑开
- 背景不能显示:如果父级设置了背景,而父级不能被撑开,所以导致不能显示。
- margin padding不能按设置值正常展示:
清除浮动方法
浮动元素的同级元素添加一个空标签
.clear{clear: both}<div class="clear"></div>
浮动元素的父级元素添加下述样式
overflow:hidden 或者 display:table
浮动元素的父级元素使用伪类属性(常用)
.clearfix:after{content:""; display:block; clear:both;}.clearfix{zoom: 1;}
通过上述三种方法的任意一种,可展示正常
创建布局
定位属性
注意:“left”、”top”、”right”、”bottom”以及”z-index”属性只有设置了定位(除static)才生效。
定位类型
<!-- 页面通用样式 --><style type="text/css"> .content { position: relative; width: 300px; height: 300px; border: 1px solid #000; color: #fff; } .content div{ width: 100px; height: 100px; border: 1px solid; text-align: center; line-height: 100px; }</style>
<!-- 定位样式 --><style> .static { position: static; background: red; } .relative { position: relative; top: 50px; left: 50px; background: black; } .absolute { position: absolute; top: 50px; left: 50px; background: blue; } .fixed { position: fixed; top: 50px; left: 50px; background: blue; }</style><!-- 页面结构 --><div id="content"></div><div id="content"> <div class="static">static-1</div> <div class="static">static-2</div> <div class="relative">relative</div> <div class="absolute">absolute</div> <div class="fixed">fixed</div></div>
相对定位(relative):相对于自己原位置进行偏移,在文本流中的位置依然存在,不脱离文档流;
绝对定位(absolute):对于position值不为static的第一位祖先元素来定位(未找到,则相对body元素),在正常流中的位置不在存在,脱离文档流;
固定定位(fixed):一直位于可视窗口的指定位置,不受滚动条影响,脱离文档流。
1 0
- 浮动、定位
- 浮动定位
- 浮动定位与清理浮动
- 浮动与定位,浮动定位(html5技术)
- 绝对定位 相对定位 浮动
- CSS 定位与浮动
- div+定位与浮动
- js浮动定位
- {{CSS}}浮动和定位
- 定位 与浮动
- css_day10---浮动+定位
- CSS定位之浮动
- css 定位 浮动
- 浮动与定位
- CSS定位与浮动
- CSS浮动与定位
- css3-定位和浮动
- CSS定位与浮动
- Zigzag逆扫描
- 《JS控制表格奇偶数行背景色变换》
- Hibernate之单表操作(二)
- ETC-省级密钥
- maven web spring-mvc
- 浮动、定位
- 枚举法——百钱买百鸡
- Codeforces Round #398 (Div. 2) B
- 136. Single Number
- Android实现页面左右切换
- 机器学习实战
- Mybatis 拦截器实现SQL性能监控配置
- 数据库:行存储、列存储
- windows配置PHP的Redis扩展