内联对象转换为块对象后,就可以使用width和height属性了:a{display:block; width=10px; height:20px;}
padding:内填充(分top, bottom, left, right) margin:外边距(分top, bottom, left, right) border:边框(分top, bottom, left, right) width:内容的宽度 height:内容的高度 注:当两个元素上下排列时,他们间的margin会自动合并(都不是float或绝对定位的情况下)
border的属性(分top, bottom, left, right):
style:线条样式(dotted, solid, double, 等) width:粗细(单位px) color:颜色 可以缩写:border: solid 1px #FFF;
单独设置一条边:
border-bottom: solid 2px #00F; border-bottom-width: 2px; (注:后面会覆盖前面的)
margin和padding的设置:
margin: 1px (上下左右) margin: 1px 2px 3px 4px; (上 右 下 左) margin: 1px 2px; (上下 左右) margin: 1px 2px 3px; (上 左右 下) (注:padding的设置方法跟margin一样)
浮动(float):
浮动到普通流的上一层 float: left,浮动后向左,直到左边碰到边界或碰到同一层元素的右边界 float: right,浮动后向右,直到右边碰到边界或碰到同一层元素的左边界
清理(clear):
使浮动层继续在普通流保留占位 clear: both, left, right,应用于普通流,使普通流根据上一层的占位情况来决定自己的位置 一般可以在浮动层和普通流直接加一个clear div来分隔排版,如:
Center the block horizontally:
- margin left and right: auto (eg: margin:0px auto;)
- The block must have a specific width value (width)
Note: The body has a margin of 8px by default. Cancel method: body{margin:0px;}
Center the block vertically (less commonly used):
- width:500px; height:200px; position: absolute; top:50%; left:50%; margin-top:-100px; margin-left:-250px;
Center text within the block:
- Center horizontally: text- align: center
- Vertically centered: line height = box height, such as: height:200px; line-height:200px (one line fills the entire div)
ul list:
There is padding and margin by default. Cancel method: ul{padding:0px; margin:0px;} list-style: List style (none, ) list-style-image:url(images/a.jpg); Horizontal: li{float:left} Set the dividing line: li{ background:url(images/1.png) no-repeat bottom center;}
Positioning (via position attribute):
static: Default positioning method, displayed by row or block. relative: relative positioning, the element is offset by a certain distance (use top, right, bottom, left to position relative to the original position, the original space occupied will not be released) absolute: element Removed completely from the document flow (similar to float) and positioned relative to its parent box (using top, right, bottom, left positioning). For example: #aaa{position:absolute; top:100px; left:50px;} fixed: similar to absolute, except that the positioning is at a distance from the browser window. (Can be used to make floating ads) Note: If they overlap, you can use the z-index attribute to determine who is on top, and the one with the larger value is on top.
Size:
Fixed value: such as width: 100px; missing Default value: leave it blank Percent: the percentage of the parent box, such as width: 80%; min-height, min-width: the minimum height and width of the element max-height, max-width: the maximum height and width of the element
Handling when content exceeds the parent box:
overflow:hidden: The exceeded content is cut overflow:scroll: The scroll bar is always displayed overflow:auto: When the content is cut, Show scroll bars (the default value for body and textarea is auto) overflow-x:hidden: Disable horizontal scroll bars overflow-y:scroll: Always display vertical scroll bars Note: If the parent box does not set height, the parent box will be raised until it reaches max-height.
Browser scroll bar settings:
For example: html{
scrollbar-base-color:# F00;
}
Note: It seems to be only valid for IE.
Photoshop cutting process:
- Use guides
- Use the slice tool
- Cancel the background and make the image transparent
- Save as web format...
- Save: slice : All user slices
- Save
- Rename
Original article, please indicate the reprint from Clement-Xu’s csdn blog. )