目录
font-size属性单位;
color:文本颜色
间距
text-decoration:文本装饰
text-align:水平对齐方式
white-space:空白符处理
text-overflow:标示对象内溢出文本
盒子模型:
高度坍塌
插入图片:<img src="./图像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为单位
容器标签 | <div></div> | |
边框 实心边框 | 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 |