关于网页设计的一些细节

当对一个行内元素（ 比如说，span ）对他浮动定位时，他的值会自动变成block（也就是把行盒变成块盒）。

div::after{

// 添加一个边框

content: “”;

widows: 400px;

height: 300px;

border:5px solid rgba(255,0,0,0)

}

字体：

改变字体样式：

div{

font-family: “F68”;

}

@font-face{-

// 取名

font-family: “F68”;

// 字体文件路径

src: url("");

}

font-style:italic 字样式为斜体

文本：

text-indent:32px 首行缩进

text-decoration：line-through 删除线（贯穿线）

​ underline 下划线

​ none 去除下划线

text-shadow:0px 0px 0px rgb(0,0,0)

color:red

文本阴影

取值：

第一个值是X轴的偏移量

第二个值是Y轴的偏移量

地三个值是阴影范围

第四个值是颜色

text-align也可以控制图片的对齐方式

text-transform：capitalize 每行文本首字母大写

text-transform：uppercase 每行文本全部大写

text-transform：capitalize 每行文本全部小写

vertical-align:bottom;

行盒之间垂直方向的对齐方式

top inline 顶线

middleline 中线

baseline基线

bottomline底线

背景：

background-color	指定要使用的背景颜色	1
background-position	指定背景图像的位置	1
background-size	指定背景图片的大小	3
background-repeat	指定如何重复背景图像	1
background-origin	指定背景图像的定位区域	3
background-clip	指定背景图像的绘画区域	3
background-attachment	设置背景图像是否固定或者随着页面的其余部分滚动。	1
background-image	指定要使用的一个或多个背景图像

background-repeat：repeat-x X轴平铺

background-repeat：repeat-y Y轴平铺

固定背景图

适用场景：某个区域的隐蔽广告

background-attachment：fixed；

尺寸不能写进缩写里面。

雪碧图（sprite图，图片整合技术）操作步骤：

1.给定尺寸（雪碧图的尺寸）

2.引用图片

3.给定位置

行盒的特征：

1.行盒可被折断，因为内容可被折断换行。

​ 断词规则：

​ 默认情况：

​ 英文按单词

​ 中文按汉字

​ break-all：

​ 英文按照字母

​ 中文按照汉字

2.空白折叠规则仅限于行盒内部和行盒之间：

​ html多个回车或者多个空格都会折叠成一个空格

3.可使用水平方向上的margin和padding设置内容之间的距离（垂直方向上会展示，但且不占用实际尺寸）

4.尺寸：

1.可替换元素：图片和多媒体

​ 盒模型中各个部分与块盒一致

​ 音频，视频，图片 只给宽或者只给高的时候，另一个会等比例缩放。

​ 对于图片和视频，如果同时设置宽高，可通过object-fit属性设置适应方式。

​ object-fit属性取值：

​ object-fit属性：contain 等比例缩放（设置的宽和高不一样时，按照最小的那个值进行缩放）

​ object-fit属性：cover 按比例缩放，超出的部分直接隐藏

2.非可替换元素：文字

播放视频：

​

换行用 display:block

一行显示用 display:inline-block

display：inline-block (span span span )