CSS_BASIC_2

八：文本格式化（重点********）

1.字体属性

 ① 指定字号大小

fon-size;  取值：px/pt/rem/em

 ② 字体的类型

font-family："mn boli",华文彩云,黑体；  在当前设备的字体库查找字体，如果有就使用，没有就查找下一个，如果字体中间有空格，必须加双引号

 ③ 粗体

font-weight： 取值 1. 关键字  lighter、normal 、bold、bolder                    2. 无单位的100的整数倍   一般 400~1000

 ④ 字体样式

font-style：normal/italic'； 正常和斜体

 ⑤ 小型大写字母

font-variant：small-caps；

 ⑥ 简写方式

font：style variant weight size family;   font: italic small-caps bolder 40px chiller; 最精简的方式：font：size family；

2.文本属性

 ①字体颜色

color

 ②文本水平对其方式

text-align： 取值：left/center/right/justift(两端对齐)

margin：0 auto；与text-align：center 的区别 margin：0 auto；控制是是当前元素本身在页面中居中（自己居中） text-align：center；控制的是当前元素内部的内容，在元素内部居中（让子元素居中）

 ③行高

line-height              定义一行数据的高度   特性：如果行高的高度大于字体本身的大小，那么改行文本将在指定的行高内，呈垂直居中方式显示   取值：1. 以px为单位的数字，一般行高的值与容器高度相同，文字垂直中间显示         2. 无单位的数字（整数小数都可以），行高为字号大小的倍数 Tips：如果文字有多行，不建议使用行高，文字会溢出，每一行的行高都是设置的大小

 ④文本线条修饰

text-decoration： 取值 overline 上划线 underline 下划线 line-throgh 删除线 none 去掉所有的修饰线条 a标签 去除a标签下划线（text-decoreation：none）

 ⑤首行缩进

text-indent：     取值： px为单位的数字

 ⑥文本阴影

text-shadow：h-shadow v-shadow blur color h-shadow:水平偏移 v-shadow:垂直偏移 blur：阴影模糊度 color：阴影颜色

九：表格的样式

1.表格的常用样式属性 table>tr>td

1.table：之前学过的样式，基本都可以使用， 尺寸，边框，背景。字体，文本，内外边距， 给table设置border，只设置最外面的大边框

2.th/td    尺寸，边框，背景。字体，文本，内边距  外边距无效    vertical-align   指定单元格数据的垂直对齐方式  取值：top/middle/bottom

 表格是一种特殊的表现方式

表格实际尺寸是根据内容数据的多少而决定的， 单元格小，内容多，自动撑开，内容少，单元格就按照设置的尺寸来展示

2.表格特有的样式属性

 ①边框合并

border-collapse:  取值： 1.separate 默认值，边框分离模式         2.collapse  边框合并模式

 ②边框边距

向设置边框边距，必须保证边框是分离状态  border-collapse：separate 属性 border-spacing： 取值：1.只有一个值  设置水平和垂直边框的外边距       2.两个值   第一个设置水平  第二个值设置垂直

 ③标题位置

caption-side：top 默认值/bottom

 ④设置表格的显示规则

table-layout                    用来确定如何布置一张表格     取值：1.auto 默认值 自动布局表格               列的尺寸实际使用内容决定的，内容比尺寸大，按照内容大小显示                  列的内容比尺寸小，按照尺寸显示            2.fixed  固定表格布局，列的尺寸以设置的为准 自动布局与固定布局 自动布局 固定布局 单元格的大小自动适应内容 单元格的大小却决于设置的值 表格复杂时，加载速度较慢 任何情况下，都会加速加载表格（有点） 比较灵活（优点） 布局固定不够灵活 适用于不确定每列大小的。并且不负责的表格 适用于能够确定每列尺寸大小的表格

十：定位   （重点********）

1.什么是定位

改变元素在页面中的位置

2.定位的分类

1.普通流定位 2.浮动定位 3.相对定位 4.绝对定位 5.固定定位

3.普通流定位

为默认文档流定位 每个元素在页面上都有自己的空间 每个元素都是从父元素的左上角开始渲染（显示） 块级元素按照从上到下逐个排列，每个元素单独成行 行内元素是多个与那素在一行中显示，从左往右顺序排列，显示上下换行

4.浮动定位

