标签：css
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css课堂笔记</title>
</head>
<body style="margin:8px;">
<div style="margin:auto; border:#F00 3px solid; padding:5px; width:800px; ">这是个div</div> <!--margin:auto;居中-->
<h1 style="margin:5px; border:#F00 3px solid; padding:5px; width:800px; ">这是个div</h1>
<div style="margin:auto">
<p style="margin:5px; border:#F00 3px solid; padding:5px; display:inline-block ">这是个div</p> <!-- display:inline行内显示方式不同。 -->
<a href="#" style="margin:10px; border:#F00 3px solid; padding:5px; ">这是个div</a> <!-- *display:inline; zoom:1; 对IE版本兼容性的控制-->
<a href="#" style="margin:auto; border:#F00 3px solid; padding:5px; ">这是个div</a>
<a href="#" style="margin:auto; border:#F00 3px solid; padding:5px; ">这是个div</a>
<a href="#" style="margin:auto; border:#F00 3px solid; padding:5px; ">这是个div</a>
<a href="#" style="margin:auto; border:#F00 3px solid; padding:5px; ">这是个div</a>
</div>
<div style=" font-family: ‘微软雅黑‘ ‘宋体‘ ‘黑体‘; font-size:20px; font-weight:bolder; line-height:30px; border:2px solid #6F0; width:800px; height:auto; margin:auto; border-bottom:1px #0FC dashed">文字字体文字字体文字字体文字字体文字字体文字字字体文字字体文字字体文字字体文字字体文字字字体文字字体文字字体文字字体文字字体文字字字体文字字体文字字体文字字体文字字体文字字字体文字字体文字字体文字字体文字字体文字字字体文字字体文字字体文字字体文字字体文字字字体文字字体文字字体文字字体文字字体文字字字体文字字体文字字体文字字体文字字体文字字体文字字体文字字体文字字体文字字体文字字体文字字体文字字体文字字体文字字体文字字体</div><br/><br/>
<div style=" font-family: ‘微软雅黑‘ ‘宋体‘ ‘黑体‘; font-size:20px; font-weight:bolder; line-height:130%; border:2px solid #6F0; width:800px; height:auto; margin:auto; border-bottom:1px #0FC dashed">文字字体文字字体文字字体文字字体文字字体文字字体文字字体文字字体文字字体文字字体文字字体文字字体文字字体文字字体文字字体文字字体</div><br/><br/>
<div style="font: bold 16px/20px ‘黑体‘; border: solid 1px #0F0 ; height:100px; width:800px; margin:auto; text-indent:2em; line-height:1.5; overflow:auto;">文字字体文字字体文字字体文字字文字字体文字字体文字字体文字字文字字体文字字体文字字体文字字文字字体文字字体文字字体文字字文字字体文字字体文字字体文字字文字字体文字字体文字字体文字字体文字字文字字体文字字体文字字体文字字文字字体文字字体文字字体文字字文字字体文字字体文字字体文字字文字字体文字字体文字字体文字字文字字体文字字体文字字体文字字文字字体文字字体文字字体文字字文文字字体文字字文字字体文字字体文字字体文字字文字字体文字字体文字字体文字字文字字体文字字体文字字体文字字文字字体文字字体文字字体文字字文字字体文字字体文字字体文字字文字字体文字字体文字字体文字字文文字字体文字字文字字体文字字体文字字体文字字文字字体文字字体文字字体文字字文字字体文字字体文字字体文字字文字字体文字字体文字字体文字字文字字体文字字体文字字体文字字文字字体文字字体文字字体文字字文文字字体文字字文字字体文字字体文字字体文字字文字字体文字字体文字字体文字字文字字体文字字体文字字体文字字文字字体文字字体文字字体文字字文字字体文字字体文字字体文字字文字字体文字字体文字字体文字字文文字字文字字体文字字体文字字体文字字文字字体文字字体文<span style="color:#00F; text-decoration:underline; cursor:pointer">字字体文字字文字</span>字体文字字体文字字体文字字文字字体文字字体文字字体文字字</div>
<br/>
<div style="height:180px; background:#CF6 url(images/%E5%B7%B4%E5%85%94%E7%BD%91%E7%BB%9C-%E9%A6%96%E9%A1%B5-5.png) no-repeat; background-position:center top; color:#0CC;">ljlkjkjkljl</div>
<br/><br/><br/>
<div style="height:200px; background:#CF6 url(images/%E5%B7%B4%E5%85%94%E7%BD%91%E7%BB%9C-%E9%A6%96%E9%A1%B5-5.png) no-repeat; background-position: 35px 10px; color:#0CC;">ljlkjkjkljl</div>
<br/><br/><br/>
<div style="height:200px; background:#CF6 url(images/%E5%B7%B4%E5%85%94%E7%BD%91%E7%BB%9C-%E9%A6%96%E9%A1%B5-5.png) no-repeat; background-position: -30px -25px; color:#0CC;">ljlkjkjkljl</div>
<br />
<br />
</body>
</html>
margin属性：
margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
margin:10px 5px 15px 20px;
上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px
| 值 | 描述 |
|---|---|
| auto | 浏览器计算外边距。 |
| length | 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。 |
| % | 规定基于父元素的宽度的百分比的外边距。 |
| inherit | 规定应该从父元素继承外边距。 |
padding
padding 简写属性在一个声明中设置所有内边距属性。
这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
例子和值同上margin
border：
border 简写属性在一个声明设置所有的边框属性。
可以按顺序设置如下属性：
border-width
border-style
border-color
p
{
border:5px solid red;
}
display：
display 属性规定元素应该生成的框的类型。
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。（CSS2.1 新增的值） |
| list-item | 此元素会作为列表显示。 |
| run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
| compact | CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 |
| marker | CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 |
| table | 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 |
| inline-table | 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。 |
| table-row-group | 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。 |
| table-header-group | 此元素会作为一个或多个行的分组来显示（类似 <thead>）。 |
| table-footer-group | 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。 |
| table-row | 此元素会作为一个表格行显示（类似 <tr>）。 |
| table-column-group | 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。 |
| table-column | 此元素会作为一个单元格列显示（类似 <col>） |
| table-cell | 此元素会作为一个表格单元格显示（类似 <td> 和 <th>） |
| table-caption | 此元素会作为一个表格标题显示（类似 <caption>） |
| inherit | 规定应该从父元素继承 display 属性的值。 |
font：
font 简写属性在一个声明中设置所有字体属性。
注释：此属性也有第六个值："line-height"，可设置行间距。
这个简写属性用于一次设置元素字体的两个或更多方面。使用 icon 等关键字可以适当地设置元素的字体，使之与用户计算机环境中的某个方面一致。注意，如果没有使用这些关键词，至少要指定字体大小和字体系列。
可以按顺序设置如下属性：
font-style
font-variant
font-weight
font-size/line-height
font-family
background：
background 简写属性在一个声明中设置所有的背景属性。
可以设置如下属性：
background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image
| 值 | 描述 | CSS |
|---|---|---|
| background-color | 规定要使用的背景颜色。 | 1 |
| background-position | 规定背景图像的位置。 | 1 |
| background-size | 规定背景图片的尺寸。 | 3 |
| background-repeat | 规定如何重复背景图像。 | 1 |
| background-origin | 规定背景图片的定位区域。 | 3 |
| background-clip | 规定背景的绘制区域。 | 3 |
| background-attachment | 规定背景图像是否固定或者随着页面的其余部分滚动。 | 1 |
| background-image | 规定要使用的背景图像。 | 1 |
| inherit | 规定应该从父元素继承 background 属性的设置。 | 1
|
overflow：
overflow 属性规定当内容溢出元素框时发生的事情。
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
本文出自 “小刘_Blog” 博客，请务必保留此出处http://liuyafang.blog.51cto.com/8837978/1412704
标签：css
原文地址：http://liuyafang.blog.51cto.com/8837978/1412704
