随笔分类 -  css

display: flex实现元素居中
摘要：width: 100%; height: 100%; display: flex; flex-direction: row;/*这里可以不写，flex布局默认方向横向即row*/ justify-content: center; align-items: center; 阅读全文
posted @ 2022-04-08 15:50 yuan9580 阅读(167) 评论(0) 推荐(0)
多个并行的DIV实现高度一致
摘要：给外层DIV 添加CSS属性： display： table； 给DIV的子元素DIV1和DIV2添加属性： display：table-cell； 阅读全文
posted @ 2021-07-03 14:51 yuan9580 阅读(168) 评论(0) 推荐(0)
使得多个div容器高度保持动态一致
摘要：<!DOCTYPE html> <html> <head> <title>多个div高度保持一致</title> <style type="text/css"> #parent { color: #fff; width: 1140px; margin: 0px auto; border: 1px s 阅读全文
posted @ 2021-07-03 14:50 yuan9580 阅读(189) 评论(0) 推荐(0)
鼠标移到图片上图片放大【css3实例】
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ width: 200px; height: 138px; border: #000 solid 1p 阅读全文
posted @ 2020-09-26 09:33 yuan9580 阅读(130) 评论(0) 推荐(0)
代替hover效果
摘要：<style>.jjfatxt { position: absolute; width: 100%; height: 100%; background: transparent; left: 0; top: 0; transform: translateY(101%) } .xtjjfa_list 阅读全文
posted @ 2020-08-24 08:02 yuan9580 阅读(94) 评论(0) 推荐(0)
css 行内元素排列，并顶部对齐
摘要：display: inline-block;vertical-align: top; 阅读全文
posted @ 2020-01-06 11:46 yuan9580 阅读(4671) 评论(0) 推荐(1)
父级居中后，并继承子级浮动方法
摘要：width: 1200px;margin: 0 auto;overflow: auto;zoom: 1; 阅读全文
posted @ 2019-09-20 15:52 yuan9580 阅读(152) 评论(0) 推荐(0)
flex 设置换行flex-wrap
摘要：ul { width: 100%; display: flex; flex-wrap: wrap;} li { flex: 1; width: 25%; min-width: 25%; max-width: 25%; ｝ 阅读全文
posted @ 2019-09-12 17:24 yuan9580 阅读(1024) 评论(0) 推荐(0)
CSS响应式：根据分辨率加载不同CSS的几个方法
摘要：一般情况下，根据分辨率加载pc端 wap端 pad端三个css文件，示例： 只有一个css文件情况下，根据分辨率调整css样式，示例： 阅读全文
posted @ 2019-09-12 17:20 yuan9580 阅读(571) 评论(0) 推荐(0)
css3 实现控制文字固定行数，并显示省略号
摘要：多行溢出显示省略号： 单行文本溢出显示省略号： 阅读全文
posted @ 2019-06-22 17:21 yuan9580 阅读(3048) 评论(0) 推荐(1)