css小技巧
文章平均质量分 66
峨M峰
这个作者很懒,什么都没留下…
展开
-
flex实现Sticky Footer布局
flex实现Sticky Footer布局<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } .container { min-height: 100vh; display: flex; fl原创 2022-01-10 22:50:36 · 372 阅读 · 0 评论 -
css中background常用属性详解
background常用属性详解background-color为元素设置背景颜色值描述color_name规定颜色值为颜色名称的背景颜色(比如 red)。hex_number规定颜色值为十六进制值的背景颜色(比如 #ff0000)。rgb_number规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0))。transparent默认。背景颜色为透明。inherit规定应该从父元素继承 background-color 属性的设原创 2021-09-04 13:39:27 · 521 阅读 · 0 评论 -
深挖BFC(BFC是什么?怎么触发?如何解决常见问题?)
深挖BFC(BFC是什么?怎么触发?如何解决常见问题?)1.BFC是什么BFC(Block Formatting Context )块级格式化上下文。可以把BFC看成一个被隔离的空间,BFC的子元素不会对外面的元素产生影响。2.BFC触发条件float:left|right;overflow: auto (常用)| scroll | hiddendisplay: inline-block | table-caption | table-cell |flex |gridpositio: a原创 2021-08-27 00:12:14 · 95 阅读 · 0 评论 -
css实现二级菜单
css实现二级菜单代码<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <style type=原创 2021-08-09 14:57:54 · 185 阅读 · 0 评论 -
纯css绘制三角形
纯css绘制三角形HTML<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <style typ原创 2021-08-09 09:59:14 · 52 阅读 · 0 评论 -
css超出部分省略(单行、多行,多种方法实现)
css超出部分省略效果(单行、多行,多种方法实现)HTML<p class="text">这是一行测试数据,这是一行测试数据,这是二行测试数据,这是一行测试数据,这是三行测试数据,这是四行测试数据</p>1.单行.text{ width: 200px; border: 1px solid #000000; white-space: nowrap; /* 控制元素不换行 */ overflow: hidden; /* p标签超出部原创 2021-08-06 23:26:55 · 833 阅读 · 0 评论 -
css实现扩大选中范围 (三种方法)
css实现扩大选中范围HTML<style type="text/css"> <!-- 大盒子样式 --> .content{ position: relative; width: 60%; height: 400px; margin: 0 auto; border: 1px solid orange; } <!-- 关闭按钮样式 --> .clo原创 2021-08-06 11:22:17 · 1425 阅读 · 0 评论