随笔分类 -  CSS

CSS相关知识和技术
实现三角形绘制
摘要：CSS绘制三角形主要用到的是border属性，也就是边框。 div { width: 0; height: 0; border: 100px solid; border-color: orange blue red green; } 将元素的长宽都设置为0，显示出来的效果是这样的： （1）三角1 d 阅读全文
posted @ 2026-02-28 15:35 Wanker 阅读(7) 评论(0) 推荐(0)
三栏布局的实现
摘要：三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，三栏布局的具体实现： <div class="outer"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div 阅读全文
posted @ 2026-02-28 15:15 Wanker 阅读(8) 评论(0) 推荐(0)
两栏布局的实现
摘要：一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应，两栏布局的具体实现： <div class="outer"> <div class="left"></div> <div class="right"></div> </div> 利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。将右边 阅读全文
posted @ 2026-02-28 15:05 Wanker 阅读(20) 评论(0) 推荐(0)
使用input对电话号码实现隐藏显示
摘要：1、首先选择利用表格来呈现html结构 <!-- html代码 --> <table border="1px solid"> <thead> <tr> <th>姓名</th> <th>电话号码</th> </tr> </thead> <tbody> <tr> <td align="center">张 阅读全文
posted @ 2024-04-30 10:10 Wanker 阅读(112) 评论(0) 推荐(0)
display:none和overflow:hidden的区别
摘要：1、display:none 当将一个元素的display属性设置为none时，该元素将不会显示在网页中，并且不会占据任何空间。也就是说，该元素会完全隐藏，其他的元素会立即占据它原来的位置。该属性适用于需要完全隐藏某个元素的场景。 // html代码:完全隐藏子元素 <div class="fath 阅读全文
posted @ 2023-10-07 16:01 Wanker 阅读(479) 评论(0) 推荐(0)
CSS清除浮动的方法
摘要：1、浮动的概念 在CSS中，浮动（float）是一种布局技术，用于控制元素在页面中的位置。通过将元素浮动到其容器的左侧或右侧，可以使其他元素环绕它。 常见的用法： 选择器 { float: left; //左浮动 } 选择器 { float: right; //右浮动 } 2、浮动的特点 （1）浮动 阅读全文
posted @ 2023-10-07 15:32 Wanker 阅读(74) 评论(0) 推荐(0)
如何使不定宽高的div在父元素中水平垂直居中
摘要：1、flex布局 <div class="box"> <div class="mask"> <!-- 内容 --> </div> </div> /* css样式 */ .box { display: flex; justify-content: center; align-items: center 阅读全文
posted @ 2023-08-14 14:58 Wanker 阅读(34) 评论(0) 推荐(0)