php元素浮动会产生哪些影响,元素浮动的影响与三列布局的实现原理——2019年9月4日22时30分...
一、元素浮动造成父元素高度折叠同一个块元素中，子级元素浮动，会造成附骥元素的高度折叠，包裹不住子级元素。
网页实际效果展示
消除子元素浮动的影响实例
html>
清除浮动的影响
.box1 {
width: 200px;
border: 5px dashed red;
}
.box2 {
width: inherit;
height: 200px;
background: lightcyan;
}
.box3 {
margin-top: 20px;
width: 200px;
border: 5px dashed red;
}
.box4 {
width: inherit;
height: 200px;
background: lightcyan;
float: left;
}
.clear {
clear: both;
}
.box5 {
width: 200px;
border: 5px dashed red;
overflow: hidden;
}
.box6 {
width: inherit;
height: 200px;
background: lightcyan;
float: left;
}
我是一个子块在没有浮动时候的样式。
解决方法
运行实例 »
点击 "运行实例" 按钮查看在线实例
二、相对定位相对定位是用 position: relative 属性设置，只是相对它原来。
网页实际效果展示
相对定位实例
html>
相对定位
.box1 {
width: 80px;
height: 80px;
background: lightcyan;
}
.box2 {
width: 80px;
height: 80px;
background: lightgoldenrodyellow;
}
.box3 {
width: 80px;
height: 80px;
background: lightgray;
}
.box4 {
width: 80px;
height: 80px;
background: lightgreen;
}
.box5 {
width: 80px;
height: 80px;
background: lightpink;
}
.box1 {
position: relative;
left: 80px;
}
.box3 {
position: relative;
left: 80px;
top: -80px;
}
.box4 {
position: relative;
left: 160px;
top: -160px;
}
.box5 {
position: relative;
left: 80px;
top: -160px;
}
上面的方块是通过相对定位，position: relative 属性进行放置的。
运行实例 »
点击 "运行实例" 按钮查看在线实例
三、绝对定位绝对定位脱离了文档流，所有必须要有参照物。如body，如定位父级就参照定位父级。
绝对定位网页实际效果展示
绝对定位实例
html>
绝对定位
.parent {
position: relative;
border: 1px dashed red;
width: 240px;
height: 240px;
}
.box1 {
width: 80px;
height: 80px;
background: lightcyan;
}
.box2 {
width: 80px;
height: 80px;
background: lightgoldenrodyellow;
}
.box3 {
width: 80px;
height: 80px;
background: lightgray;
}
.box4 {
width: 80px;
height: 80px;
background: lightgreen;
}
.box5 {
width: 80px;
height: 80px;
background: lightpink;
}
.box1 {
position: absolute;
left: 80px;
}
.box2 {
position: absolute;
top: 80px;
}
.box3 {
position: absolute;
left: 80px;
top: 80px;
}
.box4 {
position: absolute;
left: 160px;
top: 80px;
}
.box5 {
position: absolute;
left: 80px;
top: 160px;
}
上面的方块是通过绝对定位，position: absolute 属性进行放置的。
运行实例 »
点击 "运行实例" 按钮查看在线实例
四、固定定位固定定位是将某元素固定在页面中的特定位置，随固定条的拖动，依然在固定位置显示。用position: fixed 属性设置。
固定定位网页实际效果展示
固定定位实例
html>
固定定位
body {
height: 2000px;
}
.ads {
width: 300px;
height: 300px;
background: lightpink;
position: fixed;
top: 10px;
left: 0;
}
我是一个被固定的元素，不管鼠标怎么拖动，我都在用一个位置。
运行实例 »
点击 "运行实例" 按钮查看在线实例
四、用绝对定位实现三列布局利用绝对定位position：absolute 的属性设置网页成三列布局。
绝对定位三列布局网页实际效果展示
绝对定位实现三列布局实例
html>
绝对定位实现三列布局
.container {
width: 1000px;
margin: 0 auto;
}
.header,
.footer {
height: 60px;
background: lightskyblue;
}
.main {
background: lightgrey;
margin: 5px auto;
}
.left {
width: 200px;
height: 500px;
background: lightyellow;
}
.content {
min-height: 500px;
background: lightpink;
}
.right {
width: 200px;
height: 500px;
background: lightyellow;
}
.main {
position: relative;
}
.left {
position: absolute;
top: 0;
left: 0;
}
.right {
position: absolute;
top: 0;
right: 0;
}
.content {
margin: 0 200px;
}
我是用绝对定位position：absolute 属性设置的三列布局
我是用绝对定位position：absolute 属性设置的三列布局
我是用绝对定位position：absolute 属性设置的三列布局
运行实例 »
点击 "运行实例" 按钮查看在线实例
五、浮动实现三列布局利用浮动属性 float 来实现网页成三列布局。
浮动实现三列布局实际页面展示
浮动实现三列布局实例
html>
浮动实现三列布局
.container {
width: 1000px;
margin: 0 auto;
}
.header,
.footer {
height: 60px;
background: lightskyblue;
}
.main {
background: lightgrey;
margin: 5px auto;
overflow: hidden;
}
.left {
width: 200px;
height: 500px;
background: lightyellow;
}
.content {
min-height: 500px;
background: lightpink;
}
.right {
width: 200px;
height: 500px;
background: lightyellow;
}
.left {
float: left;
}
.right {
float: right;
}
.content {
float: left;
width: 600px;
}
我是通过float: left 来实现的布局
我是通过float 的属性来实现的
我是通过float: right 来实现的布局
运行实例 »
点击 "运行实例" 按钮查看在线实例
php元素浮动会产生哪些影响,元素浮动的影响与三列布局的实现原理——2019年9月4日22时30分...相关推荐
- WebAPI第一天学习总结—— DOM、获取元素、事件基础、操作元素、节点操作
Web API介绍 API的概念 API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访 ...
- php元素浮动会产生哪些影响,css浮动带来什么问题
css浮动带来的影响:1.由于浮动元素脱离了文档流,所以父元素的高度无法被撑开,影响了与父元素同级的元素:若没有给父元素设置高度,那么父元素就不会在显示屏上显示.2.浮动元素不再占用原文档流的位置,它 ...
- html盒子模型子元素怎么水平占满父元素_CSS盒子模型、溢出处理、浮动、高度坍塌问题...
盒子模型 1.内容区 width 盒子内容区宽度 height 盒子内容区高度 background-color 背景颜色 盒子可见大小由内容区,内边距和边框共同决定 为元素设置边框,必须指定3个样式 ...
- 文档流及其特性 块级元素与行内元素的区别 浮动的清除方法（解决浮动塌陷）
标准文档流 web页面的制作,是一个"流",必须从上到下,像是"织毛衣". 标准文档流的特性 1.空白折叠现象 无论有多少个空格,换行,tab,都会折叠成一个空 ...
- Web前端开发（三）--css优先级进阶，文本属性，元素类型转换，display，overflow，浮动，定位
一.选择器优先级进阶 计算方式: 行间样式 1000 id 100 class 10 标签选择器 1 让每一个选择器对应的值相加,谁的值大谁的优先级就高. <!DOCTYPE html> ...
- 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存在影响
原文地址 背景 开发过程中遇到问题,简单写个demo 运行环境为Chrome 68 描述一下这个问题,当a标签内部存在嵌套时, 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存 ...
- [css] padding会影响到元素的大小，那不想让它影响到元素的宽度应该怎么办？
[css] padding会影响到元素的大小,那不想让它影响到元素的宽度应该怎么办? box-sizing:border-box 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持 ...
- html盒子模型子元素怎么水平占满父元素_前端面试常考问题之css盒模型
一.题目:谈一谈你对CSS盒模型的认识 专业的面试,一定会问 CSS 盒模型.对于这个题目,我们要回答一下几个方面: (1)基本概念:content.padding.margin. (2)标准盒模型. ...
- 【CSS布局】已知布局元素的高度，写出三栏布局，要求左栏、右栏宽度各为300px，中间自适应。
CSS 的布局应该是 CSS 体系中的重中之重了,主要的布局方式有 table 表格布局, flex 盒子布局.float 浮动布局.position 定位布局,grid 网格布局,还有针对于移动端的 ...
最新文章
- 震惊 Guava 竟然有坑
- HBase性能优化方法总结（2）：表的设计
- collection集合 多少钱_Java 集合（2）-- Iterator接口源码超级详细解析
- Linux下使用crontab命令以及Python脚本实现自动签到
- 发现了imageio文档中有代替scipy.misc的说明
- 扎克伯格夏威夷州大肆买地引发当地不满 被批搞“新殖民主义”
- 写程序，流程图很重要！
- graphviz python_工具推荐｜我是如何使用Python脚本分析CPU使用情况的？
- 组件 -- Alert
- spring boot: 一般注入说明(五) @Component, application event事件为Bean与Bean之间通信提供了支持...
- Extjs 学习总结-Ext.define自定义类
- 计算机模拟比赛,关于参加2017年中小学计算机模拟城市设计比赛的通知
- 关于Postman导入json文件报：failed to import data format not recognized异常的处理
- PS小知识（三）——画圆滑线及虚线
- uniapp 金额输入框
- monthCalendar （日历）控件常用操作
- linux live usb 使用方法,Linux下制作Live USB方法
- 中国社科中外合作办学双证博士创新与领导力管理学博士
- 还未挥洒热血，却道了离别（内涵高质量毕业答辩PPT模板）
- vue之表格数据渲染，实现点击表格某列按钮弹出框显示剩余数据(模态框知识点）
热门文章
- php网站开发案例教程ppt,php网站开发案例教程》课件.ppt
- python综合作业题目_python作业 1、2、3 题
- python 归一化_一文学会用python进行数据预处理
- 融合机器人技术和神经科学的神经工程未来与挑战
- 图灵奖颁给超算跑分开创者！MatlabSciPy都跟他有关：“我眼中一切都是线性代数”...
- Linux二十年产权官司告终：IBM赔偿近亿元，期间“熬死”一位起诉方
- 北大女生拿下阿里数学预赛第一名！决赛入围率不到1%，最小晋级选手只有14岁...
- 最快捷的Linux命令查询工具来了：「我该怎么做XX」，一句话自动返回操作指南...
- AR独角兽的死亡教训：融资3亿美元后，成投资人提线木偶，营销大于产品技术...
- 硅谷理发460！奥巴马前手下发明AI理发机器人，10分钟理发，只收15%费用