一、CSS属性
**属性很多，拉个很长篇幅也没啥意义，还不如贴个链接，上官网看
二、布局属性
**这里就说一些平常很少用的
| 分类 | 属性 | 取值 | 说明 |
|---|---|---|---|
| 定位 | z-index | auto（自动）或number（数字） | 设置对象层叠顺序，取值越大，显示越靠上，此属性仅作用于position属性值设置为relative或absolute的元素 |
| 表格 | none | outline-style：none border：0 none； |
取消外部轮廓线 |
| 布局 | clear | clear：none（无）、left（左）、right（右）、both（两侧） | 与float属性合用，清除浮动 |
| float | float：none（无）、left（左）、right（右） | 设定是否浮动以及浮动方向 | |
| clip | auto：rect（number number number number） | 是以左上角的(0,0)为坐标点，方向为上下右左，任意值为auto都表示此边不剪切。只有在position是absolute时才能使用 | |
| overflow | visible（可见）、auto、hidden、scroll（显示滚动条） | 设置超出内容范围的如何显示，其中auto表示：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容；visible默认值。内容不会被修剪，会呈现在元素框之外。 | |
| overflow-x/overflow-y | visible（可见）、auto、hidden、scroll（显示滚动条） | 设置对象内容超过指定宽、高时时如何显示 | |
| display | block（块状）、none（隐藏）、inline（内联）、list-item | 设置对象显示类型或方式 | |
| visibility | inherit（继承）visible、hidden（隐藏） | 设置是否显示对象 |
三、display的几个属性
<head>
<style type="text/css">
p {display: inline}
div {display: none}
</style>
</head>
1）inline
默认。此元素会被显示为行内元素，元素前后没有换行符。
2）block
此元素将显示为块级元素，此元素前后会带有换行符。
3）list-item
此元素会作为列表显示
| 值 | 描述 |
|---|---|
| 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 属性的值。 |
四、相对单位和绝对单位
绝对单位（绝对大小）：
in（英寸）、厘米、毫米、pt（磅）pica（1pica=12pt，也称12点活字）
相对单位（相对大小）：
1）em设置元素的字体高度
font-size:12px；
line-height:2em；
<!--行高24PX，1em等于12pt-->
<!--如果设置font-size属性为em，则em的值根据父元素的font-size属性值来确定-->
<!--如果父对象的fpnt-size属性单位也是em，则继续向上级元素寻找参考的font-size属性值。如果都没有定义，则会根据浏览器默认字体换算，默认字体16px-->
2）ex
ex单位根据所使用的字体中小写字母x的高度作为参考。在实际中浏览器将通过em的值除以2得到ex的值
3）px值
PX和PT转换的公式： pt=px乘以3/4。比如12px×3/4=9pt大小。
PX和em转换的公式： em=16乘以px，也就是说1.5em=1.5×16=24px。
<!--用px定义字体就无法用浏览器字体放大的功能-->
<!--为避免计算也可以直接在body选择器中定义Font-size=62.5%-->
五、URL导入
image.png
**主要注意路径问题
<link href="css/style.css" type="text/css" rel="stylesheet"/>
<head>
<style type="text/css">
body {background:url(../images/logo.gif);}
p {color:blue}
</style>
</head>
<body>
<p>A paragraph.</p>
</body>
六、父元素、子元素
**这里先讲讲父元素子元素的问题，涉及到后面选择器的问题**
</head>
<body>
<div class="first">
<div class="second">
<div class="third"></div>
</div>
<div class="second2"></div>
</div>
</body>
网友评论