标签:overflow 依次 模型 色彩 文本框 概述 文档流 标签 ext
网页声明!DOCTYPE html
网页标题title
设置字符编码集格式meta charset
网页头部head
行内元素
用来做细微的调整,可以和其他行内元素共存一行
CSS 样式表
CSS语法规范
元素选择器-使用元素的名称作为选择器的名称
块级元素
用来做布局,独占一行,元素前后都会换行
标题元素 hn
n - 1~6
特点:
段落元素p
块级元素与行内元素:
换行br
分割线hr
预格式化pre
实体字符
图像格式
JPEG
GIF
PNG
相对路径是从引用的网页文件本身开始构建的,如果在A网站中的a-test.html中要插入图片a-next.jpg,可以这样做:<img src="../img/a-next.jpg" />,重点是img前面的../,表示从html处于的include开始起步,输入一个../表示回到上面一级父文件夹下,然后再接着img/表示又从父级文件夹下的img文件开始了,最后定位img下面的next.jpg。
根路径是从网站的最底层开始起,一般的网站的根目录就是域名下对应的文件夹,就如D盘是一个网站,双击D盘进入到D盘看到的就是网站的根目录,这种路径的链接样式是这样的:如果在A网站中的a-test.html中要插入图片a-next.jpg,可以这样做:<img src="/img/a-next.jpg" >,以/开头表示从网站根目录算起,找到根目录下面的img文件夹下的next.jpg。
绝对路径就很好理解了,这种路径一般带有网站的域名,如果在A网站中的a-test.html中要插入图片a-next.jpg,需要这样这样写:<img src="http://www.a.com/img/a-next.jpg" >,将图片路径上带有了域名信息,再打个比方:如果在A网站中的a-test.html中要插入B网站的图片b-next.jpg,就需要这样写:<img src="http://www.b.com/img/b-next.jpg" >,这种方法适用与在不同网站之间插入外部网站的图片。
锚伪类:规定链接不同状态的显示方式
<div id="锚点名称">内容</div>
<a href="#锚点名称"></a>
<a href="页面路径#锚点名称"></a>
语法 float
取值 none/left/right
概述
清楚浮动
浮动对父元素造成的影响 - 父元素没有高度
解决办法
通用选择器 - 选择页面中所有的元素
*{
margin:0;
padding:0;
}
元素选择器 - 以标签的名称作为选择器 - 选中页面中所有该元素标签名称{样式规则}
ID选择器 - 选择页面中ID为 xx 的元素
类选择器 - 选择页面中clss为 xx的元素
在元素的开始标签中 定义clss属性并设置对应的class值
.class名称{样式规则}
多类选择器 - 让一个元素同时使用多个定义好的样式
<div class="a1 a2 z3"></div>
分类选择器 - 对页面中的元素做细分控制
群组选择器 - 让页面中的多个元素同时使用相同的样式
后代选择器
子代选择器
将元素的内容从普通流中完全溢出,不占据空间(脱离文档流)
使用偏移属性来固定该元素的位置
相对于最近的已定位祖先元素
如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块,比如body元素
绝对定位一般用于实现页面下拉选项框
语法 定义 - dl 定义术语 - dt 定义内容 - dd
<dl>
<dt></dt>
<dd></dd> - 多个dd
</dl>
使用场合
相对定位 position:relative;
绝对定位 position:absolute;
固定定位 position:fixed;
偏移属性
平移
transform:translate(x方向平移,y方向平移);
单方向平移 translateX
、translateY
(平移量);
注意:y的正方向向下
缩放
transform:scale(默认值1);
当取值为0~1时,缩小
当取值>1时,放大
旋转
transform:rotate(n deg);
当取值为正时,顺时针旋转
当取值为负时,逆时针旋转
倾斜
联合使用
声明动画
@keyframes 动画名称{
0%{动画开始时的样式}
50%{动画运行到一半时的样式}
100%{动画结束时的样式}
}
调用动画
animation: 动画名称 动画时间 动画速度函数 动画延迟 动画播放次数;
无限次循环播放:infinite
速度函数 - 匀速的:linear
背景颜色 background-color: 合法颜色值;
背景图像 background-image:url(“图像资源的路径”);
背景重复 background-repeat: none/repeat-x/repeat-y/no-repeat;
背景尺寸 background-size: 宽度 高度;- px/%
背景图像定位 background-position: x方向偏移量 y方向偏移量;
x取值为正 - 向右偏移
x取值为负 - 向左偏移
y取值为正 - 向下偏移
y取值为负 - 向上偏移
配合精灵图(图像拼合技术)使用
标签:overflow 依次 模型 色彩 文本框 概述 文档流 标签 ext
原文地址:https://www.cnblogs.com/tltr/p/13368527.html