目录
1_border图形
边框的形状
主要是用来给盒子增加边框的, 但是在开发中我们也可以利用边框的特性来实现一些形状
<style>
.box { //给一个div做样式
width: 100px;
height: 100px;
/* background-color: transparent; */
//制作三角形
border: 50px solid transparent; //上下边界50,则内容区域消失，只剩下边框
border-top-color: orange;
box-sizing: border-box;
/* 旋转 */
transform-origin: center 25%;
transform: rotate(180deg);
}
</style>
用CSS 做图案的推荐网站 https://css-tricks.com/the-shapes-of-css/#top-of-site
2_Web字体
2.1_font-family
- 提供一个或多个字体种类名称，浏览器会在列表中搜寻，直到找到它所运行的系统上可用的字体。
- 对于传统的web开发人员来说，字体选择是有限的
- Web-safe 字体，这种默认可选的字体并不能进行一些定制化的需求;
2.2_Web fonts
工作原理
-
可以使用非系统字体，定制更符合需求的字体
- 某些收费的字体, 我们需要获取到对应的授权;
- 公司定制的字体, 需要设计人员来设计
- 免费的字体, 需要获取到对应的字体文件;
-
在CSS代码当中使用该字体(重要)
-
在部署静态资源时, 将HTML/CSS/JavaScript/Font一起部署在静态服务器中;
使用过程:
演示:
-
第一步：在字体天下网站下载一个字体
https://www.fonts.net.cn/fonts-zh-1.html
默认下载下来的是ttf文件；
-
第二步：使用字体
具体步骤:
- 新建一个字体文件夹，将字体文件放进
- 在style中通过@font-face来引入字体, 需给【字体起名】+提供该字体的文件路径
- 设置该字体的font-family: 【字体起名】
注意: @font-face 用于加载一个自定义的字体;
兼容性
-
在开发中某些浏览器可能不支持该字体, 所以为了浏览器的兼容性问题, 我们需要有对应其他格式的字体;
-
oft/ttf、woff基本兼容市面上的浏览器
-
兼容写法
-
src用于指定字体资源
url指定资源的路径
format用于帮助浏览器快速识别字体的格式;
-
在src属性写上多个url
@font-face { font-family: "why"; src: url("./fonts02/AaQingHuanYuanTi.eot"); /* IE9 */ src: url("./fonts02/AaQingHuanYuanTi.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("./fonts02/AaQingHuanYuanTi.woff") format("woff"), /* chrome、firefox */ url("./fonts02/AaQingHuanYuanTi.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */ url("./fonts02/AaQingHuanYuanTi.svg#uxfonteditor") format("svg"); /* iOS 4.1- */ font-style: normal; font-weight: 400; }
-
3_字体图标
3.1_认识
-
字体可以设计成各式各样的风格，也能设计成图标–>字体图标
-
字体图标的好处：
放大不会失真
可以任意切换颜色
用到很多个图标时，文件相对图片较小
3.2_使用
- 字体图标的使用：【需注册登录账号，但不花钱】
登录阿里icons（https://www.iconfont.cn/） 下载代码，并且拷贝到项目中
-
前提： 将字体文件和默认的css文件导入到项目中【建议开辟一个专门的字体文件夹font】
-
常见的有两种方式
【本质还是字体，还可以通过font-size/font-color设置样式】
方式一: 通过对应字体图标的Unicode来显示代码;
- 先在style中用@font-face引入
- 然后打开下载的字体图标网页，找到对应的字符实体编号，在中用标签内容中填充对应字符实体编号
方式二: 利用已经编写好的class, 直接使用即可;
-
A方案【链接】
第一步: 在style>通过link引入iconfont.css文件
第二步: 在body中用i标签，类名 与iconfont.css文件名相同
-
B方案【伪元素】
第一步：先在style中用@font-face引入，并且把 下载字体图标的CSS样式 复制进来；
**第二步：**在body中用标签，类名用 “字体图标的css”中的
4_精灵图CSS Sprite
4.1_认识
-
CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分
-
好处
- 减少网页的http请求数量，加快网页响应速度，减轻服务器压力
- 减小图片总大小
- 解决了图片命名的困扰，只需要针对一张集合的图片命名
-
Sprite图片制作（雪碧图、精灵图）
方法1：Photoshop, 设计人员提供
方法2：网站制作 https://www.toptal.com/developers/css/sprite-generator
-
总结——网页可以设置图标的方法
- img、background-img(缩写bgi)、border、svg
- 字体图标、精灵图
4.2_使用
-
原理是通过只显示图片的很小一部分来展示的
-
先把精灵图文件放在图片文件夹，然后在
5_cursor
鼠标指针在元素上的样式
常见的值
-
auto：浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式
-
default：由操作系统决定，一般就是一个小箭头
-
pointer：一只小手，鼠标指针挪动到链接上面默认就是这个样式
-
text：一条竖线，鼠标指针挪动到文本输入框上面默认就是这个样式
-
none：没有任何指针显示在元素上面
6_标准流布局
6.1_默认情况下
元素都是按照normal flow（标准流、常规流、正常流、文档流）进行排布
从左到右、从上到下按顺序摆放好；
默认情况下，互相之间不存在层叠现象
6.2_margin-padding位置调整
在标准流中，可以使用margin、padding对元素进行定位， 其中margin还可以设置负数
比较明显的缺点
设置一个元素的margin或者padding，通常会影响到标准流中其他元素的定位效果；
不便于实现元素层叠的效果
希望一个元素可以跳出标准流布局,单独对某个元素进行定位，通过position属性来进行设置;
7_元素定位
7.1_认识元素定位
- 定位允许从正常的文档流布局中取出元素，并使它们具有不同的行为
例如放在另一个元素的上面;
或者始终保持在浏览器视窗内的同一位置;
- 常用于开发中
7.2_认识position属性值
静态定位 static
- 默认值
元素按照normal flow布局
left 、right、top、bottom没有任何作用
相对定位 relative
-
元素按照标准流布局，
-
可以通过left、right、top、bottom进行定位。 定位参照对象是元素left、right、top、bottom自己原来的位置
-
left、right、top、bottom用来设置元素的具体位置【向左右上下调整，正负值方向相反】
-
相对定位的应用场景。 在不影响其他元素位置的前提下，对当前元素位置进行微调
-
案例【让一张图片随着浏览器的宽度调整居中】
简单解决：
<style>
body {
margin: 0;
padding: 0;
}
.box {
height: 489px;
background-color: #f00;
background: url(../images/mhxy.jpg) center;
/* center即可居中 */
}
</style>
<body>
<div class="box"></div>
</body>
realative解决：
<style>
body {
margin: 0;
padding: 0;
}
.box {
height: 489px;
background-color: #f00;
overflow: hidden;
}
.box img {
position: relative;
/* left: 该值是图片宽度的一半 */
left: -960px;
/* translate中的百分比是相对于自己 ，第三种解决方法*/
/* transform: translate(-50%); */
/* 向右边移动div的一半 */
margin-left: 50%;
}
</style>
<body>
<div class="box">
<img src="../images/mhxy.jpg" alt="">
</div>
</body>
固定定位 fixed
- 元素脱离标准流normal flow（脱标）
- 可以通过left、right、top、bottom进行定位
- 定位参照对象是视口（viewport），浏览器用户可见窗口大小
- 当画布滚动时，固定不动
画布 Canvas
-
用于渲染文档的区域
-
文档内容超出视口范围，通过滚动查看
视口 Viewport
-
文档的可视区域
-
从面积大小来看，画布 >= 视口
绝对定位 absolute
-
元素脱离标准流normal flow（脱标）
-
可以通过left、right、top、bottom进行定位
- 定位参照对象是最邻近的定位祖先元素
- 如果找不到这样的祖先元素，参照对象是视口
定位元素：position值为relative、absolute、fixed的元素， position值不为static的元素。
子绝父相
-
大数情况，子元素的绝对定位都是相对于父元素进行定位
-
子元素相对于父元素定位，又不让父元素脱标，解决方案【“子绝父相】
-
父元素设置position: relative （让父元素成为定位元素，而且父元素不脱离标准流）
-
子元素设置position: absolute（然后再设置Left、right…）
-
粘性定位sticky【新值】
可看做是相对定位和固定(绝对)定位的结合体;
它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点;
当达到这个阈值点时, 就会变成固定(绝对)定位;
sticky是相对于最近的滚动祖先包含滚动视口的(the nearest ancestor scroll container’s scrollport )
7.3_元素position值为absolute/fixed的特点
特点一
-
随意设置宽高
-
宽高默认由内容决定
-
不再受标准流的约束
不再严格按照从上到下、从左到右排布;
不再严格区分块级(block)、行内级(inline)，行内块级(inline-block)的很多特性都会消失
-
不再给父元素汇报宽高数据。 当父元素内部仅仅只有该元素，而该元素position值为absolute/fixed，那么父元素的空间将会消失
-
脱标元素内部默认还是按照标准流布局
特点二
-
绝对定位元素。position值为absolute或者fixed的元素 (这里的父元素：定位参照对象是最邻近的定位祖先元素)
-
对于绝对定位元素来说
-
父元素的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度
-
父元素的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度
-
-
希望绝对定位元素的宽高和父元素一样，可以给绝对定位元素设置属性
left: 0、right: 0、top: 0、bottom: 0、margin:0
- 希望绝对定位元素在父元素居中显示，可以给绝对定位元素设置属性
left: 0、right: 0、top: 0、bottom: 0、margin: auto
//另外，还得设置具体的宽高值（宽高小于定位参照对象的宽高）
7.4_绝对定位的练习案例
<style>
/* 重置代码 */
a {
text-decoration: none;
color: #333;
}
/* 公共的CSS */
.sprite_01 {
background-image: url(../images/music_sprite_01.png);
display: inline-block;
}
.sprite_02 {
background-image: url(../images/music_sprite_02.png);
display: inline-block;
}
.sprite_02_icon_music {
width: 14px;
height: 11px;
background-position: 0 -24px;
}
.sprite_02_icon_play {
width: 16px;
height: 17px;
background-position: 0 0;
}
/* 布局代码 */
.item {
width: 140px;
margin: 0 auto;
/* 居中显示 */
}
.item .top {
position: relative;
/*父元素*/
}
.item .top img {
/* 将图片下面的多出来的区域去除 ，有两种方法*/
vertical-align: top;
/* display: block; */
}
.item .top .cover {
/* 对封面链接样式做设置，让用户一点击封面区域就能跳转链接 */
position: absolute;
/* absoluete让该元素相对于 .top参考定位 ,达到上诉效果 */
top: 0;
bottom: 0;
left: 0;
right: 0;
background-image: url(../images/music_sprite_01.png);
background-position: 0 0;
}
.item .top .info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 27px;
padding-left: 10px;
line-height: 27px;
/* line-height与height数值相同可以让文字在垂直方向居中 */
font-size: 12px;
color: #ccc;
background-image: url(../images/music_sprite_01.png);
background-position: 0 -537px;
}
.item .top .info .icon-music {
position: relative;
top: 1px;
/* display: inline-block; */
/* width: 14px;
height: 11px; */
/* background-image: url(../images/music_sprite_02.png); */
/* background-position: 0 -24px; */
}
.item .top .info .count {
margin-left: 4px;
}
.item .top .info .icon-play {
position: absolute;
top: 0;
bottom: 0;
right: 10px;
margin: auto 0;
/* display: inline-block; */
/* width: 16px;
height: 17px; */
/* background-image: url(../images/music_sprite_02.png); */
/* background-position: 0 0; */
}
/* 底部的样式 */
.item .bottom {
display: block;
margin-top: 8px;
font-size: 14px;
}
.item .bottom:hover {
text-decoration: underline;
}
</style>
<body>
<div class="item">
<div class="top">
<img src="../images/music_album01.jpg" alt="音乐封面" />
<a class="cover" href="#"></a>
<div class="info">
<i class="sprite_02 sprite_02_icon_music icon-music"></i>
<span class="count">62万</span>
<i class="sprite_02 sprite_02_icon_play icon-play"></i>
</div>
</div>
<a class="bottom" href="#"> 天气好的话，把耳机分给我一半吧 </a>
<i class="sprite_02 sprite_02_icon_play"></i>
<i class="sprite_02 sprite_02_icon_music"></i>
</div>
</body>
7.5_CSS属性 z-index
z-index属性用来设置定位元素的层叠顺序（仅对定位元素有效），取值可以是正整数、负整数、0【一般默认是0】
比较原则：
（1）兄弟关系：
z-index越大，层叠在越上面；
z-index相等，写在后面的那个元素层叠在上面；
（2） 不是兄弟关系：
各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较；
而且这2个定位元素必须有设置z-index的具体数值。
155
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
