margin | 易学教程

前端三贱客 -- CSS

阅读更多关于前端三贱客 -- CSS

CSS（Cascading Style Sheets）给你的html页面穿上衣服让其看起来性感，美观。 css选择器类选择器  <style type="text/css"> .cl{ background-color: blue; width: 200px; position: absolute; left: 0;top: 50px;bottom: 0; } </style> <div class="cl">class test</div> View Code ID选择器 1  2 <style type="text/css"> 3 #id1{ 4 background-color: red; 5 height: 30px; 6 font-size: 18px; 7 text-align: center; 8 line-height: 30px; 9 } 10 </style> 11 <div id="id1">好好学习，天天向上</div> View Code 标签选择器  <style type="text/css"> a { color: red; } </style> <ul>

div里面的margin-top失效

阅读更多关于 div里面的margin-top失效

div标签中的元素margin-top失效的解决方法元素上级标签是div，已经设置了width和height等的属性，可是，在对元素使用margin进行调整的时候，无法生效，下面有个不错的解决方法，感兴趣的朋友可以参考下如题。问题很奇葩。元素上级标签是div，已经设置了width和height等的属性，可是，在对元素使用margin进行调整的时候，无法生效。同学经验提示，对该元素的父元素属性设置成 overflow:hidden; 嵌套div中margin-top转移问题的解决办法在这两个浏览器中，有两个嵌套关系的div，如果外层div的父元素padding值为0，那么内层div的margin-top或者margin-bottom的值会“转移”给外层div。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title

web前端入门到实战：仿美团详情页与购物车源码-首页实现

阅读更多关于 web前端入门到实战：仿美团详情页与购物车源码-首页实现

