margin

盒子模型

由 浪尽此生 提交于 2020-01-17 13:46:42
padding:用于控制内容与边框之间的距离; margin: 用于控制元素与元素之间的距离; padding、margin 表示上右下左都应用 padding-top、margin-top 上 padding-right、margin-right 右 padding-bottom、margin-bottom 下 padding-left、margin-left 左 一个参数，应用于四边。 两个参数，第一个用于上、下，第二个用于左、右。 三个参数，第一个用于上，第二个用于左、右，第三个用于下。 来源： https://www.cnblogs.com/wed97/p/10104435.html

装修博客园--整体格局

由 ￣綄美尐妖づ 提交于 2020-01-17 13:33:39
使用SimpleMemory的皮肤，并在添加css代码 /*simplememory*/ #google_ad_c1, #google_ad_c2 {display:none;} .syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea { font-size: 14px!important; } #home { opacity: 0.80; margin: 0 auto; width: 85%; min-width: 950px; background-color: #fff; padding: 30px; margin-top: 30px; margin-bottom: 50px; box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); }

css中margin和padding

由 ≡放荡痞女 提交于 2020-01-17 13:17:14
转载： margin和padding的区别用图表示为： 　　padding margin都是边距的含义，关键问题得明白是什么相对什么的边距．padding是控件的内容相对控件的边缘的边距．margin是控件边缘相对父空间的边距．在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。 下面讲解 padding和margin常用的用法 一、padding 1、语法结构 （1）padding-left:10px; 左内边距 （2）padding-right:10px; 右内边距 （3）padding-top:10px; 上内边距 （4）padding-bottom:10px; 下内边距 （5）padding：10px; 四边统一内边距 （6）padding:10px 20px; 上下、左右内边距 （7）padding:10px 20px 30px; 上、左右、下内边距 （8）padding:10px 20px 30px 40px; 上、右、下、左内边距 2、可能取的值 （1）length 规定具体单位记的内边距长度 （2）% 基于父元素的宽度的内边距的长度 （3）auto 浏览器计算内边距 （4）inherit 规定应该从父元素继承内边距 3、浏览器兼容问题 （1

margin pading 区别

由 孤人 提交于 2020-01-17 13:09:22
margin 是外边距 padding 是内边距，用 CSS 时首先要做的就是把所有标签的 margin 和 padding 清空。这样更容易控制布局和兼容浏览器。 p li等标签都是默认有margin的 清空方法： *{margin:0; padding:0;} *是通配符，表示所有标签元素。 CSS把每个元素视为一个“ Box （盒子） ”，通过排列大大小小的多个“盒子”，完成页面的呈现。 关键是记着盒子模型其实是“一个套一个”的多个矩形，知道“ Border ”、“ Padding ”和“ Margin ”三个术语的含义。 margin 是标签和标签之间的空白 padding 是标签边框(Border) 和内容(Content) 之间的空白 通俗地说—— padding(内边距) 就是内容与边框的距离； margin（外边距） 就是边框与其他元素的距离。 margin是调整不同元素间的距离，padding是调整一个元素内的内容和元素边框的距离，可以理解为margin的级别比padding高，不过两个的语法是相同的 "margin padding在网站中是css样式 代码同下 a{margin:5px;padding:5px} 其实是有上下左右4个参数的,上边的写法是简写,实际上等价于 a{margin:5px 5px 5px 5px;padding:5px 5px 5px

css之margin && padding讲解

由 江枫思渺然 提交于 2020-01-17 13:08:31
margin && padding盒子模型： margin是模块与模块的空隙， padding是内容与边框的空隙 注： 1.margin：边缘、空白 2.padding：填充 margin： 属性 描述 margin 简写属性。在一个声明中设置所有外边距属性。 [1] margin-bottom 设置元素的下外边距。 margin-left 设置元素的左外边距。 margin-right 设置元素的右外边距。 margin-top 设置元素的上外边距。 语法结构 margin:5px auto;意思上下为5,左右平均居中 margin-top: 20px; 上外边距 margin-right: 30px; 右外边距 margin-bottom: 30px;下外边距 margin-left: 20px; 左外边距 margin:1px 四边统一边距 margin:1px 1px 上下边距 margin:1px 1px 1px 上,左右,下边距 margin:1px 1px 1px 1px 上,右,下,左边距 注释：允许使用负值。 语法举例 例子 1margin:10px 5px 15px 20px;上外边距是 10px 右外边距是 5px 下外边距是 15px 左外边距是 20px 例子 2margin:10px 5px 15px;上外边距是 10px 右外边距和左外边距是 5px

php+ajax 登录注册页面

由 馋奶兔 提交于 2020-01-16 23:20:22
主要是登录注册功能，前端后台验证没有什么，这个大家可以自己加上去，比如过滤啊，正则啊等 还是先放图吧 这是登录及注册界面 点击注册切换到注册界面，点击登录切换到登录界面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> body,html{ padding: 0px; margin: 0px; } .header { width: 100%; padding: 0px; margin: 0px; background-color: #699C03; } .header-nav { min-width: 1170px; height: 50px; line-height: 50px; } .header-nav-left { float: left; padding-left: 150px; margin-top: 10px; } .header-nav-left h3 { font-size: 18px; line-height: 25px; margin: 0px; color: #fff; }

浏览器常见兼容问题

由 99封情书 提交于 2020-01-16 12:22:34
CSS对浏览器器的兼容性具有很高的价值，通常情况下IE和Firefox存在很大的解析差异，这里介绍一下兼容要点。 常见兼容问题： 1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width 5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式 6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以 8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a

css 4种方法实现左右两侧固定 中间自适应布局

由 泪湿孤枕 提交于 2020-01-16 09:29:25
先来看一下最终效果： 代码： <!DOCTYPE html> < html lang = " en " > < head > < meta charset = " UTF-8 " > < meta name = " viewport " content = " width=device-width, initial-scale=1.0 " > < meta http-equiv = " X-UA-Compatible " content = " ie=edge " > < title > Document </ title > < style > .con { height : 200px ; background : #ccc ; margin-bottom : 10px ; } .con_l,.con_r { width : 200px ; height : 80% ; } .con_l { background : plum ; } .con_r { background : saddlebrown ; } .con_c { height : 100% ; background : slateblue ; } /* 1. float + bfc */ .con1_l { float : left ; } .con1_r { float : right ; } .con1_c

Excessive UL margin in Chrome and Firefox

由 你说的曾经没有我的故事 提交于 2020-01-16 03:53:11
问题 In my html, I have a generated ul element that hold li 's with img 's in them. I get a strange 3px (approx) excesive margin between my li 's in addition to css defined margin. Here is a Chrome debug console snapshot. A excessive area is outlined with red: A ul s style is the following: li 's style is: Exactly the same excessive margin appears in Firefox. Why is it there? How do I get rid of it? 回答1: Solved. It's how browsers render line breaks between li's. Had to force the html generator

前端学习（418）：京东制作页面26中间模块划分

由 岁酱吖の 提交于 2020-01-16 03:22:20
index.css /* 中间模块 */ .grid{height: 480px;} .grid-coll1{width: 190px;height: 100%;background-color: pink;} .grid-coll2{width: 790px;height: 100%;background-color: skyblue;margin-left:10px;} .grid-coll3{width: 190px;height: 100%;background-color:purple;} normalize.css /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ /* http://necolas.github.io/normalize.css/ */ /** * 1. Change the default font family in all browsers (opinionated). * 2. Correct the line height in all browsers. * 3. Prevent adjustments of font size after orientation changes in * IE on Windows Phone and
订阅 margin