padding | 易学教程

css笔记之css总结

阅读更多关于 css笔记之css总结

css总结文字属性 color可以定义字体颜色 font-size: 字体大小 font-weight:字体粗细 normal: 默认值，标准粗细 bold: 粗体 bolder: 更粗 lighter: 更细 100~900: 设置具体粗细，400等同于normal，而700等同于bold inherit: 继承父元素字体的粗细值 font-style: 字体风格 normal：默认值，浏览器会显示标准的字体样式 italic：浏览器会显示斜体的字体样式 oblique：浏览器会显示倾斜的字体样式 font-family: 字体综合: {font:font-style font-weight font-size/line-height font-family;} 其他属性可以省略，必须保留font-size和font-family属性外观属性 line-height:行间距行间距=weight,可以设置水平居中 text-align:水平对齐方式 left 左对齐，默认值 right 右对齐 center 居中对齐 justify 两端对齐 text-decoration:文字装饰 none 默认。定义标准的文本 underline 定义文本下的一条线 overline 定义文本上的一条线 line-through 定义穿过文本下的一条线 inherit

浅谈css盒模型

阅读更多关于浅谈css盒模型

　　在我们网页上的每一个元素，一个按钮，一段文本，一张图片等等，浏览器都将它们当做一个“盒子”看待，并把这样的盒子称为盒模型（box model）。使用Chrome的右键>审查元素对某个网页上的元素，就可得到类似这样一张图，这就是盒模型的缩影了。　　　　　　　　组成盒模型主要是这几个要素：外边的外边距margin、中间的边框border、里边的内边距padding，再往里就是包围元素实体的宽、高。在padding这个块里面，包括实体元素的宽高，就是背景background横行的地方，一般我们所添加的背景图片、背景颜色会充满padding这里面的一块区域，所以padding变大，背景会跟着扩张，当然前提是没有精确控制背景的位置、平铺方式等参数。　　CSS的盒子是包括margin的。margin可以正可以负而padding职能为正。记得有一个人给我很好的讲解的padding的使用，相当于是面前有一本书，加一个padding-left等同于加了个占位的空白把书往右边挤了，很形象的解释了这一切。　　从图中看出，CSS的盒模型是四四方方的，所以对盒子的修饰的margin、border等是有四个方向的。比如margin样式的添加，通常是这样： margin: 5px; margin: 5px 10px; margin: 5px 10px 15px 20px; 　

How to remove the padding between in the JPanel still using a flow layout?

阅读更多关于 How to remove the padding between in the JPanel still using a flow layout?