效果图首先是index.html <!DOCTYPE html> <html> <head> <title>首页</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> <script type="text/javascript"> (function() { var docEl = document.documentElement; function setRemUnit() { // 获取到rem的基准值 var rem = docEl.clientWidth / 10; // 动态设置html根元素的font-size docEl.style.fontSize = rem + 'px'; } setRemUnit(); // 窗口大小变化时触发 window.addEventListener('resize', setRemUnit); // 窗口出现在当前屏幕时（有浏览器兼容性） window.addEventListener('pageshow', function(e) { if (e.persisted) { setRemUnit(); } });

CSS系列-margin的BUG

阅读更多关于 CSS系列-margin的BUG

1. 塌陷现象(子元素设置margin-top, 父元素会塌陷) 下面例子，此时子元素其实和父元素的距离是0，离父元素的兄弟节点才是100px 　　　　触发父元素的bfc, overflow: hidden, border : 解决方案1：父元素设置透明的 border: 1px solid transparent; box-sizing: border-box; 解决方案2：父元素设置 overflow: hidden ; 解决方案3：父元素设置 display: inline-block ; width: 100%; 2. margin 合并 a: 两个元素是兄弟关系，上面的一个元素的margin-bottom与下一个元素的margin-top取值为两者中最大值下面例子one和two的距离其实是200px,不是300px; 　　　　原因：同一个bfc的两个相邻的box会发生margin重叠；　　解决： two用div包裹起来，并且触发div的bfc(overflow: hidden), b: 两个元素是父子关系, 父子元素都有margin-top, 取最大那个例子：最终margin-top 是 20px; 解决方案：和塌陷一样来源： https://www.cnblogs.com/vs1435/p/12622692.html

各种轮播特效代码，无缝轮播与自动轮播

阅读更多关于各种轮播特效代码，无缝轮播与自动轮播

有时候做网页的时候会遇到特效，需要js来写，个人对js并不是很擅长，所以遇到需要用js写的特效都比较惆怅，把几组不同类型的代码保存下来，以后遇到就可以粘贴复制了，废话不多说了，下面步入正题先看一下运行的效果自动往上走的来看一下代码部分吧 html文件中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>文字无缝滚动效果代码</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script src="http://www.jq22.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="js/scroll.js"></script>

web前端入门到实战：前端高手在CSS 开发效率的必备片段

阅读更多关于 web前端入门到实战：前端高手在CSS 开发效率的必备片段

这篇文章会记录我们平时常用到的 CSS 片段，使用这些 CSS 可以帮助我们解决许多实际项目问题中遇到的，墙裂建议点赞收藏再看，方便日后查找清除浮动浮动给我们的代码带来的麻烦，想必不需要多说，我们会用很多方式来避免这种麻烦，其中我觉得最方便也是兼容性最好的一种是，在同级目录下再创建一个<div></div>；不过这样会增加很多无用的代码。此时我们用:after这个伪元素来解决浮动的问题，如果当前层级有浮动元素，那么在其父级添加上 clearfix 类即可。 // 清除浮动 .clearfix:after { content: "\00A0"; display: block; visibility: hidden; width: 0; height: 0; clear: both; font-size: 0; line-height: 0; overflow: hidden; } .clearfix { zoom: 1; } 垂直水平居中在 css 的世界里水平居中比垂直居中来的简单一些，经过了多年的演化，依然没有好的方式来让元素垂直居中(各种方式各有优缺点，但都不能达到兼容性好，破坏力小的目标)，以下是几种常见的实现方式绝对定位方式且已知宽高专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧

蚂蚁庄园

阅读更多关于蚂蚁庄园

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>chick</title> <style> html{min-width:320px;overflow-x:hidden} body,html{height:100%;line-height:1;-webkit-user-select:none;//禁止用户复制页面文本 -webkit-touch-callout:none;-webkit-overflow-scrolling:touch;//ios滚动效果 -webkit-font-smoothing:antialiased;//mac下字体 -webkit-tap-highlight-color:rgba(242,137,76,.05);://a标签点击高亮效果} article,aside,blockquote

鼠标拖拽移动子窗体

阅读更多关于鼠标拖拽移动子窗体

首先，这里有可以使用的例子，请点击这里下面可以看如何制作这个这个效果 1.子窗体在设计网站的时候，我们需要设计一些模态的子窗体，比如这一步很容易实现，只需要div+css就ok了，请看代码： <div class="modal-background"></div> <div class="modal-window"> <div class="head"> <center>点住着块区域可以改变我的位置</center> </div> </div> .modal-background { background-color: #999999; bottom: 0; left: 0; opacity: 0.3; position: fixed; right: 0; top: 0; z-index: 1100; } .modal-window { background-color: #FFFFFF; border: 1px solid #6B94AD; box-shadow: 5px 5px 5px #6B94AD; font-family: 'Microsoft YaHei'; font-size: 12px; height: 120px; left: 50%; margin-left: -160px; margin-top: -160px; opacity: 1;

负值之美：负margin在页面布局中的应用

阅读更多关于负值之美：负margin在页面布局中的应用

负边距创建自适应宽度的流体布局的实现方法 http://www.jb51.net/css/21617.html CSS布局奇淫技巧之-多列等高 http://www.cnblogs.com/2050/archive/2012/07/31/2616460.html 负值之美：负margin在页面布局中的应用 http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html 负边距在普通文档流中的作用和效果网页中没有脱离文档流的元素（绝对定位、固定定位等），其在页面中的位置是随文档流的变化而变化的，如下图：负边距会使它们在文档流中的位置发生偏移，但这种偏移不同于相对定位，通过相对定位偏移后，其仍然会坚守着它原来的空间，不会让文档流的其它元素乘虚而入，而通过负边距进行偏移的元素，它会放弃偏移前占据的空间（这点和绝对定位有点相似），这样它后面文档流中的其它元素就会“流”过来填充这部分空间。还是通过例子来说明吧。现在我们把上图中的块状元素、行内元素以及inline-block元素都设一个负边距 margin:-10px; 看看会发生什么：我们看到，黑灰色的块状元素好像向左和向上都分别嵌入了浏览器窗口的边界里10px,然后块状元素下面的文字也爬到了它身上，行内元素向左移动盖住了它前面的一个字

学习笔记-CSS-盒模型、BFC

阅读更多关于学习笔记-CSS-盒模型、BFC

先看一道题目：谈谈你对CSS盒模型的理解，思考应该如何回答... 涉及知识点(层层递进): 基本概念：标准模型+ IE模型(区别) JS如何设置获取盒子模型对应的宽和高实例题(根据盒模型解释边距重叠) BFC(边距重叠解决方案) 基本概念所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：不同部分的说明： margin(外边距) - 清除边框外的区域，外边距是透明的。 border(边框) - 围绕在内边距和内容外的边框。 padding(内边距) - 清除内容周围的区域，内边距是透明的。 content(内容) - 盒子的内容，显示文本和图像。盒子在标准流中的定位原则： margin控制的是盒子与盒子之间的距离，padding存在于盒子的内部它不涉及与其他盒子之间的关系和相互影响问题，因此要精确控制盒子的位置，就必须对margin有更深入的了解。（1）行内元素之间的水平margin 当两个行内元素紧邻时，它们之间的距离为第一个元素的右margin加上第二元素的左margin。（2）块级元素之间的竖直margin

订阅 margin