标签：分离 必须 lap 去除 划线 换行 over 加载 text
三.文本格式化(重点********)
1.字体属性
①字号大小
|
font-size: 取值：px/pt/em/rem |
②设置字体类型
|
font-family:"mv 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/justify两端对齐 |
|
margin:0 auto和text-align:center的区别 margin:0 auto，控制的是当前元素本身在页面中居中(让自己居中) text-align:center 控制的是当前元素内部的内容，在元素内部居中(让我的儿子居中) |
③行高
|
定义一行数据的高度 特性：如果行高的高度大于字体本身的大小 那么该行文本将在指定的行高内，呈垂直居中方式显示 line-height 取值：1.以px为单位的数字，一般，行高的值与容器高度相同。 这样就可以让文字在容器垂直中间显示了 2.无单位的数字(整数小数都可以)，行高为字号大小的倍数
注意:文字如果有多行，不建议使用行高，文字会溢出，每一行的行高都是你设置的大小 |
④文本线条修饰
|
text-decoration 取值：overline 上划线 underline 下划线 line-through 删除线 none 去掉所有的修饰线条 a{text-decoration:none}去除a标签下划线 |
⑤首行缩进
|
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.td/th的样式 尺寸，边框，背景，字体，文本，内边距 外边距无效 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.固定定位 |
①普通流定位
|
又称为默认文档流定位 1.每个元素在页面上都有自己的空间 2.每个元素都是从父元素的左上角开始渲染（显示） 3.块级元素按照从上到下逐个排列，每个元素单独成行 4.行内元素是多个元素在一行中显示，从左往右顺序排列，显示不下换行 |
②浮动定位
|
让块级元素横向显示 float： 取值：left 让元素浮动后，在当前行停靠在父元素的左侧，或者挨着左侧已浮动元素 right让元素浮动后，在当前行停靠在父元素的右侧，或者挨着右侧已浮动元素 none 默认值，不浮动
浮动的特点 1.元素一旦浮动，脱离文档流(不占页面空间，后面未浮动元素会上前补位) 2.浮动元素会在当前行，停靠在父元素的左/右边，或者停靠在其他已浮动元素的边缘 3.当父元素横向显示不下所有浮动元素时，最后显示不下的，会自动换行 4.浮动用于解决，多个块级元素在同一行显示的问题 |
③浮动定位引发的特殊情况
|
1.浮动元素占位的问题 当元素显示不下所有浮动元素时，最后显示不下的元素会换行 但是，已浮动元素会根据自己的浮动方向占据位置， 导致被挤下去的浮动元素，需要让开位置，在更下面的地方显示
|
|
2.元素一旦浮动，如果元素未定义宽度，那么元素浮动之后的宽度将以内容为准
|
|
3.元素一旦浮动，都会变成块级元素 允许设置尺寸，可以设置垂直外边距 |
|
4.文本，行内元素，是不会被浮动元素压在下面的。而是巧妙的避开，环绕着浮动元素显示 |
④清除浮动
|
清除之前的浮动元素给自己带来的影响 由于元素浮动之后，会脱离文档流，会让后续不浮动的元素上前补位. 如果后续元素不想上前补位，需要对此元素设置清除浮动 clear: 取值：1.left 清除左浮动对我的影响 2.right 清除右浮动对我的影响 3.both 清除左右浮动对我的影响 4.none 不清除影响 |
⑤高度坍塌
|
什么叫高度坍塌 1.父元素不写高，靠子元素撑起高度 2.所有子元素都浮动 那么所有子元素都脱离文档流，父元素认为自己内部没有元素了 所以父元素就没有高度了 解决方案： 1.父元素也浮动，弊端，影响父元素后面的非浮动元素 2.直接给父元素写高度 弊端，不是每次都能知道具体高是多少 3.overflow：hidden 弊端，会让真正要溢出不能显示 4.在父元素中追加一个块级元素，这个块级元素，没有内容，不写高。只写clear:both。就可以让父元素在文档流中找到内容的高度 解决高度坍塌问题 |
标签：分离 必须 lap 去除 划线 换行 over 加载 text
原文地址：https://www.cnblogs.com/luwei0915/p/12289745.html
