一、今天学习内容
css
1、定位(position)
(1)静态定位(2)相对定位(3)绝对定位(4)固定定位
①静态定位(static了解)
静态定位是元素的默认定位方式,无定位的意思。
语法: 选择器 {
position:static;
}
②相对定位(relative)
概念:相对定位是元素在移动时,是相对于它原来位置来说的。
语法:选择器{
position:relative;
}
特点:它是相对于自身原来的位置移动的;继续保留原来的位置,不脱标,后天的盒子仍以标准流的方式对待它。
③绝对定位(absolute)
概念:绝对定位是元素在移动时候,相对于它祖先元素来说的。
语法:选择器{
position:absolute;
}
特点:①如果没有祖先元素或者祖先元素没有定位,则以浏览器(Document)为准定位。
②如果祖先元素有定位的话,则以最近一个有定位的祖先为准定位。
③绝对定位不再占有原来的位置,投标。
④固定定位(fixed)
固定定位是元素固定在浏览器的可视区域的位置。主要使用场景,可以在浏览器页面滚动式原宿位置不会改变。
语法:选择器:{
position:fixed;
}
2、PS切图的基本操作。
PS切分为:①切片切图
使用左上角切片工具选取要剪切的部分,文件→导出→3.存储为web所有格式
②图层切图
在右边图层区域点击需要的内容,导出即可。
③PS插件切图
使用culterman切片插件使用
3、精灵图的作用,如何使用精灵图?
目的:使用精灵图目的是为了减轻浏览器对服务器加载访问次数,减轻服务器压力,提高网络性能。
使用方法:使用PS切图工具,打开精灵图,默认左上角(0,0)坐标对齐,需要哪个图片,先测量出图片本身大小,然后测量出
小图片左上角距离精灵图左上角的x,y轴距离,css里面设置background背景图片,方位为-xpx,-ypx。
4、字体图标的使用与引入?
字体图标本身是一种文字,轻量级的,
网站:字库;5星级推荐 阿里
5、字体图标与精灵图使用场景?
字体图标本身是一个文字,所以比较小,精灵图再小也是一个图片,比文字要大得多,而且对于后期维护很方便,对于结构简单的图标来说很方便,
精灵图适用于结构和央视复杂的小图片
6、元素的显示与隐藏
①display显示隐藏(重要)
语法:选择器 {
display:none;(隐藏)
display:block;(显示)
}
②visibility显示隐藏
语法: 选择器 {
visibility:visible;(系统默认可见性)
visibility: hidden;(元素隐藏)
}
③overflow溢出隐藏
一般用于文字溢出了,把多余出来的隐藏掉
语法:选择器 {
overflow:hidden;
}
④display与visibility的区别是?
display隐藏元素后,脱标,不占用原来的位置。
visibility隐藏元素后,让继续占用原来的位置。
7、单行文字与多行文字超出如何用省略号“...”表示的方法?
(1)单行文字超出‘...’代替,
语法,
①white-space:nowarp;//先强制一行显示文本
②overflow:hidden;//超出部分隐藏
③text-overflow:ellipsis;
(2)多行文本超出隐藏
①overflow:hidden;//超出部分隐藏
②text-overflow:ellipsis//超出部分‘...'代替
③display:-webkit-box;//弹性伸缩盒模型显示
④-webkit-line-clamp : 2;//限制在一个块元素显示的文本的行数
⑤-webkit-box-orient : vertical;//设置或者检索伸缩盒对象的元素的排列方式
二、今天遇到的问题
今天碰到的问题还挺多,有四五个月没有写代码了,好多东西都忘了,写代码也非常慢,思路不清晰;
课堂上听课都可以听的懂,等到自己亲自操作,就差点意思,所以就是需要多练习,
三、问题解决方案
1、怎么样解决?
回去多加练习。熟能生巧