float  让块级元素横向显示 取值：left 让元素浮动后，在当前行停靠的父元素的左侧，或者挨着左侧已浮动的元素      right让元素浮动后，在当前行停靠的父元素的右侧，或者挨着右侧已浮动的元素      none 默认值，不浮动 1.浮动的特点： 元素一旦浮动，脱离文档流（不占页面空间，后面未浮动元素会上前补位） 浮动元素会在当前行，停靠在父元素的左/右边，或者停靠在其他已浮动元素的边缘 当父元素横向显示不下所有浮动元素是，最后显示不下的会自动换行 浮动用于解决多个元素在同一行显示的问题 2.浮动定位引发的特殊情况 浮动元素占位的问题 当元素显示不下所有浮动元素时，左后显示不下的元素会换行，但是，已浮动的元素或i根据自己的浮动方向占据位置，导致被挤下去的浮动元素需要让开位置，在更下面的地方显示   元素一旦浮动，如果元素未定义宽度，那么元素服饰之后的宽度将以内容为准 元素一旦浮动，都会变成块级元素，允许设置尺寸，可以设置垂直外边距 文本，行内元素，是不会被浮动元素压在下面的，而是巧妙地避开，环绕着浮动元素显示 3.清除浮动 清除之前的浮动元素给自己带来的影响。 由于元素浮动之后，会脱离文档流，会让后续不浮动的元素上前补位，如果后续元素不想上前补位，需要对此元素设置清除浮动  clear： left/right/both/none   取值 left 清除左浮动对自己的影响  right 清除右浮动对自己的影响         both 清楚左右浮动对自己的影响  none 不清除对自己的影响 4高度坍塌 什么叫高度坍塌 1.父元素不写高，靠子元素撑起高度 2.所有子元素都浮动  那么所有子元素都脱离文档流，父元素会认为自己内部没有了元素，所有父元素就没有了高度 解决方案 父元素也浮动，弊端：影响父元素后续的非浮动元素 直接给父元素高度，弊端：不是每次都能知道具体高时多少 overflow：hidden 弊端，会让真正要溢出不能显示 在父元素中追加一个块级元素，这个块级元素没有内容，不写高，只写clear：both。就可以让父元素在文档流中找到内容的高度，

相对定位  绝对定位   固定定位

position     定位 取值：  static 默认值，静态（默认文档流定位）                    relative 相对定位                    absoulte 绝对定位                    fixed  固定定位 当一个元素被position修饰时，并且取值relative/absoulte/fixed其中一种时，这个元素被称为已定位元素   已定位元素，解锁了4个偏移属性，定义了元素距离某一个方向移动了多少距离  top   + 往下 - 往上  left  + 往右  -  往左  right  + 往左 -  往右  bottom  + 往上  - 往下

5.相对位移

position：relative；     相对位移，相对自己原来的位置，偏移某个距离，配合4个偏移属性使用 特点： 1.不脱离文档流，后面的元素不会上前补位             2.相对定位，如果不写偏移量，元素效果与没有定位是一样的 使用场合：   1.自身位置的微调   2.作为绝对定位的祖先级元素

6.绝对定位

position：absoulte;  配合偏移量使用 特点：  1.绝对定位，脱离文档流，元素不占页面空间，后面元素上前补位  2 .绝对定位会相对于 离自己最近的 已定位的 祖先元素 实际位置的初始化  3.绝对定位元素会变成块级元素  4.绝对定位元素，如果不写宽定义之后，宽靠内容撑开

7.固定定位

position:fixed;    配合偏移量使用  将元素固定在页面的某个位置，不会随着滚动条发生位移变化 特点：  1.脱离文档流  2.元素变为块级元素  3.不写宽的会被内容撑开  4.相对body做位置的初始化

8.堆叠顺序

特点：  1.默认堆叠顺序，后定位的元素，堆叠顺序高  2.定位的脱离文档流，和浮动的脱离文档流不是一个体系  3.使用 z-index 设置堆叠顺序   取值：无单位数字 一般1~1000   eg：z-index：1；  4.堆叠顺序，只对已定位元素有效  5.堆叠顺序，对父子级无效，子元素永远在父元素上面显示

十一：元素显示

1. 元素的显示方式

display 取值： 1. block 让元素的表现和块级元素一致        2. inline 与行内元素一致             3. inline-block 与行内块元素一致             4. table 与ta ble一致             5. none 不显示元素，隐藏 块级元素：独占一行，可以设置尺寸，上下外边距有效 行内元素：共用一行，尺寸无效，上下外边距有效 行内快元素：共用一行，可以设置尺寸上下外边距有效 table元素：独占一行，可以设置尺寸，尺寸以内容为主

2：显示效果

visibility 取值：1. visibile 默认值，可见       2. hidden  隐藏不可见 visibile：hidden和display：none的区别    visibile：hidden；隐藏，元素不脱离文档流，在当前页面不可见，但是占据位置    display：none；隐藏，元素脱离文档流，隐藏后不占位置，后面元素上前补位

3：透明度

opacity  取值： 0~1 值越小越透明 opacity和rgba的区别   opacity元素内部只要元素相关的颜色都会跟着透明、   rgba 只会改变当前颜色的透明度

4：垂直对齐方式

vertical-align：  使用场合： 1.表格中 td/th   取值：top/middle/bottom 2.img与文字的排版  改变的是img与前后文本的对齐方式 取值: top/middle/bottom/baseline（基线） 通常，会将所有的图片与文字的对齐方式，改为非基线对齐方式

5：光标的设置

cursor 取值： default pointer crosshair text wait help 箭头 小手 十字 文本输入的I 等待 帮

6：列表的样式

ul的样式 1.列表项标识   list-style-type：   取值：none/disc/circle/square 2.列表项标识，设置为图片（图片要小）   list-style-image：url（路径） 3.列表项标识的位置   list-style-position：inside/outside（默认值）  设置列表项是在li的内部还是外部 4.简写方式   list-style：type image position；   项目中常用新的写法：list-style：none；  去掉列表的标识项