css操作

##表单标签
    表单标签用于收集用户数据。
    <form></form> 描述一个表单
    <input>
    <select></select>
    <textarea></textarea>
    
##CSS 级联样式表（cascading style sheet）
    html 标准下的标签主要的功能是在网页中定义内容（定义网页中有什么）
    而CSS用于为这些网页中的元素添加样式：
                1.设置元素的背景
                2.修改字体大小
                3.改变元素位置、边框、阴影...
                4.为元素添加动画
 ## CSS的写法
      1.内联样式（为标签添加style属性，在属性值中直接设置样式）
     ```
     <h1 style="color:red;">...<h1>
     <img src="....jpg" style="width:150px;">
     ```
     2.内部样式 （在HTML的head的标签中，添加style标签，在style标签中为当前网页的元素设置样式）
      如果一个标签绑定的样式很多，用内联样式就会很长，而且可维护性性很差。建议使用内联样式，
     将样式的设置与标签元素分开定义，在body标签中定义元素，而在head/style标签中定义元素样式。

     语法结构包含两部分：
    1. CSS选择器
         选择器用于选出当前网页中符合条件的一个或多个标签。
    2. CSS样式属性
        样式属性用于对选择器选出的一个或多个他标签添加CSS样式
    
##CSS选择器
1.标签选择器
通过标签名称，选出符合条件的标签
```html
<p>段落文本<p>
```

```html
<style>
p{
    color:red;}
    img{width:150px;}
</style>
```

2.id选择器
    选出网页中某些id属性值符合要求的一个标签。

```html
<h1 id="h1">111</h1>
<h2 id="h2">222</h2>
<h3 id="h3">333</h3>
```

```css
#h1 { color:red; }
#h2 { color:green; }
#h3 { color:blue; }
```

3.类选择器（class选择器）
    选出网页中某些class属性值符合要求的一个标签或多个标签。
    1.在style中定义一类样式。（起个名字）
    2.在页面中为某些需要使用这一类样式的标签，添加相应的class属性。
先定义一类样式：
```css
.red {color:white; background-color:red;}
.blue{color:blue; background-color:red;}
```

```html
<p class="red">文本内容</p>
<h1 class="blue">文本内容</h1>
<h3 class="red">文本内容</h3>
<h4 class="red">文本内容</h4>
```

4.分组（群组）选择器
```css
.red, p, #p2{
    选出所有class="red",所有的p标签，id="p2"的标签，统一添加样式
}
```

5.后代选择器（派生选择器）
以空格作为分隔符，选出后代元素。
```css
p  b{ 可以选出所有的p标签下面的b标签}
.red i{可以选出所有的class="red"的标签下的i标签}
```

###CSS样式属性
    1.布局属性
    2.字体属性
    3.文本属性
    4.背景属性
    5.边框属性
    
##布局属性
什么是布局（layout）？
将元素设置合适的大小，放到合适的地方。

布局相关css样式设置包含以下属性：
```css
p{
    width:200px;  控制元素宽度
    height:200px; 控制元素高度
}
```

不是所有的元素设置width和height都生效，元素可以从显示方式上分为以下3类
    1.块级元素
        常见的块级元素有：form、ul、li、div、h1~h6、p等
        一个块级元素将会占用一行的空间来显示。可以通过width和height
    2.行级元素 （设置width与height无效）
        常见的行级元素有：u、i、b、s、a、input等
        多个行级元素可以在一行中显示，如果一行到头了，则自动折行。
    3.行级块元素  (可以在一行中显示，并且可以设置宽高，例如: img)

有一个css属性可以让元素在这几种显示方式中切换:
```css
a{
    display: inline | block| inline-|block | none
}
```
        display: inline;        按行级元素显示
        display: block;         按块级元素显示
        display: inline-block;  按行级块元素显示
        display: none;          隐藏元素 (不显示该元素)
        
####文本属性
```css
p{
    color: red;                        // 文本颜色
    text-align: left | center | right; // 当前元素的文本水平对齐方式
    line-height: 20px;                   //行高
    text -decoration: none| underline; //文本的装饰
}
```

在css中设置颜色时，可以使用如下语法:
color: red;
color: #f00;
color: #f006;
coLor: rgb(255, 255, 255);
color: rgb(255,255,255, 0.5);|

### 字体属性
```css
P{
font-size: 12px;                                   //字体大小
font-family:微软雅黑;                               //字体
font -weight: lighter| normal I boldI bolder;      //字体磅值
}
```

###
边框属性
```css
div {
border-color: red;             边框颜色
border-style: solid| dashed;   边框样式   solid  为实线边框
border-width: 1px;             边框宽度

border: 1px solid black;
border- left-color: red;            边框颜色
border-left-style: solid| dashed;   边框样式       solid为实线边框
border- left-width: 1px;            边框宽度

border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border- bottom: 1px solid black;
}
```

设置圆角边框
```css
div {
border-radius: 5px; .设置圆角边框的半径5px
}
```

外边距相关：
内边距相关：

##布局属性
 将元素设置合适的大小，放到合适的地方

####设置元素宽高的属性
 1.width
 2.height
 
### 设置元素外边距的属性
 1.margin-top
 2.margin-bottom
 3.margin-left
 4.margin-right
 5.margin: 10px；  上下左右四个方向外边距都是10px
 6.margin: 10px  20px； 上下10px 左右20px
 7.margin: 10px  15px 20px 25px； 上右下左顺时针
 
 8.margin： 某px auto； 上下某px 左右自动设置（平分剩余空间）
 
### 设置元素内边距的属性
 1.padding
 2.padding-top
 3.padding-bottom
 4.padding-left
 5.padding-right
### 设置元素的边框属性
 1.border
 

###弹性布局  display:flex 

css对于容器中的元素的摆放方案有默认的规则:行级标签一行显示，到头了换行:块级元素一个占一行，垂直排列。
但是这种摆放规则很难实现一些常见的css布局需求。

如果一个容器设置了css属性：display：flex后，那么该容器将使用弹性布局来对容器中得子元素进行布局。无论子元素
是行级元素还是块级元素，他们所在的位置都将被弹性弹性盒子来接管。

弹性容器默认情况下有两个轴：主轴 / 交叉轴
弹性容器中的元素会沿着主轴方向进行排列。
可以通过一个css属性来改变主轴的万向;
1. flex-direction: row;      水平轴为主轴
2. flex-direction: column;   垂直轴为主轴
弹性盒子提供了以下属性方便的对子元素进行位置的摆放：
1. justify- content: 在主轴方向整理子元素的对齐方式
    1. start             主轴开始
    2. center            主轴居中
    3. end               主轴末尾
2. Ialign-items:在交叉轴方向上整理子元素的对齐方式
    1. flex-start 交叉轴开始
    2. center     交叉轴居中
    3. flex-end   交叉轴末尾