![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 51
小白之旅
这个作者很懒,什么都没留下…
展开
-
css实现圣杯布局的四种方式
圣杯布局如下图指的是两端宽度固定,中间自适应。在日常开发中,圣杯布局的使用频率是比较高的。本篇文章整理了几种圣杯布局的实现方式,欢迎各位大佬进行补充。HTML代码原创 2022-09-15 17:25:04 · 1903 阅读 · 0 评论 -
css实现一个正方形
vw是相对于视口的宽度。视口被均分为100单位的vw。宽度计算的,利用此特性就可以实现一个固定宽高比的div。宽高固定是最简单的情况了,只要设置对应的宽高就可以了。需要设置成0,内部就无法很好的显示子元素。确实可以实现正方形的效果,但是。padding设置为。原创 2022-09-09 15:50:15 · 4101 阅读 · 0 评论 -
css设置圆角矩形根据高度变化
实现效果:实现方式给border-radius设置一个特别大的值border-radius: 99999999rem;原创 2022-03-29 08:26:03 · 369 阅读 · 0 评论 -
canvas渐变
canvas设置渐变的两种方式:createLinearGradient(x,y,x1,y1) : 创建线条渐变createRadialGradient(x,y,r,x1,y1,r1) : 创建一个径向/圆渐变在线试一试createLinearGradient(x,y,x1,y1)x:渐变开始点的 x 坐标y:渐变开始点的 y 坐标x1:渐变结束点的 x 坐标y1:渐变结束点的 y 坐标代码如下:const c = document.getElementById("myCanvas原创 2022-01-05 09:12:03 · 3521 阅读 · 0 评论 -
CSS设置文本超出隐藏显示省略号
CSS设置文本超出隐藏显示省略号单行文本多行文本在线试一试单行文本HTML代码如下:<p class="ellipsis1" title="单行文本,超出隐藏,并且显示省略号。试一试我隐藏啦!!!!"> 单行文本,超出隐藏,并且显示省略号。试一试我隐藏啦!!!!</p>CSS代码如下:.ellipsis1 { width: 300px; white-space: nowrap; overflow: hi原创 2021-12-29 08:52:18 · 863 阅读 · 0 评论 -
CSS常用水平垂直居中的几种方法
CSS水平垂直居中一、利用margin:auto二、利用position: absolute三级目录一、利用margin:auto元素有宽度和高度时,利用margin:auto设置元素水平垂直居中:HTML代码如下:<div class="div1"> <div class="center"></div></div>CSS代码如下:.div1 { background-color: #eee; width: 200px; hei原创 2021-12-28 09:01:33 · 27791 阅读 · 0 评论 -
CSS盒模型
CSS盒模型一、什么是CSS盒模型二、盒模型分类CSS设置盒模型一、什么是CSS盒模型盒模型也叫框模型,是包围每个HTML元素的框,它包括:外边距、边框、内边距以及实际的内容。二、盒模型分类W3C 盒子模型(标准盒模型)width=content的宽height = content的高IE 盒模型(怪异盒模型)width = content + padding + borderheight = content + padding + borderCSS设置盒模型可在线看一下实原创 2021-12-25 09:44:58 · 262 阅读 · 0 评论 -
CSS概述
CSS是级联样式表,控制HTML显示效果。使用CSS的原因:HTML控件外观不优美。CSS的优点:方便自定义控件的显示效果; 多个页面和控件可以引用相同的CSS样式。CSS代码可以写在HTML里面,但还是建议写在CSS文件里,方便多次引用。原创 2017-10-25 21:58:59 · 433 阅读 · 0 评论 -
CSS语法——编辑CSS
1.内联样式表(HTML源文件)优点:简洁方便 缺点:CSS代码仅在当前页面有效<head> <style> CSS代码 </style></head>2.内联样式表(定义在标签上)优点:简洁方便,优先级高于其他两种样式表 缺点:只对当前控件有效,不能被其他控件引用<h1 style="color:red">Hi</h1>3.外联样式表(CSS文件)优点:可以被原创 2017-10-26 13:54:22 · 250 阅读 · 0 评论