怎么把前端option中的value传到后台_初学web前端的笔记总结
、
、，就是HTML代码中的标签
8-3 类选择器
语法：.类选器名称{css样式代码;}
注意：
1、英文圆点开头
2、其中类选器名称可以任意起名(但不要起中文噢)
8-4 ID选择器
注意：
1、使用ID选择器，必须给标签添加上id属性，为标签设置id="ID名称"，而不是class="类名称"。
2、ID选择符的前面是井号(#)号，而不是英文圆点(.)。
3、id属性的值即为当前标签的id，尽量见名思意，语义化。
8-5 类选择器和ID选择器的区别
相同点：可以应用于任何元素；
不同点：
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的(不能使用 ID 词列表)。
8-6 的选择器
即大于符号(>),用于选择指定标签元素的第一代子元素。
8-7 后代选择器
包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。
注意：子选择器(child selector)仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
8-8 通用选择器
通用选择器是功能最强大的选择器，它使用一个(*)号指定，它的作用是匹配html中所有标签元素。
8-9 伪类选择器
它允许给html不存在的标签(标签的某种状态)设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：比较常用的还是 a:hover 的组合。
8-10 分组选择器
为html中多个标签元素设置同一个样式时，可以使用分组选择符(，)。
第九章 CSS3的继承，优先级和重要性
9-1 样式的继承
样式的继承：CSS的某些样式是具有继承性的，继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。
9-2 选择器的优先级
讲解：
1、如果一个元素使用了多个选择器,则会按照选择器的优先级来给定样式。
2、选择器的优先级依次是: 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器。
9-3 权值计算-特殊性
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。
9-4 选择器的最高层级!important
!important要写在分号前面。
当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页，浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，请记住!important优先级样式是个例外，权值高于用户自己设置的样式。
第十章 CSS3字体样式
10-1 字体的样式
font-family：设置字体的类型
例：body{font-family:"Microsoft Yahei";}
font-size:设置字体的大小
例：body{font-size:12px;}
font-weight:设置字体的粗细
例：p span{font-weight:bold;}
font-style：设置字体的斜体样式
1、font-style可以设置字体样式，并且有种3设置方式。
2、正常字体为normal,也是font-style的默认值。
3、italic为设置字体为斜体，用于字体本身就有倾斜的样式。
4、oblique为设置倾斜的字体，强制将字体倾斜。
10-2 字体颜色
1、color属性可以设置字体颜色。
2、color的值有3种设置方式：
英文命令颜色
例：p{color:red;}
RGB颜色
这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。
例：p{color:rgb(133,45,200);}
每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。
例：p{color:rgb(20%,33%,25%);}
十六进制颜色
这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。
例：p{color:#00ffff;}
第十一章 CSS3文本样式
11-1添加文本修饰-text-decoration
1、text-decoration可以设置添加到文本的修饰。
2、text-decoration默认值为none, 定义标准的文本。
3、text-decoration的值为underline为定义文本下的一条线。
4、text-decoration的值为overline为定义文本上的一条线。
5、text-decoration的值为line-through为定义穿过文本下的一条线，一般用于商品折扣价。
11-2 文本添加首行缩进-text-indent
为文本添加首行缩进，2em的意思就是文字的2倍大小。
例：p{text-indent:2em;}
11-3 为文字设置行间间距-line-height
例：p{line-height:1.5em;}
11-4 增加或减少字符间的空白
letter-spacing:设置文字间隔或者字母间隔
注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。
word-spacing:设置单词与单词之间的距离。
11-5 设置对齐方式-text-align
例：h1{
text-align:center;
}
了不起的盖茨比
11-6 长度值
长度单位：常用到px(像素)、em、% 百分比，要注意其实这三种单位都是相对单位。
第十二章CSS3盒模型
12-1 元素分类
分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有：
、
...
、
- 、
- 、
、....常用的内联元素有：
、、
、、、、、、、、.....常用的内联块状元素有：
、.....
12-2 块级元素
display:block就是将元素显示为块级元素
例：将内联元素a转换为块状元素，从而使a元素具有块状元素特点。
a{display:block;}
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。(真霸道，一个块级元素独占一行)
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%(和父元素的宽度一致)，除非设定一个宽度。
12-3 内联元素
display:inline将元素设置为内联元素
例： div{
display:inline;
}
......
我要变成内联元素内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
12-4 内联块状元素
display:inline-block就是将元素设置为内联块状元素
内联块状元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
12-5盒模型的宽度和高度
css内定义的宽(width)和高(height)，指的是填充以里的内容范围。
一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
12-6盒模型的背景
网页中的标签不论是行内元素还是块状元素都可以给它设置一个背景色。
为标签设置背景颜色可以使background-color:颜色值来实现。
12-7盒模型的边框
盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
讲解:
1、border-style(边框样式)常见样式有：
dashed(虚线)| dotted(点线)| solid(实线)。
2、border-color(边框颜色)中的颜色可设置为十六进制颜色，如:
border-color:#888;//前面的井号不要忘掉。
3、border-width(边框宽度)中的宽度也可以设置为：
thin | medium | thick(但不是很常用)，最常还是用像素(px)。
12-8 设置圆角边框-border-radius
例：div{border-radius: 20px 10px 15px 30px;}
12-9 设置内边距-padding
元素内容与边框之间是可以设置距离的，称之为“内边距(填充)”。
填充也可分为上、右、下、左(顺时针)
12-10 设置外边距-margin
元素与其它元素之间的距离可以使用边界(margin)来设置。边界也是可分为上、右、下、左。
总结一下：padding和margin的区别，padding在边框里，margin在边框外。
第十三章：CSS3布局模型
在网页中，元素有三种布局模型：
1、流动模型(Flow)
2、浮动模型 (Float)
3、层模型(Layer)
13-1 流动模型
流动模型，流动(Flow)是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
特征：
1、块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
2、在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)。
13-2 浮动模型
浮动模型：任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动
例：实现两个 div 元素一行显示。
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
例：同时设置两个元素右浮动也可以实现一行显示。
div{
width:200px;
height:200px;
border:2px red solid;
float:right;
}
例：设置两个元素一左一右可以实现一行显示
div{
width:200px;
height:200px;
border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}
13-3 层模型
层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
13-4 绝对定位：position:absolute
需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
例：实现div元素相对于浏览器窗口向右移动100px，向下移动50px。
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
13-5 相对定位：position:relative
需要设置position:relative(表示相对定位)，它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
例：实现相对于以前位置向下移动50px，向右移动100px;
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
13-6 固定定位：position:fixed
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。
13-7 Relative与Absolute组合使用
1、参照定位的元素必须是相对定位元素的前辈元素：
相对参照元素进行定位从上面代码可以看出box1是box2的父元素(父元素当然也是前辈元素了)。
2、参照定位的元素必须加入position:relative;
#box1{
width:200px;
height:200px;
position:relative;
}
3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
#box2{
position:absolute;
top:20px;
left:30px;
}
这样box2就可以相对于父元素box1定位了(这里注意参照物就可以不是浏览器了，而可以自由设置了)。
第十四章：flex弹性盒模型
14-1弹性盒模型之flex属性
技术点的解释：
1、设置display: flex属性可以把块级元素在一排显示。
2、flex需要添加在父元素上，改变子元素的排列顺序。
3、默认为从左往右依次排列,且和父元素左边没有间隙。
14-2使用justify-content属性设置横轴排列方式
本属性定义了项目在主轴上的对齐方式
属性值分别为：justify-content: flex-start(交叉轴的起点对齐) | flex-end(右对齐) | center(居中) | space-between(两端对齐，项目之间的间隔都相等。) | space-around(每个项目两侧的间隔相等);
14-3 使用align-items属性设置纵轴排列方式
本属性定义了项目在交叉轴上的对齐方式
属性值分别为：
align-items: flex-start(左对齐) | flex-end(交叉轴的终点对齐) | center(交叉轴的中点对齐) | baseline(项目的第一行文字的基线对齐) | stretch(如果项目未设置高度或设为auto，将占满整个容器的高度。);
14-4 给子元素设置flex占比
1、给子元素设置flex属性,可以设置子元素相对于父元素的占比。
2、flex属性的值只能是正整数,表示占比多少。
3、给子元素设置了flex之后,其宽度属性会失效。
第十五章：CSS样式设置小技巧
15-1 水平居中行内元素
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。
例：
我想要在父容器中水平居中显示。