CSS列表、表格、表单、高级选择器以及框模型

列表

---

列表样式

---

使用场景

横向或者竖向菜单（有序或者无序列表）
自定义列表（有级别的内容，图文混排的内容）

---

列表样式属性

设置不同的列表样式：list-style-type

ul.circle {list-style-type:circle;}	标记是空心圆。
ul.square {list-style-type:square;}标记是实心方块。

把图像设置为列表中的项目标记：list-style-image

ul
  {
  list-style-image:url("图像路径");
  }

规定列表中列表项目标记的位置：list-style-positon

ul
  {
  list-style-position:inside;
  }

简写属性在一个声明中设置所有的列表属性：list-style

可以按顺序设置如下属性：
type,position,image
ul
  {
  list-style:square inside url('图像路径');
  }

表格

应用场景

规律性的数据展示

基本结构

table-tr-td

表单元素及常用属性

• 标签的 colspan 属性

表格单元横跨两列的表格

• 标签的 rowspan 属性

表格单元横跨两行的表格
#表单
##定义
HTML 表单用于搜集不同类型的用户输入。
##结构

<form> 元素定义 HTML 表单：

属性

Action 属性

action 属性定义在提交表单时执行的动作。
如果省略 action 属性，则 action 会被设置为当前页面。

Method 属性

method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：

get和post使用区别

何时使用 GET（默认方法）？

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。

当您使用 GET 时，表单数据在页面地址栏中是可见的，GET 最适合少量数据的提交。浏览器会设定容量限制。

何时使用 POST？

如果表单正在更新数据，或者包含敏感信息（例如密码）。

POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。

##应用场景
收集数据

---

# CSS高级选择器 ## 并集选择器 ### 定义 你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。 #### 例子 ``` h1,#red,.first,h4,h5,h6 { color: green; } 注意：不同类型的选择器都可以作为并集选择器的一部分，用逗号分隔开。 ``` ## 交集选择器 ### 定义 标签+ID或类 ### 例子

h1.second{.....}

后代选择器

定义

后代选择器可以选择作为某元素后代的元素。

语法

在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符。

例子

p a{....}

子元素选择器

定义

子元素选择器只能选择作为某元素子元素的元素。

例子

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

属性选择器

定义

属性选择器可以根据元素的属性及属性值来选择元素。

例子

选择输入框里type="text"的所有元素

input[type="text"]{......}

CSS框模型

内边距margin

外边距padding

边框border

盒子尺寸

---

未完待续…