CSS基础知识(定位、浮动)
12、浮动
特点:将当前元素脱离文档流 float: left 即左浮动 float: right 即右浮动
注:*父与子元素,设置子元素浮动不能超出父元素的范围
*多个元素均设置为浮动时,将自动排列(水平方向)
*兄弟元素,后一个元素设置为浮动,前一个元素不浮动,后一个元素的位置不能超过前一个元素的位置
*文字内容不会被浮动元素所覆盖,而是环绕在浮动元素的周围。
i 清除浮动 clear
none - 不清除 left - 清除左浮动 right - 清除右浮动 both - 清除两侧的浮动
i 高度塌陷
设置:父级元素- 未设置高度;子级元素- 设置高度,且浮动
结果: 父级的显示高度为 0
默认情况下,未设置宽高;默认宽度是当前页面整个宽度;高度是0或子元素高度的总和
u 解决方案
(1)为父元素设置高度(所有子元素高度的总和)
问题:人为为父级元素设置 height 属性;父级元素的 height 属性值,计算得来的
(2)将父和子元素同时设置为浮动
父元素未设置宽度和高度 结果: 父级的宽度和高度分别所有子元素的宽度和高度的总和
(3)clear属性 来清除浮动
l BFC块极格式化环境
全称:Block Formatting Context,是元素的隐含属性。
默认情况下BFC是关闭的,当元素开启BFC以后,将会具有如下特性:
*文档流中的元素不会被设置为浮动的元素所覆盖
*子元素的垂直方向的外边距不会传递给父元素
*元素可以包含浮动的子元素
² 开启 BFC
设置元素为 浮动(float);或display 为 inline-block;或 绝对定位
将元素的overflow 设置为一个非visible的值(一般设置为 hidden)
在所有子元素的最后新增一个子元素,并设置 clear 属性值为 both
注: 开启 BFC会有一些副作用,需要选择一些副作用小的方式。
13、定位
Ø static 默认值 表示静态定位(没有开启定位)
Ø relative 表示相对定位,没有脱离文档流
相对于父级元素的定位:
相对定位后的位置,是相对于当前元素的原本位置进行计算
* 行内元素设置为相对定位时 - 依旧是内联元素的效果 Span
- Ø absolute 表示绝对定位 【脱离】文档流
开启绝对定位,(默认开启定位 - 不会改变当前元素显示的位置)
top、right、bottom、left依次设置距离上边、右边、下边、左边的值
定义父级与子级元素:
1. 只为子级元素设置绝对定位: 相对于<HTML页面>进行定位
2. 同时为父级和子级元素设置绝对定位:
父级元素相对于 <HTML页面> 进行定位; 子级元素相对于 <父级元素> 的进行定位
- fixed 表示固定定位 【脱离】文档流
效果:相对于 <HTML页面> 进行的定位
【注:行内元素设置为固定定位、绝对定位,呈现块极元素的效果】
CSS基础知识(定位、浮动)的更多相关文章
- 前端开发:css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- CSS基础知识之float
前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...
- CSS基础知识之position
最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...
- (转)第一天 XHTML CSS基础知识 文章出处:标准之路(http://www.aa25.cn/div_css/902.shtml)
欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...
- 【CSS】 CSS基础知识 属性和选择
css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...
- CSS基础知识01
一.CSS基础知识介绍 1.css是cascading style sheet层叠式样式表的简写 2.css小用法 加粗:font-weight:bold; 正常用:norma ...
- Web学习篇之---css基础知识(一)
css基础知识(一) 1.css样式: 载入css样式有下面四种: 1).外部样式 2).内部样式 3).行内样式 4).导入样式 <link href="layout.css&quo ...
- DIV+CSS专题:第一天 XHTML CSS基础知识
欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础 ...
- CSS基础知识筑基
01.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),对HTML网页内容进行统一外观样式设计和管理,给网页进行各种装饰,让她变得美观,是HTML的化妆师.(Cas ...
随机推荐
- 《Spring Boot 那些事》
<Spring Boot 那些事>----https://www.bysocket.com/?p=1124
- poj 2823单调队列模板题
#include<stdio.h>//每次要吧生命值长的加入,吧生命用光的舍弃 #define N 1100000 int getmin[N],getmax[N],num[N],n,k, ...
- VM Workstation 虚拟机下如何安装VMtools
不同版本Linux原理类似,这里以Debian为例. 1 根据提示点击Install Tools,CDROM中出现VmwareTools的安装包,在你的主文件夹下新建一个文件夹(随便叫什么都行,我新建 ...
- ORA-00600: internal error code, arguments: [kkqtSetOp.1]
新数据库从32升级到64位的11G 11 2 0 3 有条SQL 语句运行的时候会导致内部错误. 使用PL/SQL DEVELOPER 查询该语句的运行机会 按F5键 就激发了这个ORA600 单击此 ...
- 解析cocos2d-lua项目中的Hello World
创建完cocos2d-x的lua项目后.打开项目的Resources目录,找到hello.lua.cocos2d-x的lua项目的測试样例主要就是由这个脚本文件运行的. require "A ...
- hdu3488Tour KM算法
//给一个有向图, //找出若干环,使得这些环覆盖全部点且每一个点仅仅能在一个环中 //问所得的全部环的全部边权值之和的最小值为多少 //对于每一个点仅仅有一个入度和一个出度.那么将每一个点拆成 // ...
- MySQL 登录问题
1.问题一:使用update mysql.user set password='root'改动密码后,不能登录 解决:操作过程例如以下. (1)关闭mysql(杀掉mysqld进程),然后使用命令: ...
- Android-通过SlidingPaneLayout高仿微信6.2最新版手势滑动返回(一)
近期更新了微信版本号到6.2.发现里面有个很好的体验,就是在第二个页面Activity能手势向右滑动返回,在手势滑动的过程中能看到第一个页面,这样的体验很赞,这里高仿了一下. 这里使用的是v4包里面的 ...
- ※交换排序(1)——快速排序(quick sort)
快速排序使用分治策略(Divide and Conquer)来把一个序列分为两个子序列.步骤为: 从序列中挑出一个元素,作为"基准"(pivot). 把所有比基准值小的元素放在基准 ...
- bzoj4299
主席树+脑洞 首先我们有一个结论:如果我们已经凑出1-n,那么下一个数必须小于等于n+1才能凑出n+1,否则结束. 那么如果只有一次询问,我们把数组排序,然后扫一遍看每个数当前能不能加入.但是多组询问 ...