css3的新单位vw、vh、vmin、vmax应该如何使用
这次给大家带来css3的新单位vw、vh、vmin、vmax应该如何使用，css3的新单位vw、vh、vmin、vmax使用的注意事项有哪些，下面就是实战案例，一起来看一下。本文介绍了css3新单位vw、vh、vmin、vmax的使用详解，分享给大家，具体如下:1，vw、vh、vmin、vmax 的含义（1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。（2）具体描述如下：vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）vh：视窗高度的百分比vmin：当前 vw 和 vh 中较小的一个值vmax：当前 vw 和 vh 中较大的一个值2，vw、vh 与 % 百分比的区别（1）% 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。 （2）vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。3，vmin、vmax 用处做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。4，浏览器兼容性（1）桌面 PCChrome：自 26 版起就完美支持（2013年2月）Firefox：自 19 版起就完美支持（2013年1月）Safari：自 6.1 版起就完美支持（2013年10月）Opera：自 15 版起就完美支持（2013年7月）IE：自 IE10 起（包括 Edge）到现在还只是部分支持（不支持 vmax，同时 vm 代替 vmin）（2）移动设备Android：自 4.4 版起就完美支持（2013年12月）iOS：自 iOS8 版起就完美支持（2014年9月）二、一个简单的样例1，页面代码视窗（Viewport）单位除了可以用来设置元素的宽高尺寸，也可以在文本中使用。下面使用 vw 设置字体大小来实现响应式文字。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>hangge.com</title> <style> html, body, div, span, h1, h2, h3 { margin: 0; padding: 0; border: 0; } .demo { width: 100vw; font-size: 5vw; margin: 0 auto; background-color: #50688B; color: #FFF; } .demo2 { width: 80vw; font-size: 5vw; margin: 0 auto; background-color: #ff6a00; } .demo3 { width: 50vw; height: 50vh; font-size: 1vw; margin: 0 auto; background-color: #ff006e; color: #FFF; } </style> </head> <body> <div class="demo"> <h1>宽度100％, 字体5％</h1> </div> <div class="demo2"> <h2>宽度80％, 字体5％</h2> </div> <div class="demo3"> <h3>宽度50％, 高度50％, 字体1％</h3> </div> </body></html>三、实现完整覆盖的遮罩层有时为了突出弹出框，或者避免页面元素被点击。我们需要一个覆盖整个可视区域的半透明遮罩，这个使用 vw、vh 就可以很轻易地实现。1，样例代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>hangge.com</title> <style> html, body, div, span, button { margin: 0; padding: 0; border: 0; } button { width: 120px; height: 30px; color: #FFFFFF; font-family: "微软雅黑"; font-size: 14px; background: #28B995; } #mask { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; background: #000000; opacity: 0.5; display: none; } </style> </head> <body> <button onclick="document.getElementById("mask").style.display="inline"">点击显示遮罩</button> <div id="mask" onclick="document.getElementById("mask").style.display="none""/></div> </body></html>四、实现居中显示的弹出框1，弹出框大小随内容自适应（1）样例效果图点击弹出按钮后，会显示一个在整个屏幕上居中显示的弹出框。弹出框的大小根据内容的大小自适应（logo 图片），同时弹出框后面还有个覆盖整个屏幕的半透明遮罩层。点击关闭按钮后，则隐藏弹出框。（2）样例代码遮罩层使用 vw、vh 实现全屏覆盖。弹出框添加到遮罩层中并居中。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>hangge.com</title> <script type="text/javascript" src="js/jquery.js"></script> <style> html, body, div, span, button { margin: 0; padding: 0; border: 0; } button { width: 120px; height: 30px; color: #FFFFFF; font-family: "微软雅黑"; font-size: 14px; background: #28B995; } .dialog-container { display: none; width: 100vw; height: 100vh; background-color: rgba(0,0,0,.35); text-align: center; position: fixed; top: 0; left: 0; z-index: 10; } .dialog-container:after { display: inline-block; content: ""; width: 0; height: 100%; vertical-align: middle; } .dialog-box { display: inline-block; border: 1px solid #ccc; text-align: left; vertical-align: middle; position: relative; } .dialog-title { line-height: 28px; padding-left: 5px; padding-right: 5px; border-bottom: 1px solid #ccc; background-color: #eee; font-size: 12px; text-align: left; } .dialog-close { position: absolute; top: 5px; right: 5px; font-size: 12px; } .dialog-body { background-color: #fff; } </style> </head> <body> <button onclick="$("#dialogContainer").show();">点击显示弹出框</button> <div id="dialogContainer" class="dialog-container"> <div class="dialog-box"> <div class="dialog-title">居中弹出框</div> <a onclick="$("#dialogContainer").hide();" class="dialog-close">关闭</a> <div class="dialog-body"> <img src="logo.png" class="demo-image" /> </div> </div> </div> </body></html>2，弹出框大小随视窗大小改变（1）样例效果图点击弹出按钮后，会显示一个在整个屏幕上居中显示的弹出框。弹出框的大小不再由内容的大小决定，而是随视窗大小改变（宽高均为屏幕可视区域的 80%）。点击关闭按钮后，则隐藏弹出框。（2）样例代码遮罩层使用 vw、vh 实现全屏覆盖。而弹出框的尺寸位置同样使用 vw、vh 设置。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>hangge.com</title> <script type="text/javascript" src="js/jquery.js"></script> <style> html, body, div, span, button { margin: 0; padding: 0; border: 0; } button { width: 120px; height: 30px; color: #FFFFFF; font-family: "微软雅黑"; font-size: 14px; background: #28B995; } .dialog-container { display: none; width: 100vw; height: 100vh; background-color: rgba(0,0,0,.35); text-align: center; position: fixed; top: 0; left: 0; z-index: 10; } .dialog-box { top:10vh; left:10vw; width: 80vw; height: 80vh; text-align: left; position: absolute; border: 1px solid #ccc; display: flex; flex-direction: column; } .dialog-title { line-height: 28px; padding-left: 5px; padding-right: 5px; border-bottom: 1px solid #ccc; background-color: #eee; font-size: 12px; text-align: left; } .dialog-close { position: absolute; top: 5px; right: 5px; font-size: 12px; } .dialog-body { background-color: #fff; flex:1; overflow: auto; } </style> </head> <body> <button onclick="$("#dialogContainer").show();">点击显示弹出框</button> <div id="dialogContainer" class="dialog-container"> <div class="dialog-box"> <div class="dialog-title">居中弹出框</div> <a onclick="$("#dialogContainer").hide();" class="dialog-close">关闭</a> <div class="dialog-body"> <img src="logo.png" class="demo-image" /> </div> </div> </div> </body></html>五、显示大图时限制其最大尺寸我们还可以通过视图单位来限制一些元素的最大宽度或高度，避尺寸过大而超出屏幕。（1）点击按钮，在屏幕中央显示原始图片的大图。 （2）如果图片原始宽高均不超过屏幕宽高的 90%，则显示图片的默认大小。 （3）如果图片原始宽高均超过屏幕宽高的 90%，则限制为屏幕的 90%，使其能够完全显示。相信看了这些案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！相关阅读：html5怎样做出图片转圈的动画效果用H5的WebGL如何在同一个界面做出json和echarts图表H5的语义化标签新特性应该如何使用
css背景图片里如何加点击超链接
写div覆盖上去写a链接， 直接给背景图片是加不上的，链接两个网址写两个div加两个不同的连接就可以
请写一个CSS样式单独控制网页中一个表格，CSS样式只能建在里面
就第一行修改为下面这句就可以了，细节部分，自己调吧<table width="650" border="2" style="font:12px Arial, Helvetica, sans-serif;text-align:center; line-height:30px;" >另外没理解你说的半框是什么意思，还有你说只能写在tbody中，但你提供的代码没有写tbody。不过不管怎样，代码就是上面这些，放在tbody中也一样实现，只不过加在table中是设置table全局，而tbody，你也知道，是局部仍有疑问的话，追问吧
求教高手，如何使用css控制表格主体(tbody)部分超出指定高度之后显示滚动条？
tbody { height: 200px; /* 指定高度不然不会出现滚动条 */overflow: auto; //设置自动适应,强制出项滚动条overflow:scroll;}
css表格没数据tbody
你要在表格内实现无数据显示的效果，你可以将每一个表格里面的td都设置一个class="hide",，然后样式里面直接就写.hide{visibility:hidden;}你要隐藏那些单元格就隐藏那些单元格，不用担心跨列的问题当然如果用js来写的话，也是可以的，但是麻烦一些，用class是最简单的
谁能帮我翻译CSS
搞笑回答:cs是反恐精英游戏s是很多合起来是有很多cs游戏
css的教程xx-large是啥意思
就是特别大的意思，是一个相对单位，买衣服的时候常见XXL，但各浏览器对这个尺寸理解可能不太一样，所以现在用的不多了，还是指定绝对尺寸比较好。
css中@media only screen and (max-width:639px){
这位网友你好，这是媒体查询代码，表示只有在屏幕尺寸小于639像素的时候才会应用下面的样式。如果想要在手机端自适应，你还需要写上下面这句话。<meta name="viewport" content="width=device-width, initial-scale=1"/>
网页制作不使用css3怎么做出自适应圆角矩形
在网页代码的头部，加入一行viewport元标签。<metaname="viewport"content="width=device-width,initial-scale=1"/>viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。2由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。对图像来说也是这样。具体说，CSS代码不能指定像素宽度：width:xxxpx;只能指定百分比宽度：width:xx%;或者width:auto;3字体也不能使用绝对大小（px），而只能使用相对大小（em）。例如：body{font:normal100%Helvetica,Arial,sans-serif;}上面的代码指定，字体大小是页面默认大小的100%，即16像素。4流动布局（fluidgrid）"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。.main{float:right;width:70%;}.leftBar{float:left;width:25%;}float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。5"自适应网页设计"的核心，就是CSS3引入的MediaQuery模块。它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。<linkrel="stylesheet"type="text/css"media="screenand(max-device-width:400px)"href="tinyScreen.css"/>上面的代码意思是，如果屏幕宽度小于400像素（max-device-width:400px），就加载tinyScreen.css文件。<linkrel="stylesheet"type="text/css"media="screenand(min-width:400px)and(max-device-width:600px)"href="smallScreen.css"/>如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。END参考下面的例子——我称它为“盒子”<!doctypehtml><htmllang="en"><head><metacharset="utf-8"><!--viewportmetatoresetiPhoneinitalscale--><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Demo:ResponsiveDesignin3Steps</title><!--css3-mediaqueries.jsforIE8orolder--><!--[ifltIE9]><scriptsrc="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]--><styletype="text/css">body{font:1em/150%Arial,Helvetica,sans-serif;}a{color:#669;text-decoration:none;}a:hover{text-decoration:underline;}h1{font:bold36px/100%Arial,Helvetica,sans-serif;}/************************************************************************************STRUCTURE*************************************************************************************/#pagewrap{padding:5px;width:960px;margin:20pxauto;}#header{height:180px;}#content{width:600px;float:left;}#sidebar{width:300px;float:right;}#footer{clear:both;}/************************************************************************************MEDIAQUERIES*************************************************************************************//*for980pxorless*/@mediascreenand(max-width:980px){#pagewrap{width:94%;}#content{width:65%;}#sidebar{width:30%;}}/*for700pxorless*/@mediascreenand(max-width:700px){#content{width:auto;float:none;}#sidebar{width:auto;float:none;}}/*for480pxorless*/@mediascreenand(max-width:480px){#header{height:auto;}h1{font-size:24px;}#sidebar{display:none;}}/*border&guideline(youcanignorethese)*/#content{background:#f8f8f8;}#sidebar{background:#f0efef;}#header,#content,#sidebar{margin-bottom:5px;}#pagewrap,#header,#content,#sidebar,#footer{border:solid1px#ccc;}</style></head><body><divid="pagewrap"><divid="header"><h1>Header</h1><p>Tutorialby<ahref="http://webdesignerwall.com">WebDesignerWall</a>(read<ahref="http://webdesignerwall.com/tutorials/responsive-design-in-3-steps">relatedarticle</a>)</p></div><divid="content"><h2>Content</h2><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p></div><divid="sidebar"><h3>Sidebar</h3><p>textg</p><p>fgs</p><p>fgsg</p><p>dg</p><p>dfgfd</p><p>是否感到反感</p><p>sgrtg</p><p>分公司</p><p>sgf</p><p>text</p></div><divid="footer"><h4>Footer</h4></div></div></body></html>
umi中使用postcss-px-to-viewport进行移动端适配
4.完事！ 附全图：
CSS 命令 微信公众平台 自适应屏幕大小
显示为铺满一排，也要看你的字数多少。如果你是想要文字根据屏幕大小改变，那你可以用这个单位。例子：font-size:3.6vmin;
vant+postcss-px-to-viewport 记一次移动端网页适配之旅
本次的需求其实很简单，即为公司制作一个可以在微信公众号上使用的网页，但是由于自己对移动端组件以及很多东西不熟悉，踩了很多坑。 一开始直接动手写乃至用element，完全达不到合格的美观程度，缩放element-ui元素很困难（在被科普了vant这样的移动端ui之后才知道这是一种愚蠢的行为），于是终于操起vant vant很好用，但是把vant组件直接放在页面上遇到一个直接问题：太小了，同样尝试了一下缩放组件，但是这个操作工程量大且不一定美观，于是研究了一番发现：vant是按照375px的设计稿写的，其css大多单位是px，这能直接用就怪了，咨询了一波公司的前辈，得知他是把vant css中的px替换为rem来操作的，于是我打开css直接CTRL+F px转rem，当然两者有16倍关系我还是懂的，于是采取了根元素 我屏幕宽为1080px，将元素长度宽度除16再乘（1080/375）可让vant元素刚好填满我的屏幕，当然对于别的屏宽就暂时顾不了了，但是毕竟可用@media and screen来解决吗。 实践结果是，vantage元素合适地填满了我的chrome，填满了我的手机屏，却在微信处翻了车，一个复选框的边框厚得像门一样，此处图和原因再补。 发现这种方法没办法达成对微信的适配后，我转向了插件，起初使用的是postcss-pxtorem，其自动将css中的px转为rem，但这种方法还要搭配 lib-flexible 食用，而该库的作者这样告诉我们：有了viewport适配，我们已经退出历史舞台了。毕竟用一个库总比用两个方便，而且人家库作者都这么说了，便安装postcss-px-to-viewport，中间踏了点webpack的坑，但是postcss-px-to-viewport正常工作后效果拔群，一步完成适配，也不用去想@media and screen了。 关于px转rem与viewport，具体方案见 https://sunniejs.github.io/vue-h5-template/#/zh-cn/rem
css与xsl的比较？（至少5点）
XSLT是一种用来转换XML文档结构的语言；CSS同样可以格式化XML文档，CSS虽然能够很好的控制输出的样式，比如色彩，字体，大小等，但是它有严重的局限性，就是：1、 CSS不能重新排序文档中的元素； 2、CSS不能判断和控制哪个元素被显示，哪个不被显示； 3、CSS不能统计计算元素中的数据； CSS只适合用于输出比较固定的最终文档。CSS的优点是简洁，消耗系统资源少；而XSLT虽然功能强大，但因为要重新索引XML结构树，所以消耗内存比较多。2个要合理的搭配
CSS里面，rem是什么单位？
rem是一个相对单位，相对根元素字体大小的单位。我们只需要指定根元素为参考值，就可以了。主要用于屏幕适配布局，移动端使用比较广泛。使用这种方式，只要根据不同屏幕设置不同的根元素即可使系统适配不同的屏幕。希望可以帮到你
zend studio 怎么设置html css js代码提示？
我也想知道啊~~~Mark一下
在CSS 中，用 float 和 position 的区别是什么
float：浮动 作用就是改变块元素(block element)对象的默认显示方式。block对象设置了float属性之后，它将不再独自占据一行。可以浮动到左侧或右侧。浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。position：移动 这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。他俩最大的区别是：float只能靠左或靠右移动但不能超过div的款宽 position只可以定位不能移动 可以根据其他属性进行移动
css的span问题
CSS权重！！！！如果你的代码没错，而理论上 a的样式也应该是正确的的话```那请搜索CSS权重！！！！
webstrom设置为一个css属性后,怎样快速跳转到大括号后面方便写下一个
方法/步骤 首先我们双击桌面的webstorm图标，打开webstorm。 之后随便打开一个文件就可以看到其字体大小，方便一会儿比较。 然后点击上面菜单栏的“文件”，找到其子菜单中的“设置”，点击打开。 在打开的新窗口中找到“Editor”选项，点击它前面的加号。 然后再找其子菜单中的选项，直到找到“Font”选项，点击即可。 这时候在右侧就可以设置其字体和大小了，设置完成后点击下面的确定按钮即可。 跟原来的字体大小比较发现其已经变化了。
phpstrom 保存js或css出错，提示视图保存文件时发生以下错误！ 急求帮助！高分悬赏！
每个文件都是这样？ 查看下JS文件的属性 是否是只读状态
如何制作css sprite图
注意：不要等到你完成切片之后才开始sprite.如果你边切图边写CSS，然后等你完成了整个网站之后再来拼接这些图片到一个Sprite中，你就不得不完全重写你的CSS，你也必须要花费很多的时间来用PS拼接大量的图片——这是件令人倍感纠结的事情。但是如果边切图边整合，就会比较容易些。把图片放到它要显示的地方的相对的地方这个小技巧貌似比较难理解。我直到创建一个比较大的sprite的时候才理解到这一点。比如，如果我们希望一个图片出现在一个元素的左侧：将那个图片放到sprite图片的右边(本文开始的那个sprite图片)。这样的话，当你通过CSS移动背景图片的位置的时候，基本上不可能有其它的小图片意外的出现在它的附近。使用Sprite的时候常常遇到的一个问题是图片会出现在它不该出现的位置。定位时避免使用bottom或right等当使用CSS sprite的时候，只用background-position: bottom -300px或background-position: right -200px;非常容易。这刚开始的时候是可行的，但是问题是，当你在宽度上或高度上扩展相关sprite图片的时候，原先设置的位置可能是错的，因为那个图片已经不再Sprite图片的底部或右部了。使用确切的位置来避免这个问题。给每个图片足够的空间就像你在本文顶部的实例图片看到的那样，那些小图片都被预留了足够的空间。为什么不把他们塞到一块来让sprite图片更小呢？ 因为使用这些图片的元素通常都会有大量的内容而且可能会需要扩展的间距，以至于其它图片不会意外出现。例子：例子中的每个条目都有个带数字的图片作为背景图片。如果你仔细看了上面的那张图片，你可以看到这三个数字图片是如何错开排列的，这样如果内容增多，其它图片就不会意外出现。不用担心Sprite图片的像素大小如果你的网站经过良好的设计，那么你将会有一大堆的图片来整合进到sprite里面，这样你就需要你个非常大的sprite来恰当的放置这些图片。这是很不错的。sprite里的空白不会占用太多的文件大小。addons.mozilla.org上使用的Sprite图片有1,000px×2,000 px那么大，但是图片的大小仅仅16.7kb 当用户往U盘中拷200张图片，会等很久。但是如果弄成一个文件，再拷贝就会快很多。CSS Sprites 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。实现方法：首先将小图片整合到一张大的图片上然后根据具体图标在大图上的位置，给背景定位。background-position:-8px -95px;
CSS sprite 对性能究竟有多大影响
CSS sprite 可以减少请求数、图片的总 size 和提前加载图片，但大图片合并可能导致页面显示速度变慢，如果搭配不合理也可能令图片失真
跨站脚本攻击xss和css的区别
下列规则旨在防止所有发生在应用程序的XSS攻击，虽然这些规则不允许任意向HTML文档放入不可信数据，不过基本上也涵盖了绝大多数常见的情况。你不需要采用所有规则，很多企业可能会发现第一条和第二条就已经足以满足需求了。请根据自己的需求选择...
Css权威指南(4th，第四版中文翻译)-8.Padding,Borders,Outlines,Margins
在上一章节，我们讨论了元素显示的基本特点。而在这一章，我们将看到css属性是如果改变元素显示外观的，这包括了padding，border，margin。 众所周知，所有的document元素都会生成一个长方形的box来布局，称为元素box，而且这个box是具有排他性的，同一个区域是不允许有多个box交叠的。这就是前端最熟悉的盒模型： 一般来说，这里说的宽度和高度指的都是上面图中inner edge的宽和高。而这两个属性最重要的一点就是它们不作用于inline的不可替代元素。举例来说， 如果你给链接设置了宽高，那么浏览器就会忽略这些声明： 在盒模型中，从里到外的第2层就是padding： 该属性接受任何的长度值，包括百分比。例如： 从上图中我们发现，padding也是在背景的覆盖范围的。 默认来说，元素是没有padding的。但一般情况下我们还是希望有padding的，不然border有时候看起来就离内容太近了： 另外padding是由方向的设置顺序的，来看下： 而且每个方向上，你所用的长度单位都可以是不一样的，举个列子： 有时候你会碰到相同的padding数值，例如 这可以简化为： 这是怎么实现的呢？其实在CSS内部定义了一套规则： 换句话说，如果只给了三个值，那么第四个left就会拷贝right的值。如果只给定2个值，那么第三个拷贝第一个，第4个拷贝第二个。如果只给了一个值，那么所有值都从它身上拷贝。 这个属于大家非常熟悉的部分了： 百分比的计算核心在于标准的确定，在padding中，其标准就是父元素的内容区域的宽度。举个例子： 设置百分比的padding存在一个问题，就是当父元素未设置宽度，而且随着浏览器会变化宽度的情况，那么这个padding的宽度也会跟着一起变动。 如果对一个inline元素施加padding是不会改变元素的高度的，例如： 这是因为对于不可见的背景情况下，padding是被设置为透明的，所以上面的声明不会改变行高。但如果设置了背景，情况就不一样了： 上面我们看到了处理padding top和bottom的情况，但是left和right的padding有点不同。如果对inline元素设置了left和right的padding是有效果的： 那如果inline元素跨行了会怎么样呢？ 很自然的，left作用于开头，而right作用于结尾。 我们还是拿图片来举例，试着为图片添加padding： 不管可替换元素是block的还是inline的，这一padding都会加上，如下图所示： 在padding外面一层的为border，默认来说，background的颜色的边界就是在border这层。而每个border都有三部分组成：宽度，厚度和样式。对于宽度来说，默认值为medium，一般来说是2px。但有没有发现平常我们很少注意到，每个元素的border宽度已经设置好了？那是因为border的样式默认设置为none，所以我们压根看不到。最后来说说border默认的颜色，就是它的前景色（foreground color）。 另外刚说了背景区域到border位置，但是到border的内边界还是外边界没说。其实按照CSS的标准定义，这个需要扩展到外边界，因为有些border是dotted的。 border的样式是最重要的，因为你不设置，它就压根不出来。 CSS中定义了10中不同的样式，包括默认的none，列举如下： 其中最难搞得就是double，border样式为两行，而其中的空白的宽度就是border-width的宽度。而且CSS标准中并没有规定两条线的粗细的标准，都依赖浏览器去实现。 下面来看看另外需要颜色的border类型：inset，outset，groove，ridge 默认来说，border的颜色是基于元素的颜色。但是颜色的变化又得完全依赖浏览器去实现，来看看不同的实现： 在border-style属性中是允许同时定义多种border的： 这样设置的结果是什么呢？那就是top border为solid，right border为dashed， bottom border为dotted ，left border为solid。就像之前定义的padding一样。 来看个具体的例子： 如果想要设置单侧的样式，可以使用下列的一系列属性： 来看个具体的例子，设置h1三边包围： 上面需要注意的是，针对第二种方案，必须将border-left-style样式放在后面，不然就会被后者替换。 设置完style后，接下来就需要设置宽度width： 对应的单侧的设置为： 总共有4种方式来设置border的宽度，可以是像4px这样的数值，也可以是另外3个关键词（thin，medium，thick）。但要注意这三个关键词没有对应具体的数值，按照CSS标准，只要层层加厚就可以，依赖于浏览器实现。 我们假定一个段落p有个背景色和border style border的width默认为medium，我们将其修改下： 来玩个极限的，将宽度设置为50px： 当然也可以设置单侧的宽度： 想要去掉border非常简单： 哪怕设置了宽度，如果style被设置为了none，那么border也不会显示，那这是为什么呢？这是因为如果将style设置为none，那么CSS就会将其视为是不存在的，然后自动将其宽度设置为0，无论你自己定义了什么。就像一个杯子已经空了，那么再来描述他是半满的是没有任何意义的。 这一点为什么重要呢，因为很多人容易忘记来声明一个border的样式。例如： 来看个颜色的示例： 当然也可以为不同的side设置不同的颜色： 如果没有设置颜色，那么就会获取当前元素的前景色： 当然也可以设置单侧的border颜色： 就像我们上面提到的，如果border没有style，那么久没有宽度。那如果碰到需要设置宽度但是border又不可见的情况怎么办？答案是将颜色设置为transparent。例如： 试想下这种情况，如果要针对某一边添加widith，style和color。如果单独设置的话其实还是蛮麻烦的： 但如果可以简化的话，那就方便很多了： 针对每个side属性的简化顺序为： 完全可以按照上面的定义来设置更复杂的border设置： 而且这些值得顺序也是不用担心的，下面的规则和上面的是一样的： 另外值得注意的是，在简化版中避免重复的类型值，比如两个width等： 这会导致浏览器直接忽略这条规则。 现在我们回到border属性本身： 来看看怎么用的吧： 这个会自动应用到每个方向上： inline元素之前已经讲了很多了，现在主要简单讲几个需要注意的点。 首先就是不论border设置的width多厚，inline元素的line height都不会改变： top和bottom的border是不可以的，但是left和right都是可以的： 而对于可替换元素来说，border是会影响行高的： 为了支持圆角的边框，border引入了border-radius属性来设置： 如果想要实现边角的圆角过渡，可以如下设置： 如果给定的是一个百分比值，那么结果很可能就是一个椭圆，因为长宽的基准值不一样： 另外，跟其他元素一样，border-radius也可以设置多个值,位置从左上沿顺时针到底部左侧。 而参数个数为3个的时候也是一样的，第4个参考第2个： 而在上图中重点到不是边角，而在于内容区域的右下角也发生了圆滑过渡，这是因为内容区域的背景和padding的背景不同所致，我们将在后面一章中详细讨论。 border-radius在原理上修改的是border和background的渲染，而不是盒子模型本身，来具体看下： 刚刚我们看到了设置单个值得情况，那如果设置2个值会怎么样呢？如果我们想要在水平方向设置3英寸，而在垂直高度设置1英寸。我们不能直接这样写： 因为这样我们会将左上，右下对角线一个宽度，而右上和左下对角线有一个宽度。而是应该使用： 而这相当于下面的表达式： 下面是一个简单的例子： 接下来来个更复杂的： 不同的颜色和样式在角的位置的渲染效果是不同的： 上面第一个是简单的圆角，第二个在厚度上出现了变化。第三个颜色和厚度是一样的，但是角的曲线从solid变成了double。而且样式间的过渡被阻断了。第四个我们把厚度和样式做了改变。第5第6个开始出现颜色的变化，但是都是直接的改变而没有渐变。而第七种情况则是厚度相同，颜色发生渐变，但是可以看到，只有外侧发生了变化，而内侧还是直角，示例如下： 值得注意的是，这次是不同在水平和垂直方向加/的，来看下： 上面两个是一样的。 如果你想要使用一张图片来作为border，那么可以使用border-image-source： 让我们使用一张单个圆点的图片作为border背景： 这里需要注意几个地方，如果没有定义border:25px solid; 按照之前的说法，没有style，border其实默认是不显示的。另外就是border-width其实就是后面border图片的宽度。 那令人奇怪的是，为什么图片只出现在角落里，边上为什么没有，而这就需要用到下面这个属性了： slice也是接收4个值，完全遵从top，right，bottom， right的CSS默认赋值流程，而且数值也是基于百分比的值。 我们就以3 x 3 的网格图为例来看下效果： 注意到中间的一块空了，这是因为css中自动把中间的内容设置为empty，具体会在后面讲解原理。 slice属性的不同百分比对应不同的边缘裁切效果： 这就是我们为什么选取3 x 3网格图的原因，可以清晰的看到裁剪后的边框效果。除了上面的百分比，我们也可以使用数字，一般对于栅格图来说就是像素值，来看个例子： 回到之前的中心空白问题，这其实可以通过fill来填充回来： 而且从效果上来说会覆盖到其他的背景元素之上，因此可以作为背景的替代。 同时之前我们看到的宽度都是相同的，而其实可以为border的4个方向设置不同的宽度，然后border-image会自动匹配到对应宽度： 如果想要自己来设置border图片的宽度，可以使用border-image-width： border-image-width其实和border-image-slice差不多，而不同的是前者就是border box本身。为了更好理解这个意思，我们假定宽度设置为1em: 其示意图如下： 边框都是1em宽，那么如果来填充呢，这里涉及多个属性，由border-image-slice生成的图片要经过border-image-repeat的处理，然后显示在border-image-width定义的盒子里面。
css样式表名字有什么规则?
你是指命名吗？常用的CSS命名规则:头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center登录条：loginbar 标志：logo 广告：banner 页面主体：main 热点：hot新闻：news 下载：download 子导航：subnav 菜单：menu子菜单：submenu 搜索：search 友情链接：friendlink 页脚：footer版权：copyright 滚动：scroll 内容：content 标签页：tab文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title加入：joinus 指南：guild 服务：service 注册：regsiter状态：status 投票：vote 合作伙伴：partner(二)注释的写法: /* Footer */ 内容区 /* End Footer */(三)id的命名:(1)页面结构 容器: container 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center(2)导航 导航：nav 主导航：mainbav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 标题: title 摘要: summary(3)功能 标志：logo 广告：banner 登陆：login 登录条：loginbar 注册：regsiter 搜索：search 功能区：shop 标题：title 加入：joinus 状态：status 按钮：btn 滚动：scroll 标签页：tab 文章列表：list 提示信息：msg 当前的: current 小技巧：tips 图标: icon 注释：note 指南：guild 服务：service 热点：hot 新闻：news 下载：download 投票：vote 合作伙伴：partner 友情链接：link 版权：copyright(四)class的命名:(1)颜色:使用颜色的名称或者16进制代码,如 .red { color: red; } .f60 { color: #f60; } .ff8600 { color: #ff8600; }(2)字体大小,直接使用"font+字体大小"作为名称,如 .font12px { font-size: 12px; } .font9pt {font-size: 9pt; }(3)对齐样式,使用对齐目标的英文名称,如 .left { float:left; } .bottom { float:bottom; }(4)标题栏样式,使用"类别+功能"的方式命名,如 .barnews { } .barproduct { }
css中两个点是什么意思比如.mani.yer{width:100px; height:22px; background:#930;}
点是指的方法。﹟代表空间id还有是表示标签的。
rivatunerstatisticsserver可以卸载吗
可以。RivatunerStatisticsServer是来自国外的一款超专业的显卡超频锁帧工具，是一款能够适配于多种不同型号显卡的超频调试软件，但并不是电脑必需品是可以卸载的，步骤如下：1、首先打开我的电脑。2、其次，选择应用管理。3、然后，在上方的搜索框内输入RivatunerStatisticsServer，点击搜索。4、最后，点击后方的卸载即可。
阿里巴巴旗下的1688和速卖通是不是不支持css和jss样式?
这个代码有些可以用，有些不可以用的，JS是肯定不可用的。css样式只能这样用。不能引用如 <div style="font-size:12px;"></div> 这样来使用！模板市场的都是阿里申请的设计师开发的，有引定的存放css js空间。！这不一样的。做阿里的模板设计师要申请的！阿里会给一个类似后台的东西上传CSS和JS文件！
在Swiper内如何制作CSS3动画效果示例代码
前言Swiper 是一款免费以及轻量级的移动设备触控滑块的框架，使用硬件加速过渡（如果该设备支持的话）。主要使用与移动端的网站、网页应用程序（web apps），以及原生的应用程序（native apps）。主要是为IOS而设计的，同时，在Android、WP8系统以及现代桌面浏览器也有着良好的用户体验。本文主要给大家介绍了关于Swiper内制作CSS3动画效果的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。1、在需要添加动画的页面里面引入以下几个文件 版本对应<script src="../js/swiper.min.js"></script><script src="../js/swiper.animate.min.js"></script>//**这里引入jquery或者zepto.js都可以**//<script src="../js/jquery-1.9.1.js"></script><link rel="stylesheet" href="../css/animate.min.css" rel="external nofollow" >2、接着在页面js部分添加(按业务需求)var mySwiper = new Swiper(".swiper-container",{ autoplay : 5000,//自动切换时间 pagination : ".swiper-pagination", //pagination : "#swiper-pagination1", onInit: function(swiper) {//轮播初始化时候执行动画 swiperAnimateCache(swiper); swiperAnimate(swiper); }, onSlideChangeEnd: function(swiper) {//轮播切换到最后一张的时候重新执行 swiperAnimate(swiper); } })3、在需要执行的动画的元素上面添加class: 给需要执行动画的元素上添加class ("ani"、"animated") 然后可以添加animate.css里面提供的一些动画 如果animate.css里面的动画不能满足需求 也可以自定义一些动画 直接在执行动画的元素对应的css里面添加自定义的动画样式 还可以在元素上面配置一下几个参数 swiper-animate-effect：切换效果，例如 fadeInUp swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s4、下面是案例参考链接：http://www.swiper.com.cn/usage/animate/index.html总结
css3怎么实现table表格thead立体感
给你写了个简单的课程表样式的表格 看一下 table { border-collapse:collapse;text-align:center; vertical-align:middle;} table tr{ height:25px;} table td{ width:100px;} .bg1{ background:#ccc;} table tr:hover{ background:#09C;}
在css中lt;tr>lt;th>分别是什么意思
tr 是一行，td是列，th是加重
css滤镜里的style="1/2/3"代表什么
“opacity”：代表透明度水准。范围是从0~100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。 “finishopacity”：是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。 “style”：指定了透明区域的形状特征。其中0代表统一形状、1代表线形、2代表放射状、3代表长方形。
CSS如何定义DIV背景半透明颜色
filter:alpha(opacity=50); /*IE滤镜,透明度50%*/ opacity:0.5; /*IE9+及其他浏览器*/
css怎么设置透明度
有两种：1、background:#000; opacity:0.5; 这个方法是给盒子背景颜色透明，但盒子里面有内容的话，连内容也会透明，就是说子元素会继承上一级的属性2.background:rgba(0,0,0,0.5); 这个只针对背景颜色，子元素不会继承上一级的属性
css怎么调背景图片透明度
不知道你说的背景图片透明度，是不是要将图片变成透明的，好让它和网页颜色契合？
css3循环动画在第一次执行的时候可以设置多少秒之后开始执行，但到了下一次开始执行的间隔时间怎么设置？
@keyframes f2{0% {opacity:25%;}25% {opacity:50%;}50% {opacity:75%;}60% {opacity:1;}70% {opacity:1;}80% {opacity:1;}90% {opacity:1;}100% {opacity:1;}}主要是看60%以后的内容是一样的,停留多久就看你自己编辑了 我测试过了！
怎样在CSS样式中,设置背景的透明度呢?
删除body{}内的背景颜色,如#000000,然后加入.modbox,.modbl,.modbc,.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%},调整opacity增减透明度,一般时需要删除左背景图#header div.lc{}右背景图#header div.rc{}TAB菜单主体#tab{background:#000000}左下角背景.modbl{}中下角背景.modbc{}右下角背景.modbr{}
如何用css实现半透明遮罩层效果
http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201504221722.html这个应该是最靠谱的了吧，不过应用的时候调用比较麻烦。
如何用css设置透明色？
把#m_pro .photo{background:#FFF;border:1px solid #DDD}改为 #m_pro .photo{background:transparent}
css+div 如何实现 鼠标经过图片是 半透明 移开 是不透明 （调用外部 样式表能实现吗？）
写的很正确啊。IE用滤镜就行，又不是什么大项目，尽管用没问题。over : filter:alpha(opacity=40);opacity:.4;out: filter:alpha(opacity=100);opacity:1;
CSS中背景颜色透明度如何设置？
opacity:50
请问:怎样用CSS来设置网页背景图片的透明度?
单纯从你的想法是做不到的，但是你可以这样：把图片背景从原来的位置分离到一个div里面去，这个div大小和原先背景图片的尺寸一样大小，这个div设置透明度
CSS中设置了图片透明度怎么不起作用呀
透明度设置filter:alpha(opacity=70);opacity:0.7;
css实现png图片透明的方法
png切透明不就完了么
CSS中有没有哪一种颜色值是透明的？
你是说有颜色的同时也有透明度？两个办法，以红色为例。1：color:#ff0000; opacity:0.7; //0.7表示70%透明度。但是这个办法不好用。因为实际是改变整个元素的透明度，透明背景还好，但是如果有背景，背景也会跟着70%透明。2：color:rgba(255,0,0,0.7); //这种写法最好，只会改变文字的透明度，不影响元素的透明度。同理设置background-color透明度也可以这样，而不会影响元素内文字颜色。
css中background-color：transparent与opacity：0有什么区别
1、background-color：transparent只是将背景设成透明的，上面的文字还是可以看见的2、 opacity：0则是整个层都透明了，包括背景和里面的所有内容，内容透明的话就看不到了
CSS中设置父元素透明度不影响子元素透明度(个人笔记)
css中经常会遇到设置了父元素的透明度后，会直接影响到子元素的透明度。 例如： 设置父元素opacity：0.5，子元素不设置opacity，子元素会受到父元素opacity的影响，也会有0.5的透明度。 即使设置子元素opacity：1，子元素的opacity：1也是在父元素的opacity：0.5的基础上设置的，因此子元素的opacity还是0.5。 解决方法： 为父元素设置background: rgba(0,0,0,0.5)时设置透明度，不再加opacity属性。
css中，怎么写背景图片的透明度？
还真没试过，你试试修改这个层的的透明度试试
CSS怎么设置让背景颜色透明，而文字不透明
article{ background-color:rgba(0,0,0,0.8); //注意，是rgba，不是rgb ！！！ position:static;}article p{ color:white; position:relitave;}
CSS背景颜色透明
个人建议做一个有透明度的png，然后把这个图片设置成input的背景。因为在ie里面，对于alpha滤镜，会把这个滤镜应用到对于元素及其内部所有文本上的，透明度设置得低一点还看不太出来，设置得一高，就会有各种问题了。
CSS里的filter:alpha(opacity=50)是什么意思?求教了,谢谢
filter:alpha(opacity=50)是IE专用的属性，因为它不支持opacity属性，为了保证浏览器的兼容性，建议使用时俩个都写。
背景图片的透明度如何设置（CSS）
透明属性：火狐下opacity：（0到1之间的数字）opacity:0.5;IE下 filter：alpha（opacity：0到100之间数字）filter:alpha(opacity=50)
css里面怎么设置图片的透明度，代码是什么，谢谢
opacity:0.4; 这种东西随便百度啊。
CSS 透明度怎么设置。 filter:alpha(opacity=10); 我这句话在IE中有效 在其它的浏览器中就没效（Opera）
filter:alpha(opacity=0);moz-opacity: 0;-khtml-opacity: 0;opacity:0;
css opacity继承问题，怎样不集成父级背景色透明？
两个层 <div class="text"></div><div class="bg"></div>.text, .bg { position:absolute; left:left; top:top; width:100%;}.text { color:red}.bg { opacity:.5; backgrouond:#000}
怎样用css用opopacity将背景色淡化但文字不淡化
这几个字必需在一个标签里才能针对该标签设置CSS背景。比如源码中是：本站主题：XXXXX宠物用品然后就可以书写如下css实现背景色：.myclass{background-color:#3597FA;}
css用opacity给背景图片做透明，如何不影响层内的元素
你应该把背景图片单独做一个层，让它透明，其他内容放到另一个同样大小的层内，利用绝对定位覆盖在背景层上。
请问各位html大神，如何将如图所示的导航栏设置透明度？我只学了html和css，请教各位有简单的
直接在代码里用RGBA(0,0,0,(这里是透明度0-1))
我用css 中的opacity 设置元素背景的透明度 后发现该元素的内容透明度也跟着变化 怎样取消该内容的透明度
写2个层 一个用来作为背景设置为透明，一个是内容模块，设置z-idnex大于背景层
css样式 给div样式opacity:0 是什么意思
div的透明度为0
谁能帮忙解释一下这段css什么意思
filter:alpha(opacity=70); opacity就是指透明度；建议在后面加个opacity:0.7；因为filter只IE浏览器认识，其他浏览器都支持opacity；position:absolute; top:60px; left:710px; 这是指这个层使用绝对定位，位置为离浏览器上面60px距离，左边为710px;width:85px;这个层的宽度为85个像素；height:79px;层的高度visibility：是指设置元素是否可见。而hidden属性则是隐藏超过层边框范围内的内容。
火狐下 如何用JS 取得CSS的 opacity值。
现在假设有这么一段代码<divid="demo"style="color:red;opacity:0.6"><!--0.0表示不透明，1.0表示完全透明--><p>一些文字</p></div>用javascript代码来获取该属性值的方法是:varopacityValue=document.getElementById("demo").style.opacity;大多数浏览器设置元素的opacity的值都是通过例子中的形式来设置的，不过IE浏览器设置透明度的方式为filter:Alpha(opacity=60);<!--0表示不透明，100表示完全透明，不接受小数-->在ie浏览器里面暂时不知道如何获取元素的透明值。我一般都是使用jQuery框架的，使用起来比较简单，也不用去考虑浏览器兼容性的问题，以下为获取元素透明值的jQuery语句:varopacityValue=$("#demo").css("opacity");建议可以到www.w3school.com.cn网站上去了解一下。
css中，如何设置前景色的透明度？
最好是用CSS3的RGBA属性，透明滤镜（filter：alpha）是IE ONLY，不建议使用
css中如何设置透明度
background: rgba(255, 255, 255, 0.85) 0.85是透明度的百分比
css选择器nth-child(1),first-child在加入别的标签，为什么会失效？这两段代
第一个子孩子的hover，你根本就没写。第三个的hover，你写成 border:1px red solid; 试试
求CSS3中target选择器的用法
您好，:nth-child()用法:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。在w3c中说明的 n 可以是数字、关键词或公式。常用的有4中写法。1.具体的数字:nth-child(n):匹配父元素中第n个元素，例：li:nth-child(3){background:green;}2.倍数:nth-child(an):匹配父元素中第a数倍的元素，例:li:nth-child(2n){background:red;}3.倍数分组:nth-child(an+b)或:nth-child(an-b):先对元素进行分组，每组有a个，b为组内成员的序号，其中字母n和加号+不可缺省，位置不可调换，这是该写法的标志，其中a,b均为正整数或0。如3n+1、5n-1。4.奇偶写法:nth-child(odd)和:nth-child(even):分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样；偶数(even)与(2n+0)及(2n)结果一样。:nth-of-type()的用法:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.这个的用法和:nth-child(n)的用法类似，不同的是:nth-child(n)所匹配的元素必须有父元素包着。但:nth-of-type(n)可以匹配特定类型元素行。浏览器支持所有主流浏览器均支持 :nth-child() 选择器，除了 IE8 及更早的版本。
怎样利用css中nth-child快速把每一行的第二个td变成其他颜色
tr td:nth-child(2){color:white;background-color:blue}
关于css的nth-child，怎么循环12345之类的
nth-child(2n)表示偶数位置的子元素 你写的.healManage a img:nth-child(2n) 表示a标签下偶数位置的img，你的a标签下只有一个img，哪有偶数个啊？所以错了 应改为： .healManage a:nth-child(2n) img 表示.healManage下第偶数个a标签的子元素img
css选择器nth-child(1),first-child在加入别的标签，为什么会失效？这两段代
因为li:nth-child(1)指的是作为第一个子元素的li，加入span之后，span就变成了ul的第一个子元素，所以li:nth-child(1)会失效，因为li已经不是太子了；建议使用first-of-type,nth-of-type,last-of-type
css选择器中，为什么nth
我记得nth是表示第几个，2th就是第二个
关于css中padding和margin的疑问
如果看到有单独写的，一般由以下几种原因：1、涉及到覆盖以前的padding或者margin声明，必须单独写。2、这种大写的一般是编辑器生成的，也就是说他是使用编辑器中的所见即所得工具，来添加的属性，并非手动写上去的，一般的编辑器不会自动缩写，所以是分开的。3、写代码的人是个生手，不会缩写。
CSS中添加什么属性，可以使padding不影响整体大小
添加box-sizing:border-box;css添加这个属性之后，设置的padding值会在内部显示，不会影响外部大小我们通常一个块级元素实际所占宽高度=外边距（margin）+ 边界宽度(border-width) + 内边距（padding）+ 高度（height） / 宽度（width）如果设置了border-box，实际所占宽高度 = 设置的高度（height）/ 设置的宽度（width）+ 外边距（margin）
css设置SPAN的padding
这 一定要用span吗？换成div多方便啊 你把str += "<span class="idSpan">123</span>"这行换成str += "<div class="idSpan">123</div>"效果就好了吧
CSS中margin和padding的区别
margin：外边距padding：内边距也可根据下面图片来认识下
css中margin和padding有什么不同？
margin：外边距padding：内边距结合下图，通过HTML测试，相信你很快就会理解：
CSS中, padding: 0px 0px 0px 0px; 四个0px分别代表什么?
内边距上下左右分别为0像素
CSS中添加什么属性，可以使padding不影响整体大小
-moz-box-sizing: border-box; /*Firefox3.5+*/-webkit-box-sizing: border-box; /*Safari3.2+*/-o-box-sizing: border-box; /*Opera9.6*/-ms-box-sizing: border-box; /*IE8*/box-sizing: border-box;
CSS中margin和padding的区别
margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。蓝色就是我内容区域，border就是盒模型（即容器本身大小），给padding就是绿色的区域,也就是在容器内的填充。给margin 就是盒子模型外的填充
CSS内边距的padding 属性
CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。例如，如果您希望所有 h1 元素的各边都有 10 像素的内边距，只需要这样：h1 {padding: 10px;}您还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：h1 {padding: 10px 0.25em 2ex 20%;}