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>

注意：

1. ​ 选择器严格区分大小写，属性和属性值不区分大小写，属性与属性之间使用分号隔开，最后一个属性可以省略不写。如果一个属性有多个属性值，多个属性值之间空格隔开，type属性可以省略不写。
2. ​ 如果一个标签有多个css样式控制，按照就近原则进行覆盖。
3. ​ css样式的种类，三种：行内样式 > 内联式 > 外联式。

选择器

​ 当我们想要设置某些标签样式时，就必须让css代码找到对应的标签，通过选择器可以找到对应的标签

常用选择器

1. ​ 标签选择器，语法格式： **标签名称{ } **如：对div标签控制，---> div{ }
2. ​ id选择器，语法格式：#id名称{ } ，id一般不能重复，需要给标签添加一个id属性
3. ​ 类选择器，语法格式：.class{ }，class可以重复，需要给标签添加class属性
4. ​ 并集选择器，语法格式：选择器1，选择器2，...{ }
5. ​ 属性选择器，语法格式：标签[属性="具体的属性值"]{ }，如：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，那么设置内边距后，元素自身宽高不会发生改变，但内容宽高会发生改变

如果相邻元素对彼此方向设置外边距，自动取较大值

标准流

1. ​ Html标签被分为两种类型，一种是块级标签（独占一行，能够设置宽高），另外一种是行级标签（不独占一行，一般不能设置宽高）
2. ​ 这两种类型的标签都是按照标准流的方式进行渲染加载的（排列），行级标签从左到右加载，块级标签从上到下加载

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

​ 可以改变定位流中的前后加载顺序

定位流中有以下规律：

1. ​ 默认情况下定位流会覆盖标准流
2. ​ 默认情况下，后加载的会覆盖前面加载的
3. ​ 定位流中，设置z-index（数值）这个值谁的大，谁先加载
4. ​ 如果父元素设置z-index，子元素的z-index就会失效
5. ​ 谁的父元素大，谁就显示在上方(从父原则)

JavaScript概念的介绍

​ JavaScript是一门web上的编程语言，用于和用户进行交互，不需要进行编译，嵌套在html文件中由浏览器引擎加载执行，和Java没有大的联系。

JavaScript的组成

1. ​ 核心（ECMAScript）语法，包括基本的流程控制、运算符、数据类型、数组、对象、类、接口等
2. ​ 浏览器对象模型（BOM）browser object model，主要是操作当前浏览器窗口的内容，如页面的跳转和页面刷新等动作
3. ​ 文档对象模型（DOM）document object model，主要是操作html文件中具体的内容（页面元素内容），如页面中有一个div，动态的给div添加高和宽、背景图像、植入文本内容等

JavaScript代码的引入

• ​ 内嵌式

  在html文档中，将相关的js代码直接放在标签