day36_Css
- Css样式
- Css样式的种类
- 选择器
- 文本相关样式
- 背景相关样式
- 边框
- 盒子模型
- 标准流static
- 浮动流float
- 定位流position
标签由三部分构成
1.标签名
2.标签的属性值
3.标签的文本内容
select标签
下拉列表标签，常用于单选或多选，是一个组合标签，需要和子标签option一起搭配使用，不会独占一行
常用属性：
- name属性：发送给服务器使用的
- multiple属性：不写默认单选，取值为multiple表示多选，一般使用单选
- size属性：可见选项的数目
option标签
selected属性：表示勾选当前选项
value属性：用于发送给服务器的选项值
注意：
1.如果使用多选，那么选择的时候，需要按下ctrl键进行选择
2.size属性一般情况下不设置
3.selected属性如果不设置，默认显示的是列表中第一个选项
4.value属性，如果不设置，发送给服务器的值是option的文本值
，设置了value属性值，那么发送过去的就是value值，一般情况都需要设置
textarea标签
文本域，用于多行输入文本信息
- name属性：用于发送给服务器的名称
- cols属性：文本域列数 （文本域框的尺寸）
- rows属性：文本域的行数（文本域框的尺寸）
CSS样式
进行页面美化和布局控制
概念：cascading style sheet层叠样式表
层叠：多个样式作用在同一个html元素上，可以同时生效
好处：
- 功能比较强大
- 降低了程序耦合度，将内容展示和样式控制分离，分工协作更加方便，CSS样式可复用性高
<!--使用：-->
<style type ="text/css">
选择器{
属性1:属性值;
属性2:属性值;
属性3:属性值1 属性值2 属性值3...;
...
}
</style>
注意：
- 选择器严格区分大小写，属性和属性值不区分大小写，属性与属性之间使用分号隔开，最后一个属性可以省略不写。如果一个属性有多个属性值，多个属性值之间空格隔开，type属性可以省略不写。
- 如果一个标签有多个css样式控制，按照就近原则进行覆盖。
- css样式的种类，三种：行内样式 > 内联式 > 外联式。
选择器
当我们想要设置某些标签样式时，就必须让css代码找到对应的标签，通过选择器可以找到对应的标签
常用选择器
- 标签选择器，语法格式： **标签名称{ } **如：对div标签控制，---> div
- id选择器，语法格式：#id名称{ } ，id一般不能重复，需要给标签添加一个id属性
- 类选择器，语法格式：.class{ }，class可以重复，需要给标签添加class属性
- 并集选择器，语法格式：选择器1，选择器2，...{ }
- 属性选择器，语法格式：标签[属性="具体的属性值"]{ }，如：input[ type="text"]--->对用户输入框进行设定 || input[ type="password"]--->对密码输入框进行设定
不太常用的选择器
后代选择器，语法格式：选择器1 选择器2{ }浏览器加载样式时，会首先找选择器1对应的标签存在与否，如果存在，继续寻找选择器2对应的标签。
子元素选择器，语法格式：选择器1 > 选择器2{ }浏览器会加载选择器1下的所有子元素符合选择器2的条件
交集选择器，语法格式：选择器1选择器2{ }要求标签同时具备选择器1和选择器2，css才会生效
相邻兄弟选择器，语法格式：选择器1+选择器2{ }
通用兄弟选择器，语法格式：选择器1~选择器2{ }
选中同级别的第一个标签，语法格式：标签：first-child{ }
选中同级别中同类型的第一个标签，语法格式：标签：first-of-type{ }
选中同级别第几个标签，语法格式：标签：nth-child（n）{ }
选中同级别中同类型的第几个标签，语法格式：标签：nth-of-type（n）{ }
文本系列样式
用于设置文本相关的一些样式
- font-style：设置文字样式，常用取值为斜体（italic）和普通（normal）
- font-weight：设置文字粗细，常用取值为lighter，light，bold，bolder，还可以使用数字进行表示 100-900
- font-size：设置字体大小，取值默认单位为px
- font-famliy：设置字体样式 如" 宋体"、'微软雅黑'
- font：可以连写，使用一个属性设置多个属性值，如：font：20px italic bold "宋体"；
- text-decoration：文本装饰，常用取值为 none、underline、overline、line-through
- text-align：水平方向对齐方式，默认左对齐 常用取值 left right center
- text-indent：缩进方式，em为缩进单位，2em相当于往里缩进2个文字的宽度
- color：设置文字的颜色，英文单词 / rgb / #xxxxxx
背景系列样式
设置标签的背景相关样式
- background-color：设置标签背景颜色
- background-image：设置背景图像，它的属性值语法格式：url（相对路径）；自动平铺
- background-repeat：设置平铺方式，repeat默认值、no-repeat不平铺、repeat-x水平平铺、repeat-y垂直平铺
- background-position：设置背景图像定位方式，格式为：水平方向数值 垂直方向数值；水平方向：left、center、right；垂直方向：top、center、bottom，也可以是具体的像素值 如：100px 100px
- background-size：设置背景图像的尺寸大小，尺寸大小可以使用百分比，也可以使用具体的像素值
- background-attachment：设置背景关联方式，scroll（会随着滚动条的滚动而滚动）和fixed（不会随着滚动条的滚动而滚动）
- background：可以连写，如 background：
边框系列样式
border属性，也可以连写 格式：宽度、样式、颜色、边框倒角radius：边框四角的弧度
盒子模型
padding：内容到边框的距离叫做内边距，内边距属性按照上右下左进行设置，也可以分开设置，改变内边距的宽高会影响元素的大小
margin：元素边框与元素边框之间的间距就是外边距，设置的顺序也是上右下左，如果我们设置margin的值为：0 auto 就代表距离上方边框为0像素远，距离左右两边为水平居中
盒子模型的构成（border-box）：
元素的宽度：左边框 + 左内边距 + 内容宽度 + 右内边距 + 右边框
元素的高度：上边框 + 上内边距 + 内容高度 + 下内边距 + 下边框
元素空间的宽度：左边的外边距 + 元素的宽度 + 右边的外边距
元素空间的高度：上边的外边距 + 元素的高度 +下边的外边距
*{
box-sizing：content-box; //设置上边距时，会扩大盒子高度
box-sizing：border-box //设置上边距时，不会扩大盒子高度
}
如果我们采用的是内容盒子content-box，那么设置内边距后，内容宽高不会发生改变，但元素的自身宽高也会发生改变
但是如果我们设置盒子模型border-box，那么设置内边距后，元素自身宽高不会发生改变，但内容宽高会发生改变
如果相邻元素对彼此方向设置外边距，自动取较大值
标准流
- Html标签被分为两种类型，一种是块级标签（独占一行，能够设置宽高），另外一种是行级标签（不独占一行，一般不能设置宽高）
- 这两种类型的标签都是按照标准流的方式进行渲染加载的（排列），行级标签从左到右加载，块级标签从上到下加载
display：
常用取值：inline（行级元素）、block（块级元素）、inline-block（行内块元素）、none（隐藏，不占空间）
浮动流
设置标签属性float，能够让元素向左或者向右进行浮动（无上下浮动），如果元素按照浮动流渲染，那么该元素会脱离标准流，在浮动流中没有行级元素和块级元素之说。但是都可以设置宽和高
在标准流加载方式下，如果更改标准流为浮动流·，那么该元素后面的元素会相应的顶上来
如果按照浮动流进行加载，在浮动流加载的情况下，元素之间是紧邻排列的，中间没有空隙
clear
设置clear属性，能够使元素在浮动的过程中不区紧贴其它标签，它只能影响自己，不能影响其它元素
定位流
相对定位
不会脱离标准流。相对于在标准流的位置进行位置移动，所以下边的元素不会再顶上来
属性position设置值为 relative 结合top/left/right/bottom进行空间位置移动
绝对定位
会脱离标准流。下边元素会顶上来，相对于在标准流的位置上进行空间移动
属性position设置值为absolute 结合top/left/right/bottom进行空间位置移动
如果它的父元素或者是祖先元素都没有设置定位流（相对/绝对/固定定位），绝对定位相对于body定位。
如果它的父元素或者是祖先元素设置了定位流，绝对定位相对于父元素或祖先元素（就近原则）。
在绝对定位中，不区分块级元素和行级元素，但都可以设置宽高。
定位流中，一般采用父相（相对定位）子绝（绝对定位）的方式 ，子标签始终参照父标签进行相对定位移动
固定定位
固定定位也会脱离标准流,设置position为fixed，依然需要借助于四个方向属性top/left/right/bottom四个属性进行空间移动，依然不区分行级元素和块级元素。
和绝对定位一样，唯一的不同是它不会随着滚动条的滚动而发生移动
z-index
可以改变定位流中的前后加载顺序
定位流中有以下规律：
- 默认情况下定位流会覆盖标准流
- 默认情况下，后加载的会覆盖前面加载的
- 定位流中，设置z-index（数值）这个值谁的大，谁先加载
- 如果父元素设置z-index，子元素的z-index就会失效
- 谁的父元素大，谁就显示在上方(从父原则)
JavaScript概念的介绍
JavaScript是一门web上的编程语言，用于和用户进行交互，不需要进行编译，嵌套在html文件中由浏览器引擎加载执行，和Java没有大的联系。
JavaScript的组成
- 核心（ECMAScript）语法，包括基本的流程控制、运算符、数据类型、数组、对象、类、接口等
- 浏览器对象模型（BOM）browser object model，主要是操作当前浏览器窗口的内容，如页面的跳转和页面刷新等动作
- 文档对象模型（DOM）document object model，主要是操作html文件中具体的内容（页面元素内容），如页面中有一个div，动态的给div添加高和宽、背景图像、植入文本内容等
JavaScript代码的引入
-
内嵌式
在html文档中，将相关的js代码直接放在标签
