float元素上-margin的用法

css标准,float元素上的负margin表示把下面的元素向对应方向移动,并且覆盖上一个元素(这里是指html中元素的声明顺序). 标准情况下我们用float 时候是这样的. -margin通俗点说,就是将盒子的大小减小,但是不影响显示. 当给一个盒子宽度为200px添加一个margin-left:-200px的时候,其实整个盒子的宽度已经是 0 这就是为什么说-margin其实不脱离文档流..因为改变的只是他在文档中的实际宽度. 上面的例子当中,要怎样使红色盒子在右边,黄色盒子在左边显示?…

python 全栈开发，Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)

昨日内容回顾高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 a LoVe HAte 必须要遵循这个准则 “爱恨准则” nth-child(3n+1) first-child last-child 继承性和层叠性继承性: 文本的属性: color text-*,line-*,font-* 盒子属性定位布局的元素层叠性: 1.先看标签元素有没有被选中,如果选中…

{03--CSS布局设置} 盒模型二 padding bode margin 标准文档流块级元素和行内元素浮动 margin的用法文本属性和字体属性超链接导航栏 background 定位 z-index

03--CSS布局设置本节目录一盒模型二 padding(内边距) 三 boder(边框) 四简单认识一下margin(外边距) 五标准文档流六块级元素和行内元素七浮动八 margin的用法九文本属性和字体属性十超链接导航栏案例十一 background(背景) 十二定位十三 z-index 一盒模型盒模型在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型.…

padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法

盒模型在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型.我们在这里重点讲标准模型. 盒模型示意图盒模型的属性 width:内容的宽度 height: 内容的高度 padding:内边距,边框到内容的距离 border: 边框,就是指的盒子的宽度 margin:外边距,盒子边框到附近最近盒子的距离如果让你做一个宽高402*402的盒子,您如何来设计呢? 答案有…

IE中float元素如果同时设置了margin值，此时margin的值会变为双倍的解决方法

IE中float元素如果同时设置了margin值,此时margin的值会变为双倍, 解决办法: 是在该元素中加入display:inline.…

好程序员分享居中一个float元素

好程序员分享居中一个float元素,我们布局的时候,用margin来设置float元素的外边距来达到效果.对于,在文档流中的元素,我们很容易让它水平居中,只要给元素设置一个固定的宽度,用margin:0 auto;就行了,这种技巧甚至在IE6中兼容得很好. 那么如何让浮动的元素水平居中呢?浮动元素脱离了文档流,上面的方法肯定是不行的.特地去网上查了一下,做为学习笔记记录下来我们布局的时候,用margin来设置float元素的外边距来达到效果.对于,在文档流中的元素,我们很容易让它水平居中,只要给…

margin的用法

