89组合margin、padding、float、clear问题
有关css外边距margin和内边距padding样式,简而述之，顺时针方向旋转,按照上右下左读取,margin-top:/*距离上边距*/margin-right:/*距离右边距*/margin-bottom:/*距离底边距*/margin-left:/*距离左边距*/；数值排列4-1，比方说margin:10px 11px 12px 13px;/*上右下左*/margin:10px 20px 30px;/*上下不一样，左右一样*/margin:10px 20px;/*上下10px 左右20px*/margin:10px/*上下左右都是10px*/;padding道理一样，把前面的margin更换下就好，注意下：margin:0 auto;marign为0代表上下(垂直方向Y轴),水平(X轴)居中,同时建议阅读“盒模型大小取决于它的padding，margin，border数值”，里面对于margin和padding有完整介绍，还有“margin的bug问题及解决办法”补充一点的是(*盒子添加padding值，它的padding值是往外延的，在里面的有效宽度是不会变化的，盒子模型的内边距是减去宽高所得)
有关浮动和清浮动问题，个人理解是float:left或者float:right的css样式打破div标准流独占一行的传统，脱离了文档流,所造成的浮动页面影响类似"捆橡皮筋，当你把橡皮都拿走了，橡皮筋就回缩了",这时候，你要做的就是考虑如何有效的防止橡皮筋回缩，就是防止我们布局的div盒子回缩,那清浮动呗，怎么解决？看下“float布局打破标准流,神助攻clear清浮动”，因为课程里面的是增加div，通过<div style='clear:both'></div>，建议用默认伪类::before与::after{content: "";display: block;clear: both;}处理...最后认为比较有意思的一点是课程中浮动的原理介绍/*float浮动只能在文档流之前垂直位置左右浮动，其他不变*//*clear英文清除，计算机里面是阻止的意思,clear:right不允许右边有物体*/
clear小结:1.与float漂浮配合使用2.清除浮动,left/right/both3.可以用来做分割线4.可以解决div不漂浮，内部内部漂浮，在div最后放一个<div style="clear:both"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>89组合margin、padding、float、clear问题</title>
<style type="text/css">
body{
cursor: pointer;
}
/*浮动只能在文档流之前垂直位置左右浮动，其他不变*/
.box1{
width: 100px;
height: 100px;
background-color: red;
/* float: left; */
}
.box2{
width: 110px;
height: 110px;
background-color: green;
float: right;
}
.box3{
width: 120px;
height: 120px;
background-color: blue;
float: right;
clear: right;/*阻止清除，不允许右边有物体*/
}
</style>
<script>
window.onload=function(){
var obj=document.getElementById('ceshi');
obj.onclick=function(){
console.log('我一生都在等待直到你闯进我的世界我只想对你说：余生请多指教')
}
}
</script>
</head>
<body id="ceshi">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
89组合margin、padding、float、clear问题的更多相关文章
- DIV+CSS布局重新学习之float/margin/padding
之前对div的css布局一直有点半知半解,只其然却不知其所以然,到网上下载了“十天学会DIV+CSS(WEB标准)”的chm电子版,然后跟着练习了一下,特在此记录,备忘. <!DOCTYPE h ...
- css007 margin padding border
css007 margin padding border 1.理解盒模型(盒模型:就是把一些东西,包括html各种标签都包含在一个 看不见的盒子里) 1/在web浏览器中任何标签都是一个盒子,内容的周 ...
- 内联/块级元素的宽高及margin/padding的说明 |||||| 为何img、input等内联元素可以设置宽、高
1,内联非替换元素设置宽高是无效的,设置margin时,左右有效,上下无效.设置padding时,左右有效,而上下padding比较奇葩,内联非替换元素的上下padding会在元素内容盒不动的情况下上 ...
- css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性
一.各种元素的width height margin padding 特性(具体css元素的分来参看二) 1.块级元素 width. height. margin的四个方向. padding的四个方向 ...
- 巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）
本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说, ...
- CSS 布局属性(display,float,clear,visibility,overflow,overflow-x,overflow-y)
display:none | inline | block | list-item | inline-block | table | inline-table | table-caption | ta ...
- css之margin && padding讲解
margin && padding盒子模型: margin是模块与模块的空隙,padding是内容与边框的空隙 注: 1.margin:边缘.空白 2.padding:填充 margi ...
- 总结那些有默认margin,padding值的html标签
一.h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值. 在chrome中:16,15,14,16,17,19; 在firefox中:16,15,14,16, ...
- 关于margin padding
margin padding设置百分比是以父元素的宽度作参考. 定位的left,top等取百分比 则以参照定位元素的padding+width做参考 margin 四个同时设定 以margin-lef ...
随机推荐
- 使用Razor表达式 使用条件语句 来自 精通ASP-NET-MVC-5-弗瑞曼
- 双指针，BFS与图论（一）
(一)双指针 1.日志统计 小明维护着一个程序员论坛.现在他收集了一份”点赞”日志,日志共有 N 行. 其中每一行的格式是: ts id 表示在 ts 时刻编号 id 的帖子收到一个”赞”. 现在小明 ...
- Java解析XML文件的方式
在项目里,我们往往会把一些配置信息放到xml文件里,或者各部门间会通过xml文件来交换业务数据,所以有时候我们会遇到“解析xml文件”的需求.一般来讲,有基于DOM树和SAX的两种解析xml文件的方式 ...
- RainbowPlan-Alpha版本发布2
博客介绍 这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/GeographicInformationScience/ 这个作业要求在哪里 https:// ...
- ios---cocoapods 安装与使用 （AFNetworking为例）
cocoapods 安装与使用 一.CocoaPods是什么? CocoaPods是一个用Ruby写的.负责管理iOS项目中第三方开源库的工具,CocoaPods能让我们集中的.统一管理第三方开源库, ...
- 科普文，搭建python开发环境
Python简介!首先,是一门面向对象的程序设计语言,先说3个优点!1.有条理,简单,易学,易用.2.强大!可以把其他编程语言制作的模块利用起来.3.拥有丰富的库.Python作为高级编程语言,拥有的 ...
- Web自动化测试项目（六）多环境执行
需求 使用命令行运行脚本,可以指定测试/预发布/生产环境的url,如果找不到该环境变量则默认为测试环境 python3 xxxxxx.py test 修改constants.py # DOMAIN = ...
- Redis异常 | DENIED Redis is running in protected mode because protected mode is enabled
背景 今天重新搭了个redis环境,用简单的代码去测试下是否正常, @RunWith(SpringRunner.class) @SpringBootTest public class Springbo ...
- 乌班图14更新软件提示错误：https://mirrors.aliyun.com kubernetes-xenial InRelease: 由于没有公钥，无法验证下列签名： NO_PUBKEY 6A030B21BA07F4FB
提示如下 获取: https://mirrors.aliyun.com kubernetes-xenial InRelease 忽略 https://mirrors.aliyun.com kubern ...
- SQL Server 常用的数据类型
1. 字符串数据类型 char 此数据类型可存储1~8000个定长字符串,字符串长度在创建时指定:如未指定,默认为char(1).每个字符占用1byte存储空间. nchar ...