6C·浮动·垂直对齐方式·自动表格布局·字体·文本格式·文本换行

浮动

float:浮动的意思 浮喽特

浮动元素的外边缘不会超过其父元素的内边缘
浮动元素不会相互重叠
浮动元素不会上下浮动
在CSS中，任何元素都可以浮动
float:none/left/right

clear属性

（清除浮动 被影响的那个）

clear 属性用于清除浮动所带来的影响
（又占用文档流宽高）
clear：none/left/right
/both（清除两边的浮动）

（清除浮动 写在父级）

（又占用文档流宽高）
float与overflow
overflow:hidden;溢出 隐藏

表格常用样式属性

• border-collapse:collapse;
  设置表格边框合并collapse合并边框，separate为不合并，是默认值.
• border-spacing:20px 30px;
  设置单元格之间的间隙，一个参数代表上下左右相同，两个参数代表，一个左右，一个上下，三四个参数没用
• vertical-align属性，垂直对齐方式
  vertical-align：top/middle/bottom
• caption-side:bottom;
  设置标题的位置，默认top单元格之上，还有一个是设置在单元格下面的bottom

• table-layout：fixed；
  auto自动表格，自动调整布局，fixed为固定的表格布局，不自动调整，内容会因为过多过大而变形，前提是可以设置单元格的width的百分比

  
  
  

  设置单元格的百分比.PNG

文本格式化

font : font-style font-variant font-weight font-size fontfamily;

• font-family:微软雅黑；
  浏览器加载的字体样式
• font-size:4em;
  设别尺寸单位
• font-weight:800;
  默认400，bold默认为700，bolder为更黑，还可以取值100-900，900为最黑
• font-style:italic;
  默认倾斜，默认父标签样式；italic倾斜的意思，inherit为跟随父标签
• font-variant:small-caps;
  以小型字母输入，大写字母输出
• text-align：center；
  文本排列方式
• text-decoration：none；

设置文本线条
over-line显示在文本的上卖弄
under-line下划线
line-thrpugh 贯彻文字，删除的效果

• line-height：100px;
  行高设置文本单行的高度，处理单行文本垂直居中
• text-shadow: 20px 50px 10px #000;

文本阴影效果特好
第一个参数X轴偏移
第二个参数Y轴偏移
第三个参数模糊度

第四个参数颜色

• white-space:normal/nowrap;
  处理空白
• text-overflow：clip/ellipsis;
  文本溢出，文本横向超出，显示...，必须搭配overflow：hidden；
• overflow：hidden；
  隐藏溢出
• word-break:keep-all;

文本换行，

break-all塞满了才会换行
keep-all保持阵型中文标点符号作为分隔符，一条中文语句不会被放到两行。