html基础整理(02浮动 问题)
margin的塌陷现象及解决方案
如果一个大盒子中包含一个小盒子,给小盒子设置margin-top,大盒子会一起向下平移
- 解决方案:
1. 给大盒子加一个边框(border)
2. 给大盒子设置`overflow:hiden;`
3. 设置小盒子浮动
浮动
float: left; //左浮动
float: right; //右浮动
- 浮动后的元素层级比标准流高
- 浮动后的元素显示模式会变成行内块
清除浮动
浮动的影响:大盒子不设置高度,而且大盒子中的子盒子全部浮动,则大盒子的高度将不会被撑开
清除浮动:
1. 额外标签法:在浮动的元素后面加一个div,给这个div设置clear:both;
- 内部标签法:可以撑开父盒子的高度
- 外部标签法:不能撑开父盒子的高度 2. 给大盒子设置overflow: hidden; - 缺点:超出大盒子范围的内容会被裁剪
3. 伪元素清除浮动
.clearfix:after {
content:"";
height: 0;
line-height: 0;
display: block;
visiblity: hidden;
clear: both; } .clearfix { zoom: 1;/*兼容ie6*/ }
css清除公共样式
/*css初始化*/
/* 清除标签的默认margin padding*/
html,body,ul,li,dl,dt,dd,h1,h2,h3,p,img,input { margin: 0; padding: 0; } /*清除img的边框*/
img { border: 0; } /*清除li标签前的小点*/
li { list-style: none; } /*设置页面统一文字字体和颜色*/
body { font-size: 12px; color: #434343; font-family: "宋体"; } /*清除浮动*/
.clearfix:after { content: ""; height: 0; line-height: 0; display: block; visibility: hidden; clear: both; }
.clearfix { zoom: 1;/*兼容ie6*/ } /*a标签设置*/ a { color: #434343; text-decoration: none;/*去下划线*/ } a:hover { color: green; } /*左浮动*/
.fl { float: left; } /*右浮动*/
.fr { float: right; }
html基础整理(02浮动 问题)的更多相关文章
- mysql基础整理02
比较运算符 > < = >= <= !=和<> !=和<>都是一个意思,都是不等于的意思 and和or and 并且&& 需要同时满足多 ...
- CSS3基础入门02
CSS3 基础入门02 边框相关属性 border-radius 通过这个属性我们可以设置边框圆角,即可以将四个角设置为统一的圆角,也可以单独的设置具体的某一个角的圆角. grammer: borde ...
- [转帖]nginx基础整理
nginx基础整理 https://www.cnblogs.com/guigujun/p/6588545.html 目录结构如下: Nginx基础知识 Nginx HTTP服务器的特色及优点 Ngin ...
- 【T-SQL基础】02.联接查询
概述: 本系列[T-SQL基础]主要是针对T-SQL基础的总结. [T-SQL基础]01.单表查询-几道sql查询题 [T-SQL基础]02.联接查询 [T-SQL基础]03.子查询 [T-SQL基础 ...
- MongoDB基础知识 02
MongoDB基础知识 02 6 数据类型 6.1 null : 表示空值或者不存在的字段 {"x":null} 6.2 布尔型 : 布尔类型只有两个值true和false {&q ...
- 机器学习 —— 基础整理(六)线性判别函数:感知器、松弛算法、Ho-Kashyap算法
这篇总结继续复习分类问题.本文简单整理了以下内容: (一)线性判别函数与广义线性判别函数 (二)感知器 (三)松弛算法 (四)Ho-Kashyap算法 闲话:本篇是本系列[机器学习基础整理]在time ...
- MySQL基础整理(一)之SQL基础(未完成)
大家好,我是浅墨竹染,以下是MySQL基础整理(一)之SQL基础 1.SQL简介 SQL(Structure Query Language)是一种结构化查询语言,是使用关系模型的数据库应用语言. 2. ...
- Blender 基础 骨架-02 骨架的各种呈现方式
Blender 基础 骨架-02 - 骨架的各种呈现方式 我使用的Blender版本:Blender V 2.77 前言 在 Blender 基础 骨架-01 教程里面,将骨架和模型联系在一起,我们在 ...
- nutch的一些基础整理
nutch的一些基础整理 原创 2015年03月22日 18:18:01 标签: nutch / 240 编辑 删除 一.关于配置文件: nutch-default.xml:爬虫的默认配置.在${nu ...
- Linux基础命令-02
Linux基础命令-02:
随机推荐
- final关键字的简单理解
final可以修饰类,方法,变量. 1.final修饰的类,不可以被继承. 2.final修饰方法,可以把方法锁定,以防任何继承类修改它的含义. 3.fianl修饰的变量,如果是基本数据类型的变量,则 ...
- 01b-1: 性能测度
- 2015年传智播客JavaEE 第168期就业班视频教程 02-ERP简介
其实ERP描述的是管理一个企业的整体的所有的资源.ERP是帮你管整个企业的运行.那它是管哪一类企业呢?比如说帮光线传媒.ERP更多是用在生产制造企业,这是最好的,其次的就是这种销售型企业,二道贩子那种 ...
- iOS App图标和启动画面尺寸
注意:iOS所有图标的圆角效果由系统生成,给到的图标本身不能是圆角的. 1. 桌面图标 (app icon) for iPhone6 plus(@3x) : 180 x 180 for iPhone ...
- 去掉redhat linux提示注册
去掉提示注册的话,卸载几个软件包:#rpm -qa | grep subscription-manager 然后移除那出现的几项吧:#yum remove subscription-manager-g ...
- win10系统的快捷键
1.win10特有的快捷键:任务视图和虚拟桌面相关 (1)Win + Tab:查看任务视图 (2)Win + Ctrl + D:在任务视图中新建虚拟桌面 (3)Win + Ctrl + F4:关闭当前 ...
- Golang之函数练习
小例题: package main import "fmt" /* 函数练习, 可变参数使用 写一个函数add 支持1个或多个int相加,并返回相加结果 写一个函数concat,支 ...
- 没有Home键之后的iPhone会是什么样子?
以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 之前笔者推测新一代的iPhone不会再有“Home”键.果不其然,9月13日苹果发布会证实了笔者的观 ...
- 【工具推荐】ELMAH——可插拔错误日志工具(转)
出处:http://www.cnblogs.com/liping13599168/archive/2011/02/23/1962625.html 今天看到一篇文章(构建ASP.NET网站十大必备工具( ...
- mongoTemplate更新一个Document里面的数组的一个记录。
假如有一个Document如下: { "_id" : "69bca85a-5a61-4b04-81fb-ff6a71c3802a", "_class& ...