relative left和margin-left

2024-08-31

css中margin-left与left的区别

研究下拉菜单和弹出菜单时比较所得: 1.直接在css中设置left生效的前提是必须设置父容器position:absolute或relative,如果不设置则会显示为最近一个定位的父对象左边相关的位置: 测试代码: <div style="position:relative;top:100px;left:100px;border:1px solid blue;width:100px;height:100px;"> <div id="outer" s

css备忘录（关于relative、absolute）

父级用:position: relative; 子级才能用:position: absolute; relative里面用margin调位置: absolute里面用top.left.right.bottom调位置.

初探Margin负值(转)

相对而言,margin 负值的使用机率在布局中似乎很少,但是我相信一旦你开始掌握就会着迷,接下来我们看看关于margin负值的一些资料: 它是一个有效的属性,至少w3c中明确描述如下:”Negative values for margin properties are allowed…”; margin负值并非hack,正因为不熟悉所以有时候会避而远之,甚至误解; margin负值遵循文档流:假如使用margin负值促使一个元素向上位移,那么相关元素也会随之发生位移. 良好兼容,甚至是ie6也能

css之margin

参考地址:http://www.imooc.com/learn/680 标准盒模型元素尺寸可视尺寸-clientWidth(标准)——就是上图中的border box包含的尺寸. 占据尺寸-outerWidth(YY,jQuery里面是有这个方法的)——就是上图中的margin box包含的尺寸一.margin与可视区域 1.适用于没有设定width/height的普通block水平元素,(float元素,absolute/fixed元素,inline元素,table-ceil元素,这些都

使用position:relative制作下边框下的小三角

在制作tab选项卡的时候,有时会有下边框,且下边框下另一个头向下的小三角,这全然能够用css来实现,而不必使用背景图片. 由于使用背景图片时会有一个问题,选项卡内容字数不同.导致使用背景图片时无法控制它始终在中间显示. <ul class="technical_list"> <li class="active-tab">入门指南<div class="triangle"></div

CSS浮动、定位

