T-CSS基础-day04-文本格式化、表格、浮动和定位

本文链接：https://blog.youkuaiyun.com/Mr_JinChang/article/details/105463402

本文主要介绍了CSS中的文本格式化，包括字体、字号、加粗、样式和小型大写字母等属性。此外，讲解了表格的样式设置，如文本垂直对齐、边框合并和标题位置等。定位部分阐述了定位的概念和分类，如普通流定位、浮动定位、相对定位、绝对定位和固定定位，并讨论了浮动带来的影响及清除浮动的方法。对于初学者，提供了写样式的基本步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

八.文本格式化（重点）
九.表格的样式
十.定位(大重点)
初学者写样式步骤

八.文本格式化（重点）

字体属性
1. 设置字号的大小
  font-size
  取值：px/pt为单位的数字；em/rem
2. 字体类型
  font-family
  font-family: 微软雅黑,"mv boli",chiller;：表示会先使用第一种字体，如果第一种字体不支持，会使用第二种字体，以此类推
3. 字号的加粗
  font-weight:
  取值：
  ①关键字：lighter normal(跟lighter区别不大) bold bolder(跟bold区别不大)
  ②100的整倍数（100~1000之间，超过1000失效）400–normal 600–bold
4. 字体的样式
  font-style:
  取值：italic—斜体；norrmal—普通（没有样式）
5. 小型大写字母
  font-variant: small-caps;
6. 字体设置的简写
  font:style variant weight size family;
  最简方式：font:size family;
文本属性
1. 文本颜色
  color：合法的颜色值
2. 文本对齐方式
  text-align: left/center/right/justify(两端对齐);
  详细说明：①块级元素水平对齐不能使用text-align:center，只能使用margin:0 auto；②text-align只对内部的文本，行内元素，行内块元素有效（即可使行内、行内块元素左对齐，居中，右对齐）
3. 文本的垂直对齐方式—行高
  定义一行文本的高度
  特点：如果行高大于文本本身的大小，文本会在行高范围内，垂直居中显示
  line-height:
  取值：①以px为单位的数字；②不带单位的数字，代表字号的倍数
  通常会把行高设置为与容器高度相同，让文本在容器垂直居中。但是，如果文本超过一行，不建议使用(使用内边距去调整)
4. 文本线条的修饰
  text-decoration:
  取值：
  none a标签去除下划线
  underline 添加下划线
  overline 添加上划线
  line-through 添加删除线
5. 首行的缩进
  text-indent: 取值以px为单位的数字
6. 文本阴影
  text-shadow: h-shadow v-shadow blur color;
  h-shadow：水平偏移量
  v-shadow：垂直偏移量
  blur：模糊程度
  color：颜色
  练习
  01_ex.html
  定义div，内容随意，有中文，充满了爱意
  1.设置字体系列
  2.文本大小
  3.加粗并斜体
  4.小型大写字母
  5.两端对齐
  6.有删除线
  7.首行缩进80px
  8.文本每行垂直居中

九.表格的样式

表格的常用属性
1. table
  之前学习的属性，尺寸，边框，背景，文本，内外边距，都有效。但是，注意border只会设置table的边框，只有最外边的一圈（即td，th需要额外设边框）
2. td/th
  之前学习的属性，尺寸（宽度由table宽度管制），边框，背景，文本，内边距，都有效。但是外边距无效
  vertical-align: 设置文本垂直对齐方式
  取值：top/middle/bottom
table是一种特殊的显示方式
table的真正大小，是依照设置的尺寸和内容，谁大听谁大
同一行中，所有列的高度，以最高的为准
不同行中，相同列的宽度，以最宽的为准
table在浏览器的渲染方式，先把所有内容读取到内存中，再一次性渲染。效率低
表格特有属性
1. 边框合并
  border-collapse:
  取值：
  separate ; 默认缺省值，边框分离状态
  collapse ：边框合并状态
2. 边框的边距(td不能设置margin,所以使用边框边距来设置)
  border-spacing: 取值：以px为单位的数字;
  前提：边框是分离状态的时候才有效
3. 标题的位置
  caption-side:
  取值：
  top;默认在表格的上方
  bottom ：在表格的下方
4. 设置表格显示规则
  table-layout:
  取值：
  auto；默认值自动布局表格
  fixed; 固定布局的表格

自动布局表格	固定布局表格
单元格的大小会自动适应内容	单元格大小，严格遵循设置的尺寸
表格复杂时，表格的加载速度较慢	任何情况下，都会加速表格加载
自动布局比较灵活	不够灵活
适用于不确定每列大小，并且不复杂的表格	适用于确定每列大小的表格

十.定位(大重点)

什么是定位：控制元素在页面中的位置
分类
1. 普通流定位
2. 浮动定位
3. 相对定位
4. 绝对定位
5. 固定位
普通流定位（默认文档流定位）
1. 每个元素在页面上都有自己的空间(所有元素皆为框)
2. 每个元素都是从父元素的左上角开始渲染
3. 块级元素是按照从上往下的方式，逐个排列，单独成行
4. 行内和行内块是多个元素在一行中显示，从左往右排列，一行放不下就换行
浮动定位
让块级元素横向显示
float:
取值：
none;：默认值，无任何浮动效果---->默认文档流
left;：让元素浮动之后停靠在父元素的最左边，或者其他已浮动的后面
right;：让元素浮动之后停靠在父元素的最右边，或者其他已浮动的后面
浮动特点：
1. 元素一旦浮动，脱离文档流（不占页面空间，后面没有脱离文档流的元素会上前补位）
2. 浮动元素，会停靠在父元素的最左边/最右边，或者停靠其他已浮动元素的边缘上
3. 父元素横向放不下所有的已浮动元素，最后显示不下的部分，会自动换行
4. 浮动用于解决块级元素横向显示的问题
浮动引发的特殊情况
1. 浮动元素有占位问题
  当父元素显示不下所有浮动元素时，显示不下的元素会自动换行。但是，已浮动元素，会根据自己的浮动方向发生占位。不让换行的元素占据自己的位置。
2. 元素一旦浮动，如果此元素没有设置宽度，浮动元素的宽度靠内容撑开
3. 元素一旦浮动，都会变为块级元素（设置尺寸有效，上下外边距有效）
4. 文本，行内，行内块元素，table，是不会被浮动元素压在下面，而是避开浮动元素显示
5. ps:元素脱离文档，会发生4件事
  1. 元素不占页面空间
  2. 后续未脱离文档流的元素上前补位
  3. 如果脱离文档流的元素未设置宽度，宽度靠内容撑开
  4. 元素一旦脱离文档流，会自动变成块级元素
清除浮动–清除浮动元素带来的影响
浮动元素，会给后面不脱离文档流的元素带来影响，后续元素会上前补位
clear:
取值：
left;：清除左浮动带来的影响
right;：清除右浮动带来的影响
both;：左浮动和右浮动，都清除
none;；不清除，默认值
高度坍塌—浮动会遇到的问题（面试经常问）
发生高度坍塌的原因：
父元素没有设置高度，靠子元素撑开高度，但是所有子元素都浮动，父元素在文档流中失去了所有儿子，就认为自己没有高了
解决方案：
1. 给父元素设置高度，可行！！但是很多时候，不知道整体是多少！！！
2. 父元素也浮动，弊端，会影响父元素之后的其他元素结构
3. 给父元素设置overflow：hidden/auto;弊端，父元素想溢出显示，就不行了，不推荐！！
4. 给父元素添加一个不设置高不设置宽的空块级元素，当做小儿子。这个小儿子，设置clear:both;