问题 Here's the portion of my java application GUI that I have a question about. What this GUI consists is a blue JPanel(container) with default FlowLayout as LayoutManager that contains a Box which contains two JPanels(to remove the horizontal spacing or i could have used setHgaps to zero for that matter instead of a Box) that each contains a JLabel. Here's my code for creating that part of the GUI. private void setupSouth() { final JPanel southPanel = new JPanel(); southPanel.setBackground(Color

仿Google自动提示 SearchSuggess

阅读更多关于仿Google自动提示 SearchSuggess

页面： <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!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 runat="server"> <title>seach</title> <script type="text/javascript" src="jquery.min.js" ></script> <script type="text/javascript" src="js.js"></script> <link href="css.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="form1" runat="server"> <div onClick="keyup_close();"> <ul> <li class="h_14"> <iframe style=

css3使用box-sizing布局

阅读更多关于 css3使用box-sizing布局

ss3增添了盒模型box-sizing，属性值有下面三个： content-box ：默认值，让元素维持W3C的标准盒模型。元素的宽度/高度（width/height）（所占空间）等于元素边框宽度（border）加上元素内边距（padding）加上元素内容宽度 /高度（content width/height）即：Element Width/Height = border+padding+content width/height。 border-box ：让元素维持IE6及以下版本盒模型，元素的宽度/高度（所占空间）等于元素内容的宽度/高度。这里的content width/height包含了元素的border,padding,内容的width/height。即：Element Width/Height =width /height-border-padding。 inherit ：继承父元素的盒模型模式。效果图终于写好了，但如果又被要求改好看点，比如内容区加内边距，边框什么的修饰一下。如果直接加上padding、border什么的，马上就破坏了布局：因为box-sizing默认是content-box，内容区大小不会变，加上padding、margin、border的话，就会往外撑开，从而破坏布局结构这时，使用border-box就可以完美解决了。 <

CSS 盒模型与box-sizing

阅读更多关于 CSS 盒模型与box-sizing

一、盒模型一个web页面由许多html元素组成，而每一个html元素都可以表示为一个矩形的盒子，CSS盒模型正是描述这些矩形盒子的存在。 MDN的描述： When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model . CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes. Every box is composed of four parts (or areas ), defined by their respective edges: the content edge , padding edge , border edge , and margin edge . CSS盒模型有四条边：外边距边、边框边、内填充边、内容边（Content edge、Padding edge、Border edge和Margin edge），四条边由内到外把它划分为四个区域：内容区域、内边距区域、边框区域

css3——box-sizing属性

阅读更多关于 css3——box-sizing属性

很多朋友们可能会疑惑，不知道box-sizing属性是有什么作用，自己也很少会用到，但是想必不少人在做网页布局的时候经常遇到一个问题就是我明明设置了父元素设置了假如是宽高500px，5个子元素左浮动设置宽高均是100px都设置有边框。为什么第五个元素被挤下到第二排呢？例子1： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>加边框的</title> 6 <style> 7 .box{ 8 width: 300px; 9 height: 300px; 10 border: 1px solid black; 11 margin: 0 auto; 12 } 13 .first { 14 width: 150px; 15 height: 100px; 16 float: left; 17 background: pink; 18 border: 1px solid red; /*增加了边框*/ /*解决方法在这里增加box-sizing:border-box*/ 19 } 20 .second { 21 width: 100px; 22 height: 100px; 23 background: blue; 24 float: left; 25 } 26 .third{ 27

CSS3 拯救我的布局吧box-sizing

阅读更多关于 CSS3 拯救我的布局吧box-sizing

一、CSS常见的两栏布局如上图，是一个很简单的两栏布局，就是一个宽度为960px；并且页面居中显示，侧边栏栏宽度为220px；主内容宽度720px；两者有一个20px的间距，并且有页眉和页脚。代码也很简单： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head lang="en-US"> <title> 两栏布局</title> </head> <style type="text/css"> *{ margin:0; padding:0; } .wrapper{ width:960px; margin-left:auto; margin-right: auto; color:#fff; font-size:30px; text-align:center; background: blanchedalmond; } #header{ height:100px; background:#38382e; margin-bottom:10px; } .side{ float:left; width:220px; margin-right: 20px; margin-bottom:10px; height

css3整理--box-sizing

阅读更多关于 css3整理--box-sizing

box-sizing语法：　　box-sizing ： content-box || border-box || inherit 　　参数取值：　　content-box：此值为其默认值，其让元素维持W3C的标准Box Model，也就是说元素的宽度/高度（width/height）等于元素边框宽度（border）加上元素内边距（padding）加上元素内容宽度 /高度（content width/height）即：Element Width/Height = border+padding+content width/height。　　border-box:此值让元素维持IE传统的Box Model（IE6以下版本），也就是说元素的宽度/高度等于元素内容的宽度/高度。这里的content width/height包含了元素的border,padding,内容的width/height。即此处的内容宽度/高度=width /height-border-padding。　　在实际应用中，该属性有个非常有用的地方，即根据百分比为元素设置宽度时。此时，如果元素有padding或者border，将box-sizing设置为border-box会非常有用。例如： <ul> <li style="box-sizing:border-box; padding:0 10px; width

盒模型与布局

阅读更多关于盒模型与布局

1.盒模型一个元素在页面中相当于一个盒子，包括margin、border、padding、content，如下图所示：图1 css盒子盒子模型包括IE盒模型与标准盒模型。 div{ width: 100px; height: 50px; border: 2px; padding: 10px; margin: 20px; } 标准盒子模型：元素所占宽度: width = margin+ border + padding + width(内容宽度）, 元素所占高度height同理。 css中指定的宽度是content宽度，高度是content高度。 div实际所占的宽度width = width(content宽度） + padding-left + padding-right + border-left + border-right + margin-left + margin-right= 100px + 10px +10px + 2px + 2px +20px +20px = 164px; div实际所占的高度height = height（content高度） + padding-top + padding-bottom + border-top + border-bottom + margin-top +margin-bottom= 50px + 10px +

订阅 padding