这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行,并在每行中按从左到右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. 让元素脱离文档流的方法有:浮动和定位. 二.有几种定位方式,分别是如何实现定位的,使用场景如何? CSS定位方式有四种:默认定位(static).相对定位(r

ABP集合贴

thead>tr>th,.table>tbody>tr>th,.table>tfoot>tr>th,.table>thead>tr>td,.table>tbody>tr>td,.table>tfoot>tr>td{padding:8px;line-height:1.45;vertical-align:top;border-top:1px solid #ddd}.table>thead>tr&g

Css3新特性应用之视觉效果

一.单侧阴影 box-shadow属性的应用,格式:h-shadow v-shadow blur spread color inset属性取值介绍 h-sahdow:水平阴影的位置,允许负值 v-shadow:垂直阴影的位置,允许负值 blur:模糊距离 spread:阴影的尺寸,扩张距离,可以为负数 color:阴影的颜色 inset/outset:内部或者外部阴影阴影的扩张距离对四边都有效,不能单独应用于单边. box-shadow支持多组值同时生效的设置示例代码: .wrap{ wid

github page+jekyll搭博客初体验

div.oembedall-githubrepos { border: 1px solid #DDD; list-style-type: none; margin: 0 0 10px; padding: 8px 10px 0; font: 13.34px/1.4 helvetica, arial, freesans, clean, sans-serif; width: 452px; background-color: #fff } div.oembedall-githubrepos .oembe

一个简单移动页面ionic打包成app

先贴JS代码好了,缓动和调整透明度的功能,最后用ionic打包成应用就可以 window.onload=function(){ search(); move(); calc();}function search(){ var search = document.querySelector(".hw_header_box"); var banner = document.querySelector(".img_content"); var height = banne

纯CSS 图片演示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" c

多功能前台交互效果插件superSlide

平时我们常用的"焦点图/幻灯片""Tab标签切换""图片滚动""无缝滚动"等效果要加载n个插件,又害怕代码冲突又怕不兼容现在我们只需求要一个多功能前台交互效果插件superSlide就可以搞定了现在介绍这个插件SuperSlide.2.1.1 下载地址:http://www.superslide2.com/ js.min文件 /*! * SuperSlide v2.1.1 * 轻松解决网站大部分特效展示问题 * 详尽信息请

iMetro

body { background:#FFFFFF url("http://images.cnblogs.com/cnblogs_com/mookmark/745172/o_8.jpg") no-repeat fixed center; background-size:100% 100%; } home { background-color: #FFF; font-family: "微软雅黑"; font-size: 12px; color: #000; paddi

深入理解定位父级offsetParent及偏移大小

前面的话偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWidth这四个属性.当然,还有一个偏移参照——定位父级offsetParent.本文将详细介绍该部分内容定位父级在理解偏移大小之前,首先要理解offsetParent.人们并没有把offsetParent翻译为偏移父级,而是翻译成定位父级,很大原因是offsetParent与定位有关定位父级off

使用CSS3 制作一个material-design 风格登录界面

心血来潮,想学学 material design 的设计风格,就尝试完成了一个登录页面制作. 这是整体效果. 感觉还不错吧,结尾会附上代码在编写的过程中,没有使用任何图片或者字体图标,全部使用css3完成,还是遇到一些难点和bug,所以想笔记下来,以后方便查阅. 响应式设计在这个页面中,使用下面3点来完成响应式设计最大宽度 .设定了一个 max-width 的最大宽度,以便在大屏幕时兼容. margin : 20px auto; 使其保持时刻居中组件使用像素关于响应式的设计要点还有很多

自制移动端纯原生 Slider滑动插件

在Google搜关键字“slider”或“swiper”能找到一大堆相关插件,自己造轮子是为了能更好的理解其中的原理. 给这个插件取名为“veSlider”是指“very easy slider”非常简单的一个滑动插件. 这只是个半成品,仅仅实现了手指滑动.自动轮播.跳转等基本功能.代码撑死了200行不到,用的原理也比较简单粗暴. 点击跳转到Github上代码地址.扫描下面的二维码可以查看在线demo: 一.实现原理与效果 1)在下图中,将“ul”容器设置为相对定位,子标签“li”设置为绝对定位

javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件（一）

类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. 先贴上完成的效果. 实现原理不复杂,在动的一条一条的称之为“窗帘条”或者是“strip”,每一个strip都是一个div,类似于雪碧图的方式将其背景图的位置设置为strip的可视位置,然后用jquery的animate让他们按照一定规律动起来就完成窗帘切换效果了. 为了使用方便,将这个功能作为jq

神奇的CSS3按钮特效

点击这里查看效果以下是源代码: <!doctype html> <html>  <head> <title>CSS3神奇的按钮-柯乐义</title> <meta charset="utf-8"> <style> /* This is just the basic styling for the whole page. */ /* Glob

WebForm（四）——Repeater控件（重要、好用）

Repeater控件,可以用来一次显示一组数据项.比如,可以用它们显示一个数据表中的所有行. Repeater控件完全由模板驱动,提供了最大的灵活性,可以任意设置它的输出格式. 一.Repeater控件显示数据要使用Repeater控件显示数据,必须创建ItemTemplate.如下所示: 例1:使用ItemTemplate显示数据 <asp:Repeater ID="Repeater1" runat="server" DataSou

jquery——移动端滚动条插件iScroll.js

官网:http://cubiq.org/iscroll-5 demo: 滚动刷新:http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/ 'Carousel' demo iScroll功能很强大,目前我只用来自定义滚动条以下简单介绍一下iscrol在移动端自定义滚动条时的使用和注意事项. 一.用法 iScroll对要滚动的元素进行初始化,且不限制一个页面中使用iScroll的元素个数. 使用iScroll时,DOM树的结构要足够

css设置select高度（IE，FF,Chrome）[转]

大家都知道select是无法设置高度和边框颜色等等的在ie67下面,其他的都是可以的,所以有时候为了在所有的浏览器下显示都一致,就使用了 js的模拟,这个是大家经常碰到的,js不光要模拟外观还有模拟事件,有时候感觉有些麻烦,但是js模拟的最大优势就是外观可以任意设置,通用性强,就是在操作提交数据的时候有些麻烦,因为这个要用在不同的位置.就需要写很多不同的class或者id.(不过js还是最合适的) 我想尝试使用css来模拟实现可改变高度,其实ie67下可以通过设置font-size来实现改变s

relative left和margin-left

热门专题