CSS day4

文本格式化

1.字体属性

①设置字号大小

font-size:  px/em/rem/pt

②设置字体系列
font-family:字体1,字体2,字体3… 推荐，如果字体中有空格，建议使用双引号
③字体加粗
font-weight:
取值：1.关键字 lighter normal bold bolder
300 400 600 700
2.不带单位的数字，必须是100的整倍数，最大值为1000
④字体样式 font-style:normal/italic
⑤小型大写字母font-variant: small-caps;
⑥简写方式,必须按照顺序写

font:style  variant  weight  size  family;

最简方式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：px为单位的数字，一般会填写容器的高度，让文本在容器中垂直居中
不带单位的数字，行高是字号倍数
注意，不建议给多行文本设置行高，不然溢出的文本每一行行高也会根据设置判定
④文本线条修饰
text-decoration:
underline; 下划线
overline；上划线
line-through；删除线
none; 去掉所有线条 a标签去除下划线
⑤文本阴影
text-shadow:h-shadow v-shadow blur color;
h-shadow: 水平偏移量
v-shadow 垂直偏移量
blur 模糊程度
color 阴影颜色

表格

1.表格常用属性

table 尺寸，文本，背景，边框，内外边距都有效
注意，边框仅仅是table最外围的边框
td/th 尺寸，文本，背景，边框，内边距都有效
外边距无效

2.table的特有属性

①垂直对齐
设置内部内容的垂直对齐方式

vertical-align:top/middle/bottom

只有table中，使用vertical-align设置内容的垂直对齐方式
其它元素失效，其它元素用line-height
②边框合并
border-collapse: separate; 默认值，边框分离状态
collapse 边框合并
③边框间距
边框必须是分离状态border-collapse: separate;
border-spacing:v1; 水平和垂直间距同时设置
v1 v2; 分别设置水平和垂直
④设置表格的显示规则
table-layout: auto; 默认值，表格自动布局
列的尺寸有内容和设置尺寸，谁大以谁为准
fixed 表格固定布局，设置的尺寸是多少，表格就是多少
内容比较大，内容溢出
表格自动布局 表格固定布局
单元格大小，会自动根据内容和设置的尺寸进行调整 单元格大小，永远以设置的尺寸为准
表格内容较多时，加载速度慢，效率低 不管内容多少，加载速度都很快
自动布局比较灵活 固定布局不够灵活
适用于不确定每列大小，并且不复杂的表格 适用于确定每列大小的表格

定位（重点******************************）

设置元素在页面上的位置
分类
1.普通流定位
2.浮动定位
3.相对定位
4.绝对定位
5.固定定位

1.普通流定位

各个元素原始的显示形式，就是普通流定位（默认文档流定位）

2.浮动定位

让块级元素横向显示的时候，使用浮动定位
浮动的原理
元素一旦浮动
1.脱落文档流
不占页面空间，后续元素上前补位
2.在浮动的当前行，向左/右对齐

float:left/right/none

浮动的特点
1.元素一旦浮动，会脱离文档流(脱离文档流会完成4件事)
①不占页面空间
②后续元素上前补位
③没有设置宽度的元素，脱离文档流之后，宽度靠内容撑开
④任何元素脱离文档流之后，都可以设置宽高，都可以设置上下外边距
2.浮动后的元素，会停靠在父元素最左边/右边，或者在其它浮动元素的后面排队
3.父元素横向放不下所有浮动元素时，最后显示不下的浮动元素会自动换行
4.浮动就是为了解决块级元素横向显示的问题

3.浮动的特殊情况

①浮动元素的占位问题

当父元素显示不下所有浮动元素时，显示不下的浮动元素会换行

浮动元素会在自己的浮动方向进行占位。换行的浮动元素要躲开被占位的空间

②没有设置宽度的元素，浮动之后，宽度靠内容撑开

③文本，行内，行内块，永远不会被浮动元素压在下面。

④任何元素浮动之后，都可以设置宽高，都可以设置上下外边距

4.清除浮动带来的影响

浮动元素给后续不浮动元素带来了影响，后续元素会上前补位，会被浮动元素压在下面
清除浮动带来的影响，当前元素不上前补位
clear:left; 清除左浮动带来的影响
right; 清除右浮动带来的影响
both; 左右浮动的影响都清除

5.高度坍塌

父元素不写高度，内部所有子元素都浮动，
父元素在文档流中找不到高度，所以高度缺失了
解决方案：1.父元素添加高度，项目中经常用
适用于准确得到内部子元素高度时候
2.给父元素设置浮动，绝对不能用的方案
会影响父元素的兄弟元素，和父元素的父元素
3.给父元素设置overflow:hidden/auto
父元素如果想溢出显示，就办不到了
4.给父元素添加一个小儿子，这个小儿子空的div
并且设置clear:both

开发css代码的步骤
1.找元素，先外后内，先左后右，先上后下
2.写样式的步骤
①尺寸，大体位置
②边框和背景
③文本相关
④微调