float浮动,定位
1 浮动定位
1、普通流定位
普通流,由称为文档流
块级元素:从上到下一个一个的排列
行内元素:一行内从左到右的排列
2、浮动定位
2.1、什么是浮动定位
将元素排列在普通流之外,即脱离文档流
浮动元素不会占据页面空间
浮动元素会放置在“包含框”的左边或右边
浮动元素依旧位于包含框之内
浮动元素可以向左或向右浮动,知道碰见包含框的边缘或另一个已浮动的元素框为止
2.2、特点
1、浮动元素边缘不会超过器父元素的边缘
2、浮动元素不会重叠
3、浮动知道左右浮动,不会上下浮动
注意:非块级元素浮动的话, 将会变成块级元素,允许修改width和height
2.3、处理问题
1、让块级元素在同一行内显示
2、修改行内元素的width和height
2.4、浮动属性
属性:float
取值:
none
left
right
清除浮动所带来的影响:
属性:clear
取值:left
right
both
2.5、子级元素的浮动,伪复层元素所带来的影响
如果一个元素的所有子级内容都是浮动的,那么他的高度就会变成0
解决方案
1、设置父容器高度
2、设置父元素的overflow:hidden;
3、在父元素中,增加一个空元素,添加clear:both;
2、显示方式
2.1、display
none:生成元素没有框,不占据页面空间,隐藏
block:按块级显示
inline:按行内方式显示
inline-block:行内快,所有的元素在一行内显示,允许修改width和height
使用场合:
1、控制元素的显示与隐藏
隐藏:display:none
显示:
块级:display:block;
行内:display:inline;
2、将行内元素变成块级或行内块
目的:修改行内元素的宽和高
2、显示效果
2.1、visibility
可见性
取值:
visible:默认的,可见的
hidden:元素不可见,占据页面空间
问题:visibility:hidden 占据页面空间与display:none的区别 不占据页面空间
2.2、opacity
透明度
取值:0-1
opacity:0.5;
3、vertical-align
垂直方向对齐
td
img
取值:
baseline:默认,基线对齐
top:顶部对齐
bottom:底部对齐
middle:居中对齐
放在img上,控制的是img左右两端文本的垂直对齐方式
4、光标
改变鼠标的显示效果
属性:cursor
取值:
default
pointer:小手
crosshair:+
text:I
wait:等待
3、相对定位
3.1、什么是相对定位
元素框会相对与他原来的位置偏移某个距离
3.2、如何用
position:relative
left:尺寸
right:尺寸
3.3、什么时候用
元素本身位置的微调
配合绝对定位使用
4、绝对定位
4.1、定义:脱离文档流 不占据页面空间
4.2、初始位置
相对与最近的已经定位的元素 那么参考位置相对于body进行定位
4.3、如何使用
position:absolute;
4.4、使用场合
弹出菜单
float浮动,定位的更多相关文章
- 归纳篇(一)CSS的position定位和float浮动
近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...
- CSS| position定位和float浮动
对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.rela ...
- HTML定位和布局----float浮动
1.定位体系一共有三种 (1)常规流: (2)浮动定位 (3)绝对定位 2.float属性常用的语法: (1)float:left:左浮动 (2)float:right:右浮动 (3)float:no ...
- CSS3——分组和嵌套 尺寸 display显示 position定位 overflow float浮动
分组和嵌套 分组选择器 ——————> 嵌套选择器 能适用于选择器内部的选择器的样式 p{ }: 为所有 p 元素指定一个样式. .marked{ }: 为所有 class="m ...
- CSS定位机制之浮动定位float
一.浮动定位实现的效果 二.使用float实现浮动定位 三.使用clear属性清除浮动定位 四.浮动定位的应用(布局) 一.浮动定位实现的效果 (一).块元素(div)在文档流中默认垂直排列,如果 ...
- float、定位、inline-block、兼容性需注意的特性总结
inline-block 特性: 1.块在一排显示 2.内联支持宽高 3.默认内容撑开宽度 4.标签之间的换行间隙被解析(问题)[相当字体大小的一半] 5.ie6 ie7不支持块属性标签的inline ...
- css定位之浮动定位
浮动定位可以是原本垂直排列的块级元素,变成水平排列 1浮动元素 float:left 或者float:right 这些浮动会直接碰到父容器的边界为止. 2设置了浮动的元素,元素会脱离标准文档流中,但 ...
- css清除浮动定位造成的异常
清除浮动是为了解决高度塌陷的问题:内层有好几个div有宽有高,并且选择了浮动定位,但是外层的div却并没有设置宽高.在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动( ...
- 对css float 浮动的学习心得
css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...
随机推荐
- 『MXNet』第八弹_数据处理API_下_Image IO专题
想学习MXNet的同学建议看一看这位博主的博客,受益良多. 在本节中,我们将学习如何在MXNet中预处理和加载图像数据. 在MXNet中加载图像数据有4种方式. 使用 mx.image.imdecod ...
- java的泛型与反射机制
什么是泛型? 泛型,即“参数化类型”.顾名思义,就是将类型由原来的具体的类型参数化,类似于方法中的变量参数,此时类型也定义成参数形式(可以称之为类型形参),然后在使用/调用时传入具体的类型(类型实参) ...
- Leetcode 999. 车的可用捕获量
999. 车的可用捕获量 显示英文描述 我的提交返回竞赛 用户通过次数255 用户尝试次数260 通过次数255 提交次数357 题目难度Easy 在一个 8 x 8 的棋盘上,有一个白色车(r ...
- Hadoop中 Unable to load native-hadoop library for your platform... using builtin-java classes where applicable问题解决
环境 [root@vm8028 soft]# cat /etc/issue CentOS release 6.5 (Final) Kernel \r on an \m [root@vm8028 sof ...
- rpc框架实现(持续更新)
网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,rpc基于长连接的远程过程调用应用而生. 一:A服务调用B服务,整个调用过程,主要经历如下几个步骤:(摘自 ...
- 一步步构建iOS路由
什么是移动端路由层: 路由层的概念在服务端是指url请求的分层解析,将一个请求分发到对应的应用处理程序.移动端的路由层指的是将诸如App内页面访问.H5与App访问的访问请求和App间的访问请求,进行 ...
- Python3+BaiduAI识别高颜值妹子图片
一.在百度云平台创建应用 为什么要到百度云平台创建应用,首先来说是为了获取获取access_token时需要的API Key和Secret Key 至于为什么需要API Key和Secret Key才 ...
- js 奇淫技巧
js没有用来统计字符串中含有多少个字母的方法 let value='aaa&bbb&aad123&333' 那么value共含有 value.length-value.repl ...
- 部署Linux项目
部署Linux项目 1● 下载软件 ftp 安装 2● 创建连接 3● java项目 gunzip –c *.gz tar –xzf *.gz rm –rf rm -r ...
- Oracle如何解决日期格式“01-3月 -18”的显示问题(3种处理方式)
今天查询表数据还是出现上次那种问题,但是每次都要去调用转化函数,比较麻烦,所以找一下资料,得到几种方式解决oralce的日期数据显示格式 问题描述: 解决方法 1)方法1:调用Oracle函数转化成日 ...