![](https://img-blog.csdnimg.cn/20201008173225305.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
css
Sparks67
这个作者很懒,什么都没留下…
展开
-
【CSS】左右定宽,中间自适应如何实现
要求:左右100px宽,中间自适应flex外层元素用 display: flex;自适应区 flex: 1;两边给固定宽度即可。grid外层元素用:display: grid;grid-template: 100px / 100px 1fr 100px; // 高 / 左 中 右...原创 2019-01-22 15:11:26 · 137 阅读 · 0 评论 -
【css】使用 canvas 画一个圆、贝塞尔曲线画对话气泡
HTML<canvas id="canvas"></canvas>JavaScriptvar canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d"); // 返回一个用于在画布上绘图的环境ctx.beginPath(); // 开始一条路径ctx.arc(75, 75, 50, 0, 2 * Math.PI); ctx.stroke(); // 进行绘制arc的参数原创 2020-09-27 12:58:39 · 476 阅读 · 0 评论 -
【CSS】从外边距塌陷引出——BFC 是什么?
举个例子:父级和子级之间,给子级上边的外边距,父级会跟着子级下来<div class="dad"><div class="son"></div></div>.dad { width: 100px; height: 100px; background: red; border-top:1px solid; /* 这句不加就会塌陷 */}.son { width: 50px; height: 50px; margin原创 2020-09-18 23:47:48 · 656 阅读 · 0 评论 -
【CSS】垂直居中
MDN 简介(Mozilla Developer Network):始于2005年 网络技术开发文档的非商业网站 多国语言什么是空标签(empty element):1.标签里面不能有内容。通俗点说就是:没有儿子的标签。断子绝孙的标签。2.不可能存在子节点(例如内嵌的元素或者元素内的文本)的element3.通常在一个空标签上使用一个闭合标签是无效的。有这些:...原创 2019-02-26 19:22:04 · 91 阅读 · 0 评论 -
【CSS】两种盒模型
1.content-box(默认)2.border-box(更好)border-box更好的原因:写起来更方便(调整padding和border,不用担心超出父元素)两者的主要区别是:二者的盒子宽高是否包括元素的边框和内边距。CSS3新增了box-sizing属性来改变盒模型的类型content-box:盒子宽高 = 内容宽高(content)border-box:盒子宽高 = 内容宽高(content) + 内边距 (padding)+ 边框(border)...原创 2018-10-10 23:01:02 · 1341 阅读 · 0 评论 -
【CSS】关于CSS的布局、水平居中、垂直居中、以及其他
左右布局、左中右布局(这2个差不多。都是 横向布局)float,写法:每个li上加上float li的父元素加上clearfix类.clearfix::after{ content:''; display:block; clear:both;}flex(因为现在的浏览器几乎都支持 flex 了,所以尽量用 flex ,不用 float )在要左右布局的元素上,加上 ...原创 2019-03-03 20:28:34 · 154 阅读 · 0 评论 -
【技巧】css 多行文字如何两边对齐
html<div> <span>姓名</span> <br> <span>联系方式</span></div>css <style> div{ /* border: 1px solid red; */ font-size: 20px; } s...原创 2019-03-14 15:35:23 · 1592 阅读 · 0 评论 -
【CSS】Flex 用法,以及常用属性
Flex 布局特点与方向无关 空间自动分配、自动对齐 简单的线性布局flex container 的属性 (常用的只有4个)flex-direction 方向 flex-wrap 换行 flex-flow 上面两个的简写 (很少用这个,一般都是单独用上面两个,所以其实只有5个属性) justify-content 主轴方向对齐方式 align-items 侧轴对齐方式...原创 2019-04-10 20:12:58 · 146 阅读 · 0 评论