padding

非常好用的CSS样式重置表 我们在项目前期准备时都会准备好一个reset.css，因为不同浏览器对标签的解析各不相同，重置css样式可以让标签在不同浏览器下产生相同的效果。所以一个好的重置样式表是非常重要的。用过很多网上现成的样式重置表，然后有时写的样式代码没问题却达不到自己要的效果，查了才发现是掉进reset.css的坑里。这里推荐用过多种reset.css感觉是最好用的重置样式表： Sandal ，这个样式表的好处是他绝大多数的保留了标签的常用效果，并不是简单粗暴的全部掩杀。具体样式如下，可以直接整个复制在自己的reset.css中： 　　html { 　　　　-ms-text-size-adjust: 100%; 　　　　-webkit-text-size-adjust: 100%; 　　　　-webkit-tap-highlight-color: transparent; 　　　　height: 100%; 　　} 　　body { 　　　　margin: 0; 　　　　font-size: 14px; 　　　　font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif; 　　　　line-height: 1.5; 　　　　color: #333; 　　　　#fff; 　　　　min-height

<div class="parent"> <div class="child"> </div> </div> <style> .parent { width: 100px; background-color: red; } .child { width: 100%; background-color: blue; } </style> 上面代码中child的宽度设置为100%，意思是child的content的宽度等于parent的宽度100px,如下图所示： .child { width: 100%; background-color: blue; padding: 0 10px; border: 2px solid green; } 如果将child加上左右padding和border，则child的总宽度则会大于parent的宽度，表现为child的宽度撑出父元素了，如下图所示： .child { width: auto; background: blue; height: 100px; padding: 0 10px; border: 2px solid green; margin: 0 10px; } 而如果设置child的宽度为auto,则表现为content+padding+border+margin值等于parent的宽度100px,如下图所示： 这里延伸一个知识点

文章目录 盒子模型 1：盒模型具体的css属性 2：padding的用法： padding的设置方法： 3：margin的用法： margin设置方法： margin常出现的BUG: 文本溢出 文本溢出变省略号设置 页面结构的划分：（上下、左右、外、里） 盒模型：网页布局的基石，从盒子的内部到盒子的外围。 先有框架，再有内容嘛， 结构(HTML)是重点，样式(CSS)是用来修饰结构的。 所以要先确定HTML标签，再来选用合适的CSS样式。布局的标签是通过HTML内在的上下文语境来决定当前的语义化的结构， 盒子模型 盒模型： ​ 网页布局的基石，从盒子的内部到盒子的外围： ​ 内容（图片、文本、视频、小盒子…） ​ 内填充（补白） ​ 盒子本身（border） ​ 外边距 （margin） 1：盒模型具体的css属性 ​ 内填充：padding属性 （不能为负值） ​ 外边距：margin属性 （可以设负值） 2：padding的用法： 作用：控制子元素在父元素里面的位置关系。 ​ 【让文本和盒子的周围产生间距 ​ 给盒子添加泡沫（padding）】 padding是长在 内容 和 盒子之间的距离 padding是长在盒子里面的。 padding的作用：主要控制子元素在盒子内部的位置关系。 padding是添加在父元素上面。 padding可以把盒子撑大！！ ​

css盒模型概念及企业应用规则 1.什么是盒模型 盒模型**（ Box Moldel ）****，**是W3C规定一个浏览器如何渲染、显示一个元素，根据元素的种类分为块级元素盒模型和行内元素盒模型 2.标准盒模型的概念分析 2.1width/height（content box内容区） 块级元素的width和height值 在标准盒模型下 ，定义了一个块级元素能够 存放内容的区域大小 ，元素的内容从width和height的 左上角原点开始 排列内容 2.2border（border box边框区） 块级元素的border的作用是在元素的内容区外加上一个边框线 边框样式的格式为**: broder : 宽度 种类 颜色 ;/** 复合写法 / border-width :边框宽度 border-style :种类; 默认是none 就是没有边框 /*dotted圆点边框, double双边框, dashed虚线边框,solid实线边框 */ border-color :颜色; 默认与color样式一致 /* 颜色值: 十六进制, rgb, 关键字, transparent(使用父元素的颜色)*/ 2.3border（border box边框区）详解 元素的边框可以单独给某一方向设置 比如: 设置 顶部 边框:border-top:宽度 种类 颜色; 设置 底部 边框:border

字体属性 font font:字体风格[字体加粗]<字体大小>[/行高]<字体族科> font-family 字体族科 宋体|微软雅黑 font-family:"Arial","Helvetica",sans-serif; font-size 字体大小 font-style 字体风格 normal | italic | oblique (斜体) font-weight 字体加粗 normal | bold | lighter font-variant 字体变形 normal | small-caps 文字颜色 color 设置文字颜色 常用 color ： # 两位 16 进制表示 文本属性 letter-spacing 字母间隔 值为长度，可以是负值 word-spacing 词的间距(通过空格识别) text-decoration 文字修饰 underline overline line-through none(默认) text-align 横向排列 left | right | center vertical-align 垂直对其方式 baseline： 将支持valign特性的对象的内容与基线对齐 sub： 垂直对齐文本的下标 super： 垂直对齐文本的上标 top： 将支持valign特性的对象的内容与对象顶端对齐 text-top：

MacJi “偷懒”翻译了部分 ，下午冒着被 BOSS 开除的危险将其补完（ 原文链接 ）。 使用 line-height 垂直居中 line-height:24px; 使用固定宽度的容器并且需要一行垂直居中时，使用 line-height 即可（高度与父层容器一致），更多的垂直居中总结可以看这里。 清除容器浮动 #main { overflow:hidden; } 期前也提到过这样的问题 ，更多信息可以看这里。 不让链接折行 a { white-space:nowrap; } 上面的设定就能避免链接折行，不过个人建议长链接会有相应的这行（有关换行方面的讨论，参看圆心的记录）。 始终让 Firefox 显示滚动条 html { overflow:-moz-scrollbars-vertical; } 更多的 Mozilla/Firefox 私有 CSS 属性可以参考这里。需跨浏览器的支持，也可以使用 body, html { min-height:101%; } 使块元素水平居中 margin:0 auto; 其实就是 margin-left: auto; margin-right: auto; 这个技巧基本上所有的 CSS 教科书都会有说明，别忘记给它加上个宽度。Exploer 下也可以使用 body{ text-align: center; } 然后定义内层容器 text

翻译： onestab [2004.03.09] 原文：mezzoblue CSS Crib Sheet 在使用CSS建站时，您肯定遇到过形形色色的布局问题，最后可能被搞得焦头烂额。本文的目的是让您的设计过程更为容易，当您遇到困难时为您提供快速参考。 有疑问，先验证 在调试时，先对您的代码进行验证往往能省去不少麻烦事。格式不正确的 XHTML /CSS 会导致许多布局上的错误。 在其他浏览器中进行测试 之前 ，请先在最先进的浏览器中撰写和测试CSS代码，而不是相反。 如果您在破旧的浏览器中编写和测试，你的代码就不得不依赖那个破旧浏览器的糟糕的显示，然后在符合标准的浏览器中进行测试，看到显示结果“不正常”时，你会很沮丧的。相反，您应该先将您的代码完善，然后再设法为较低级的浏览器打算。这样从一开始您的代码就是符合标准的，你不必再为支持其他浏览器而劳心费神。当然了，目前遵从标准的浏览器无疑就是 Mozilla, Safari 或 Opera。 确保您想要的效果真的存在 许多特定的浏览器专有的CSS扩展在 正式标准 中并不存在。 如果您对 filter(滤镜) 或滚动条指定样式，您用的就是私有代码，除了 IE 之外，在别的浏览器中毫无作用。如果验证器告诉您代码没有定义，极有可能您用了私有样式，别指望在不同的浏览器中得到一致的效果。 如果布局中一定要用浮动对象，别忘了适时使用清除（clear

box-sizing ：content-box|border-box|inherit; 默认值 ：content-box 适用于 ：所有接受 width 和 height 的元素 继承性 ：无 padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding ) 此属性表现为标准模式下的盒模型。 border-box： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 此属性表现为怪异模式下的盒模型。 示例： content-box: .test1{ box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee; } border-box: .test2{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; } 来源： https://www.cnblogs