margin塌陷问题当时说到了盒模型,盒模型包含着margin,为什么要在这里说margin呢?因为元素和元素在垂直方向上margin里面有坑. 我们来看一个例子: html结构: <div class="father"> <div class="box1"></div> <div class="box2"></div> </div> css样式: *{ padding:…

为什么margin-top不是作用于父元素【margin外边距合并问题】

coding时发现margin-top居然没作用于本元素上,而是作用到了父元素上. 原来是margin外边距合并导致的.以下是网上搬运来的知识: margin外边距合并详解:外边距合并现象在网页布局中非常的常见,必须对此有明确的把握,以此做到未雨绸缪,否则可能影响工作效率,甚至严重阻碍项目的进度.在网络上已经有大量的相关文章,下面结合实例代码对margin外边距合并做一下总结.外边距合并概念:相邻的两个或者多个外边距在垂直方向上合并成一个外边距,这就是所谓的外边距合并.水平方向不存在此现象.外边…

通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽

前言关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能并没有处理这些细节,经过翻阅 jquery ui 的源码才找到答案. 拖拽实现关于拖拽功能不再啰嗦,直接贴代码 /** * [draggable 拖拽方法] * @param {[type]} modal [移动元素] * @param {[type]} handle [拖拽元素] */ var…

canvas 使用 isPointInPath() 判断鼠标位置是否在绘制的元素上

canvas 里绘制的图形不是一个实体 DOM,所以要给每个绘制的图形添加事件操作比给 DOM 添加事件要复杂很多. 所以,我们需要使用一个 canvas 的 isPointInPath(x, y) 方法,来获取鼠标相对于浏览器的坐标,然后还需要计算出鼠标相对于 canvas 画布的坐标,最后通过 isPointInPath(x, y) 方法判断此坐标是否在绘制的元素上,进行相应的操作. isPointInPath() 方法是针对的当前绘制的路径,而鼠标在执行操作的时候,我们会根据需要监听鼠标的…

css伪元素:before和:after用法详解

css的伪元素,之所以被称为伪元素,是因为他们不是真正的页面元素,html没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用诸如页面元素一样的css样式,表面上看上去貌似是页面的某些元素来展现,实际上是css样式展现的行为,因此被称为伪元素.如下图,是伪元素在html代码机构中的展现,可以看出无法伪元素的结构无法审查. css有一系列的伪元素,如:before,:after,:first-line,:first-letter等,本文就详述一下:before和:after元…

为什么子元素设置margin-top会作用在父元素上？

原因在于:CSS 外边距合并复现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> html * { margin:0; padding: 0; } </style> <body> <…

angularjs获取元素以及angular.element()用法

addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元素里面的末尾处插入参数内容 attr() - 获取匹配的元素集合中的第一个元素的属性的值 bind() - 为一个元素绑定一个事件处理程序 children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选 clone()-创建一个匹配的元素集合的深度拷贝副本 contents()-获得匹配元素集合中每个元素的子元…

jquery uploadify文件上传插件用法精析

jquery uploadify文件上传插件用法精析 CreationTime--2018年8月2日11点12分 Author:Marydon 一.参数说明 1.参数设置 $("#file_upload").uploadify({ height : 30,//高度 swf : '/uploadify/uploadify.swf',//指定swf文件 uploader : '/uploadify/uploadify.do',//后台处理的url width : 120,//宽度 bu…

05 HTML字符串转换成jQuery对象、绑定数据到元素上

1 要求将一段 HTML脚本封装成一个字符串,将这个字符串转换成一个jQuery对象:然后将这个jQuery对象添加到指定的元素中去 2 步骤定义字符串 var str = '<div id="box01">hello world</div>'; //定义一个字符串利用jQuery框架将字符串转换成jQuery对象 var box = $(str); // 利用jQuery将字符串转换成jQuery对象打印输出转换得到的结果,判断是否转换成功 cons…

24 margin的用法

在元素上写事件和addEventListent()的区别

在元素上写事件和addEventListent()的区别1. onclick添加事件不能绑定多个事件,后面绑定的会覆盖前面的.而addEventListener能添加多个事件绑定,按顺序执行.2. addEventListener方式,不支持低版本的IE.(attachEvent 支持IE).3. 普通方式绑定事件后,不可以取消.addEventListener绑定后则可以用 removeEvenListener 取消.4. addEventListener 是W3C DOM 规范中提供的注册事…

伪元素的margin值挤压主体元素解决

伪元素的margin值挤压主体元素解决主体是两个p标签,需要再其左侧添加一个竖线,很常见的需求目标前提条件 1. 右侧的文字个数不固定问题 1. 需要让before元素为`float:left`: 2. 文字个数不固定时,整个元素的宽度是auto,根据文字的内容来算,此时使用 :before伪元素时,如果伪元素占据的宽度过大,会导致文字被挤下去 .demo:before{ float: left; height: 67px; content: ''; border-right: soli…

AngularJS之一个元素上绑定多个指令作用域

前言众所周知,我们在自定义指令时,会指定它的作用域,即scope设置项(默认值为false). 且,scope设置项,可以有三种值,从而也就代表三种不同的作用域,下面我们再来一起回顾下: 指令之scope scope: false 默认值,指令不会新建一个作用域,使用父级作用域. scope: true 指令会创建一个新的子作用域,原型继承于父级作用域. scope: {…} 指令会新建一个隔离作用域,不会原型继承父作用域. 好了,通过上面,我们很容易知道,在一个元素绑定一个指令,那么仅仅看这…

JavaScript移除绑定在元素上的匿名事件处理函数

前言: 面试的时候有点蒙,结束之后想想自己好像根本就误解了面试官的问题,因为我理解的这个问题本身就没有意义.但是当时已经有一些思路,但是在一个点上被卡住. 结束之后脑子瞬间灵光,想出了当时没有迈出的那一小步.所以不想计较这个问题本身的意义,单纯的想要把这个我理解错了的问题解决,就当是满足自己一个小小的愿望吧. 问题: 用addEventListener()和attachEvent()给一个DOM元素绑定事件处理程序时,如果传入一个匿名函数,那么用相应的removeEventListener()和…

1 background（复合属性）与font（复合属性） 2 行内块的间距问题 3 行内元素的margin 4 清除浮动 5定位的元素的层级 6 Border-radius: 边框半径

1 background(复合属性)与font(复合属性): background: 颜色图片的链接是否平铺背景位置是否滚动.(可以随意调动或省略) Font: 粗度字体风格字体大小/行高字体样式字体大小和样式不可省略 2 行内块的间距问题行内块元素相邻时,行内块元素之间会有几像素的间距,只有通过浮动解决. 3 行内元素的margin 行内元素的上下外边距不起作用,左右起作用. 4 清除浮动给父盒子设置一个高度 Clear: both Overflow…

jQuery 绑定事件到动态创建的元素上

在进入主题之前,我们先来看一个前台页面经常用到的功能:点击页面输入框时自动选择其中文本. 很容易想到利用输入框的focus事件,当输入框获得焦点时,再调用jQuery的select()方法. Okay,想法很简单,逻辑似乎也无错.具体我们来看一下现实到底能不能实现. 1.页面构造个表单,放上几个输入框.代码看起来是这样子的. <form action="/" method="post"> <table> <tr> <td&g…

关于行内元素的margin padding一些说明；background-color的范围

①当对行内元素使用padding时,只有左右方向(正常)有效:竖直方向上,内边距对于该行内元素有效果,但是对其他元素无任何影响. ②当对行内元素使用margin时,只有左右方向有效,竖直方向无任何效果. ③background-color的范围:这种颜色会填充元素的内容.内边距和边框区域,扩展到元素边框的外边界(但不包括外边距).如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色.…

已超过传入消息(65536)的最大消息大小配额。若要增加配额，请使用相应绑定元素上的 MaxReceivedMessageSize 属性。

错误:已超过传入消息(65536)的最大消息大小配额.若要增加配额,请使用相应绑定元素上的 MaxReceivedMessageSize 属性. 或者错误:反序列化操作“GetAllUserData”的响应消息的正文时出现错误.读取 XML 数据时,超出最大字符串内容长度配额 (8192).通过更改在创建 XML 读取器时所使用的 XmlDictionaryReaderQuotas 对象的 MaxStringContentLength 属性,可增加此配额. 行 1,位置 8834. 解决方案…

html 关于内部是float元素的外部div高度为0的解决方法！

最近编写一个页面的时候遇见一个问题,外部div是block的,而内部元素是float的,大家应该都知道float的元素是没有实际高度的,就算你设置了float元素的高度他也不会撑开外部block元素的高度,一般情况我们可以对这个block定义一个高度进行解决,但是某些情况下,我们不一定知道外部block元素的实际高度,我们就需要让block进行高度自动适应,下面提供2中解决方案: 假设下面的代码中ul是block而li是float的 <ul class="list"> &l…

Jquery 在动态元素上绑定事件

弄了很久却没有弄出来,感觉没有错,但是动态元素上的事件根本就不响应,代码如下: <input type="button" id="btnyes" value="确定" /> <div id="divcontent"> </div> <script> $(function () { $("#btnyes").on("click", funct…

jQuery实现鼠标移到元素上动态提示消息框效果

当光标移动到某些元素上时,会弹出像tips的提示框,这种效果想必大家都有见到过吧,下面有个不错的示例,大家可以感受下当光标移动到某些元素上时,会弹出像tips的提示框. 复制代码代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title&g…

-_-#【Canvas】导出在<canvas>元素上绘制的图像

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <canvas id="drawing" width="200" height="200">A drawing of something</canv…

使用FastClick的同时造成元素上的trigger('click')无法触发的解决办法

现象还原: 1. 初始化进入多规格卖场商详页的时候,chrome模拟器切换到安卓环境下,点击加入购物车,规格弹出页没有展示.而在PC和IOS模拟器下,可以弹出规格页 2. 点击加入购物车时,使用 $('.J_Spec').triggerHandler(click_name); //代替 $('.J_Spec').trigger(click_name); 可以弹出规格页,但是颜色和尺寸点击没有自动触发 3. 我把 $('.J_Spec').trigger(click_name); 这行代码放在ge…

子元素用margin-top 为什么反而作用在父元素上？对使用margin-top 的元素本身不起作用？

在这个说明中,“collapsing margins”(折叠margin)的意思是:2个或以上盒模型之间(关系可以是相邻或嵌套)相邻的margin属性(这之间不能有非空内容.padding区域.border边框或使用清除分离方法)结合表示为一个单独的margin.在css2.1中,水平的margin不会被折叠.垂直margin可能在一些盒模型中被折叠:1.在常规文档流中,2个或以上的块级盒模型相邻的垂直margin会被折叠.最终的margin值计算方法如下:a.全部都为正值,取最大者:b.不全是…

【float元素上-margin的用法】的更多相关文章