WEB前端网页设计 CSS网页代码 基础参数（三）
目录
font-size属性单位;
color：文本颜色
间距
text-decoration：文本装饰
text-align：水平对齐方式
white-space：空白符处理
text-overflow：标示对象内溢出文本
盒子模型：
高度坍塌
插入图片：图像URL">
font-size属性单位;
| 相对于当前对象内文本的字体尺寸 | em |
| 像素 | px |
| 绝对长度单位 | 说明 |
| 英寸 | in |
| 厘米 | cm |
| 毫米 | mm |
| 点 | pt |
color：文本颜色
#color：参数
| 预定义的颜色值 | red，green，blue等 |
| 十六进制 | #FF0000,#FF6600,#29D794等 |
| RGB代码 | 表示纯红（255，0，0），纯绿（0，255，0），纯蓝（0，0，255） |
| RGB（以逗号为间隔） | 白色（255，255，255），黑色（0.0.0） |
间距
| letter-spacing：字间距 | #letter-spacing：30px； |
| word-spacing：单词间距 | 以像素为大小 |
| line-height：行间距 | 以像素为大小 |
text-decoration：文本装饰
| 正常文本默认值 | none |
| 下划线 | underline |
| 上划线 | overline |
text-align：水平对齐方式
| 左对齐 | left（默认值） |
| 右对齐 | right |
| 居中对齐 | center |
text-indent：首行缩进------->> text-indent：2em；
white-space：空白符处理
使用html制作网页时，不论源代码中有多少空格，在浏览器中只会显示一个字符的空白；
| 默认值 | normal |
| 预格式化 | pre |
| 空格空行无效 | nowrap #此参数内容只在一行并超出显示区域则下方出现滚动条 |
text-overflow：标示对象内溢出文本
格式：选择器{ text-overflow：属性值 }
| 修剪溢出文本 | clip |
| 用省略号标记“…”标识被修建文本 | ellipsis |
搭配使用
———————————————————————————————————————————————
盒子模型：
“内容”-内边距-边框-外边距
每个盒子都有三个参数；以px为单位
| 容器标签 | ||
| 边框 实心边框 | border border：solid | |
| 内边距 | padding | |
| 外边距 | margin | 上右下左 |
| 边框类型(虚线、实线) | border-style | 实线：border-style：solid； |
| 边框盒子长度(厚度) | border-width | 例如：border-width：10px 20px； #表示上下盒子厚度 一个值--->全部，两个值-->上下，三个值--->右，按上右下左的顺序； border-width：10px；#若只有一个值 则表示 上下左右都是10px |
| 边框盒子颜色 | border-color | |
| 浮动 类似对齐 (多个浮动在一起则水平排列) | float： | 左浮动-> float：left ； 右浮动->float：right； |
| 清除浮动 | clear： both | 例：clear：left #表示清除此网页的左浮动 清除所有浮动 |
| 将文字设置为正中间 | height、 line-height | 设置文字的左右居中--->text-align:center; 设置行高：line-height：100px； |
高度坍塌
高度坍塌：在流式布局中十分常见。当父元素没有高度，子元素设置了float时。
原因：子元素脱离文档流，无法撑开父元素
解决方法
| 1 | 清除浮动 | #给父元素设置高度 |
| 2 | 给父元素设置overflow：hidden； | 原理是利用overflow：hidden;创建了一个新的bfc，在新的bfc里面，自动高度会计算浮动元素的高度，于是有了这种解决高度坍塌的方法 缺点：当子元素有定位属性时，设置 overflow: hidden; 容器以外的部分会被裁剪掉。 |
| 3 最 好 用 | 给父元素设置伪类元素选择器，并设置常用的清除浮动的样式，然后after就会把盒子撑开； 右侧示例如是： berfore表示在.A的内容前面添加其他内容 after 表示在.A的内容后面添加其他内容 | .A::after{ content: ""; #添加内容 display: block; #转换元素类型为块元素 clear: both; #清除两侧浮动 height：0； overflow：hidden； #内容溢出则隐藏 visibility：hidden； #隐藏属性 } |
| 4 | 给父元素添加display：table；属性 | 让父元素转化为元素类型跟表格的特性一样 弊端：会更改父元素的类型 |
| 5 |
| 边框属性 | border-style | none无、solid单实线、dashed虚实线、dotted点线、double双实线 |
| 边框粗细 | border-width | |
| 边框颜色 | border-color |