css
Hong Jet
这个作者很懒,什么都没留下…
展开
-
纯css绘制三角形图标
.carset{ display: inline-block; width: 0px; height:0px; border-style: solid; border-width: 8px; border-color: transparent transparent transparent red; } 效果如下 ![在这里插入图片描述]...原创 2019-05-06 14:47:55 · 906 阅读 · 0 评论 -
css文本溢出
单行文本溢出 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 多行文本溢出 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; 注意:单行文本溢出要设置宽度,多行文本溢出要设置宽高 ...原创 2019-05-06 15:13:15 · 338 阅读 · 0 评论 -
CSS中BFC
BFC(Block Formatting Context)格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。 形成条件: 1、浮动元素,float 除 none 以外的值; 2、定位元素,position(absolute,fixed); 3、display 为以下其中之一的值 inline-block,table-cell,table-cap...原创 2019-05-07 15:06:16 · 104 阅读 · 0 评论 -
水平垂直居中
1 2(不用算 比较好用)原创 2019-06-23 11:11:18 · 202 阅读 · 0 评论 -
双飞翼布局和圣杯布局
实现左右固定宽度 ,中间自适应的布局(中间先加载渲染), 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>css</title> </head> <style type="text/css"> *...原创 2019-06-23 11:37:33 · 35680 阅读 · 0 评论 -
清除浮动的几种方式
代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>css</title> </head> <style type="text/css"> *{ margin:0; padding: ...原创 2019-06-23 11:56:18 · 699 阅读 · 0 评论 -
头部固定 剩余高度自适应布局
头部固定、剩余高度自适应布局可以用很多方式, 比如flex 、calc() 等等,但是兼容性没那么好, 现在列举些兼容比较好的方案 方案1 代码如下 <div> <div class="top">我是头部</div> <div class="middle"> 我是主体信息 </div> </...原创 2019-06-24 14:16:57 · 991 阅读 · 0 评论 -
display: table布局
display的table和table-cell一般情况应用场景 1 顶部高度固定,剩余高度自适应 <div class="table"> <div class="top">头部</div> <div class="content"> 内容区 </div> </d...原创 2019-07-17 15:57:47 · 328 阅读 · 0 评论