18 12 28 css 浮动 定位
浮动
浮动特性
1、浮动元素有左浮动(float:left)和右浮动(float:right)两种
2、浮动的元素会向左或向右浮动,碰到父元素边界、其他元素才停下来
3、相邻浮动的块元素可以并在一行,超出父级宽度就换行
4、浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题)
5、浮动元素后面没有浮动的元素会占据浮动元素的位置,没有浮动的元素内的文字会避开浮动的元素,形成文字饶图的效果
6、父元素如果没有设置尺寸(一般是高度不设置),父元素内整体浮动的元素无法撑开父元素,父元素需要清除浮动
7、浮动元素之间没有垂直margin的合并
一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSSfloat浮动就产生了。
清除浮动
- 父级上增加属性overflow:hidden
- 在最后一个子元素的后面加一个空的div,给它样式属性 clear:both(不推荐)
- 使用成熟的清浮动样式类,clearfix
.clearfix:after,.clearfix:before{ content: "";display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:1;}
定位
文档流
文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置。
关于定位
我们可以使用css的position属性来设置元素的定位类型,postion的设置项如下:
relative 生成相对定位元素,元素所占据的文档流的位置保留,元素本身相对自身原位置进行偏移。
absolute 生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了定位的父级元素来进行定位,如果找不到,则相对于body元素进行定位。
fixed 生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于浏览器窗口进行定位。
static 默认值,没有定位,元素出现在正常的文档流中,相当于取消定位属性或者不设置定位属性。
inherit 从父元素继承 position 属性的值。
定位元素的偏移
定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值。
定位元素层级
定位元素是浮动的正常的文档流之上的,可以用z-index属性来设置元素的层级
定位元素特性
绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素
18 12 28 css 浮动 定位的更多相关文章
- 18 12 27 css 盒模型使用 以及相关技巧问题 元素溢出 块元素、内联元素、内联块元素
盒子模型的实际尺寸 盒子的width和height设置的是盒子内容的宽和高,不是盒子本身的宽和高,盒子的真实尺寸计算公式如下: 盒子宽度 = width + padding左右 + border左右 ...
- QVM 实操记 - 18.12.28
视频回放地址:https://i.iamlj.com/mp4/QVM-IMC-12.27-1080P.mp4 目录 目录 常规开发部署流程 准备工作 开发准备 网站部署 操作步骤 重装系统 LANP环 ...
- css 浮动 定位
浮动 元素的浮动是指设置了浮动属性的元素会脱离标准普通 流的控制,移动到其父元素中指定位置的过程. 语法: float . left . right . none(默认) 注意: 1 ...
- 18 12 29 css background
background属性 属性解释 background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个 ...
- 18 12 26 css 学习 选择器
1.标签选择器 标签选择器,此种选择器影响范围大,建议尽量应用在层级选择器中.举例: *{margin:0;padding:0} div{color:red} <div>....</ ...
- 18 12 25 css 基本语法以及页面使用
css的定义方法是: 选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个值 css页面引入方法: 1.外联式:通过l ...
- css浮动(float)及清除浮动的几种实用方法
CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...
- css浮动(float)及如何清除浮动
前言: CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float)(1)html文档流 自窗体自上而下分成一行一 ...
- CSS浮动、定位
这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...
随机推荐
- 针对phpstudy默认设置的利用
在phpstudy下载下来以后路径,设置没有修改的情况下可以使用此方法 url:http://ip/phpmyadmin用户名:root 密码:root登入管理界面变量-->general lo ...
- PHPstudy2018 后门简单使用
首先声明,仅为记录使用. 测试用例php-5.4.45 + Apache index.php 使用Firefox 浏览器,可以编辑并且重发http请求 打印出“net user” base64 加密后 ...
- ①java环境变量配置以及简单的dos框操作
DOS:英文全称Disk Operation System,即磁盘操作系统,是个人电脑上使用的一种操作系统,并曾是世界上最广泛使用的操作系统. JDK: 英文全称Java Development Ki ...
- CPU各个具体的指标含义
CPU各个具体的指标含义解释如下: ①CPU(监测到的master主机上的CPU使用情况) 从图中看出,一共有五个关于CPU的指标.分别如下: 1. User User表示:CPU一共花了多少比例的时 ...
- Django(十二)视图--利用jquery从后台发送ajax请求并处理、ajax登录案例
一.Ajax基本概念 [参考]:https://www.runoob.com/jquery/jquery-ajax-intro.html 异步的javascript.在不全部加载某一个页面部的情况下, ...
- STM32之GD25Q256应用笔记
前言 使用标准SPI指令格式: 3字节地址模式或4字节地址模式: 支持SPI 总线 模式0 和 模式3: 存储容量32MB: 时钟频率范围:80Mhz – 104Mhz: 主机:STM32F103ZE ...
- Json实体类驼峰名称转化器
背景 我们常用一些网站,将json转化成实体类.但不巧的是,这些自动生成的都是小驼峰.需要进一步的改成大驼峰+JsonProperty.接着同事说他已经有个工具了.我稍微简化了一下 方法 首先行分离. ...
- Linux gcc(ar命令)打包库到另一个库中的另外一种方法
最近的项目中需要在Libcurl写一个wrapper,最好的办法是把我的wrapper和libcurl包在一起,做一个新的静态库 但是很遗憾,直接用以下命令产生的libmywrapper.a 是不能用 ...
- TensorFlow--交互式使用--tf.InteractiveSession()
用tf.Session()创建会话时只有在会话中run某个张量才能得到这个张量的运算结果,而交互式环境下如命令行.IPython,想要执行一行就得到结果,这就需要用到tf.InteractiveSes ...
- TensorFlow2 Part2:基础知识回顾
python面向对象编程回顾 基础概念: 面向对象的编程简称OOP,它把对象作为程序的基本单元,一个对象包含了数据和操作数据的函数. 面向对象的设计思想是抽象出Class,根据Class(类)创建In ...