网站服务器无响应是怎么回事,仿抖音wordpress,营销推广策划及渠道,相册制作模板文章目录 定位固定定位小技巧#xff1a;固定在版心右侧位置元素的显示和隐藏单行文字溢出省略号显示多行文字溢出省略号显示#xff08;兼容性有问题#xff09;精灵图使用字体图标CSS三角做法界面样式解決图片底部默认空白缝隙问题Bootstrap前端开发框架资源 定位
定位 … 文章目录 定位固定定位小技巧固定在版心右侧位置元素的显示和隐藏单行文字溢出省略号显示多行文字溢出省略号显示兼容性有问题精灵图使用字体图标CSS三角做法界面样式解決图片底部默认空白缝隙问题Bootstrap前端开发框架资源 定位
定位 定位模式 边偏移定位模式position
static静态定位没有边偏移
relative相对定位移动位置的时候参照点是自己原来的位置
原来在标准流的位置继续占有后面的盒子任然以标准流的方式对待它不脱标继续保留原来的位置
absolute绝对定位如果没有祖先元素或者祖先元素没有定位则以浏览器为准定位
如果祖先元素有定位相对、绝对、固定定位则以最近一级的有定位祖先元素为参考移动位置
绝对定位不再占有原先的位置脱标
fixed固定定位元素固定于浏览器可视区的位置不随滚动条滚条不占有原先的位置
sticky粘性定位以浏览器的可视窗口为参照点移动元素并占有原先的位置必需有一个边偏移兼容性较差边偏移top|left|right|bottom子绝父相定位的叠放顺序z-index:999;只有定位点的盒子才有该属性绝对定位的盒子居中
left:50%;
margin-left:让盒子向左移动自身宽度的一半;特殊特性
行内元素添加绝对或者固定定位可以直接设置宽度和高度
块级元素添加绝对或者固定定位如果不给定宽度或者高度默认大小是内容的大小
脱标的盒子不会触发外边距塌陷问题浮动元素只会压住它下面标准流的盒子但是不会压住下面标准流盒子里面的文字、图片
绝对定位固定定位会压住下面标准流所有的内容固定定位小技巧固定在版心右侧位置
1、让固定定位的盒子走到浏览器可视区一半的位置 left:50%; 2、让固定定位的盒子再多走版心宽度一半的位置 margin-left:版心宽度的一半距离
元素的显示和隐藏
display:none|block;隐藏元素后不在占有原来的位置visibilityhidden|visible;隐藏元素后继续占有原来的位置overflow:visible|hidden|auto|scroll;溢出隐藏单行文字溢出省略号显示
/* 1、先强制一行内显示文本 */
white-space: nowrap;
/* 2、超出的部分隐藏 */
overflow: hidden;
/* 3、文字用省略号替代超出的部分 */
text-overflow: ellipsis;多行文字溢出省略号显示兼容性有问题
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;精灵图使用
background:url();
background-position:-100px -100px;字体图标
下载字体图标
https://icomoon.io/
https://www.iconfont.cn/把下载包里面的fonts文件夹放入页面根目录下字体图标引入
font-face {font-family: icomoon;src: url(fonts/icomoon.eot?w6grul);src: url(fonts/icomoon.eot?w6grul#iefix) format(embedded-opentype),url(fonts/icomoon.ttf?w6grul) format(truetype),url(fonts/icomoon.woff?w6grul) format(woff),url(fonts/icomoon.svg?w6grul#icomoon) format(svg);font-weight: normal;font-style: normal;font-display: block;
}使用
去下载文件中的demo.html复制小框框
并在其样式中使用font-family: icomoon;即可CSS三角做法
width:0;
height:0;
line-height:0;
font-size:0;
border:50px solid transparent;
border-left-color:skyblue;界面样式
鼠标样式
cursor:default|pointer小手|move移动|text文本|not-allowed禁止;取消表单的轮廓线
outline:none;防止拖拽文本域
resize:none;设置行内元素或者行内块元素垂直对齐方式
vertical-align:baseling|top|middle|bottom;解決图片底部默认空白缝隙问题
给图片添加vertical-align:top|middle|bottom;
把图片转换为块级元素display:block;Bootstrap前端开发框架
中文官网https://www.bootcss.com/
官网http://getbootstrap.com/
推荐使用https://v3.bootcss.com/资源
1.codepenhttp://codepen.io/
2.jsrunhttp://jsrun.net
3、html5trickshttp://www.html5tricks.com/
4、Enjoy CSShttp://enjoycss.com/
5、frontendrescuehttps://uptodate.frontendrescue.org/RunJShttp://runjs.cn/
CodePlayerhttp://thecodeplayer.com/
实验楼-webhttps://www.shiyanlou.com/courses/
CSS-trickshttps://css-tricks.com/
Dribbblehttps://dribbble.com/
