20180531-前端学习日志-CSS列表表格框模型定位样式选择器-优快云博客

本文介绍了CSS中列表样式设置方法、表格样式调整技巧及不同样式选择器的应用，并通过实例展示了如何实现美观且功能丰富的网页布局。

一、列表

list-style-type:此处可以加disc/circle/square，分别表示实心圆、空心圆、方形的列表格式。

list-style-image:此处后面紧跟的是url(xxx.jpg)，表示自定义排序图标

list-style-position:后面紧跟inside或者outside，inside表示换到第二行的文字和第一行文字对齐，不和圆点对齐。

同时也可以把以上一起写成list-style: outside circle等。如下是带有inside的代码和效果图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格样式</title>
</head>
<body>
<ul style="list-style-type: square；
list-style-position:inside">
    <li>测试一下inside界面HTML5HTML5H5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>Python</li>
</ul>
</body>
</html>

二、表格table

border:此处可以添加边界宽度px，样式solid/dotted/dashed等，颜色red/blue等信息。

border-collapse:后面跟着collapse/separate代表几个边框是合并还是分开。

width:宽度；height:高度

vertical-align:后跟top/right等代表垂直方向的位置；text-align:代表水平方向的位置。

padding:代表内边距。

caption-side:后面为bottom或者top（默认），表示标题在上面还是下面。

table-layout:后面跟auto/fixed代表布局自动或者固定，在有大量数据的时候用fixed可以加载更快速。

框模型里面有padding-top/padding-right/padding-left等，也可以写在一起，如padding: 10px 15px 20px 25px。padding的顺序是从top顺时针，即为top->right->bottom->left。 margin也是这样的顺序。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<div>
<p style="margin: 10px 50px 50px 10px">
    生而为人
</p>
<p style="margin: 10px 50px 50px 10px">
    请务必善良
</p>
</div>
<table style="border: 1px solid blue;
border-collapse: collapse;
caption-side: bottom;
table-layout: fixed">
    <caption>学习前端</caption>
    <tr>
        <th style="border: 1px solid blue; width: 200px;
        vertical-align: top;
        text-align: right;
        padding: 10px 15px 20px 25px">HTML5</th>
        <th style="border: 1px dashed blue; width: 50px;height: 100px;">CSS</th>
        <th style="border: 1px dotted blue">JavaScript</th>
        <th style="border: 1px solid blue">Python</th>
    </tr>
    <tr>
        <td style="border: 1px solid blue">88</td>
        <td style="border: 1px solid blue">90</td>
        <td style="border: 1px solid blue">97</td>
        <td style="border: 1px solid blue">100</td>
    </tr>
</table>
</body>
</html>

三、定位position

使用<div></div>将页面变成块状元素。<span>代表行内段</span>

定位有普通流、浮动流、绝对流三种。即position包含static/relative/absolute三种，默认是普通流。

浮动流里面float后面跟着位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<!--<div style="position: absolute; top: 120px">-->
<div>
    <img src="laugh.png" width="398" style="float: right"></img>
    <p style="position: absolute; left: -20px;
bottom:-20px">
        生而为人
    </p>
    <p style="margin: 10px 50px 50px 10px">
        请务必善良
    </p>
</div>
<table style="border: 1px solid blue;
border-collapse: collapse;
caption-side: bottom;
table-layout: fixed">
    <caption>学习前端</caption>
    <tr>
        <th style="border: 1px solid blue; width: 200px;
        vertical-align: top;
        text-align: right;
        padding: 10px 15px 20px 25px">HTML5</th>
        <th style="border: 1px dashed blue; width: 50px;height: 100px;">CSS</th>
        <th style="border: 1px dotted blue">JavaScript</th>
        <th style="border: 1px solid blue">Python</th>
    </tr>
    <tr>
        <td style="border: 1px solid blue">88</td>
        <td style="border: 1px solid blue">90</td>
        <td style="border: 1px solid blue">97</td>
        <td style="border: 1px solid blue">100</td>
    </tr>
</table>
</body>
</html>

四、样式选择器

用<style></style>在head中写样式，再由下面选择样式。

1. 元素选择器

此种方式写一个元素后用花括号写里面的元素样式，如th{border:1px dashed blue}；也可以多个元素一起，用逗号隔开。

2. 类选择器

这种方式最常用，写法类似p.important { }或者*.important{ }，一个表示特指段落p一个表示泛指。

在选择这个样式的时候可以选择多个，如class="important warning"等，可以遵循多个样式规则。

3. id选择器

顾名思义，根据id选择。写法如*#important{ }，选择时id="important"。

4. 属性选择器（CSS2引入的)

如 *[title] {color:red}代表有title属性的都为红色。

还有一类是伪类，如visited，hover等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <style>
        p,th,td{border: 1px dashed blue}
        p em{background-color: green}
        *.important{
            color: #FF0000;}
        *[title]{color: red}
        a:visited{color: #000000}
        a:link{}
        a:hover{}
        a:active{}
        a.red:visited{color: red}
    </style>
</head>
<body>
<div>
    <h1>请注意</h1>
    <a class="red" href="http://www.cumt.edu.cn">欢迎点这里</a>
    <img src="laugh.png" width="398" style="float: left"></img>
    <p title="Hello">
        <!--<i>生而为<em>人</em></i>  -->
        生而为<em>人</em>
    </p>
    <!--<p class="important">-->
    <p>
        请务必善良
    </p>
</div>
<table style="border: 1px solid blue;
border-collapse: collapse;
caption-side: bottom;
table-layout: fixed">
    <caption>学习前端</caption>
    <tr>
        <th>HTML5</th>
        <th>CSS</th>
        <th>JavaScript</th>
        <th>Python</th>
    </tr>
    <tr>
        <td>88</td>
        <td>90</td>
        <td>97</td>
        <td>100</td>
    </tr>
</table>
</body>
</html>