直接上代码. <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd" > < html xmlns ="http://www.w3.org/1999/xhtml" > < head > < title > Sales Information System </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" > < style type ="text/css" > body { } { margin : 0px 0px 0px 2px ; padding : 0 ; text-align : left ; width : 100% ; height : 100% ; } .report { } { margin : 0 ; padding : 0 ; border-collapse : collapse ; width : 1033px ; } .report .bodyen { } { margin : 0 ; padding : 0 ; font-family :

盒模型 在CSS中，"box model"这一术语是用来设计和布局时使用，然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。 盒模型有两种：标准模型和IE模型。我们在这里重点讲标准模型。 盒模型示意图 盒模型的属性 width：内容的宽度 height: 内容的高度 padding：内边距，边框到内容的距离 border: 边框，就是指的盒子的宽度 margin：外边距，盒子边框到附近最近盒子的距离 如果让你做一个宽高402*402的盒子，您如何来设计呢？ 答案有上万种，甚至上一种。 盒模型的计算 如果一个盒子设置了padding，border，width，height，margin(咱们先不要设置margin，margin有坑，后面课程会讲解) 盒子的真实宽度=width+2*padding+2*border 盒子的真实宽度=height+2*padding+2*border 那么在这里要注意看了。标准盒模型，width不等于盒子真实的宽度。 另外如果要保持盒子真实的宽度，那么加padding就一定要减width，减padding就一定要加width。真实高度一样设置。 在CSS中，"box model"这一术语是用来设计和布局时使用，然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。 盒模型有两种：标准模型和IE模型