随笔分类 -  css

上一页 1 2 3 4 5 6 下一页

602 自定义博客园css样式
摘要：/* 2021 8 18*/ * { font-size: 16px!important; line-height: 1.6!important; } /* 调整宽度开始 */ body { background-size: 108%; background-position: -66px 0; / 阅读全文

posted @ 2021-02-10 21:47 冲啊！ 阅读(271) 评论(0) 推荐(0)

544 BFC的原理和功能
摘要：其实BFC是上⾯三种布局⽅式中的普通流，BFC会产⽣⼀个独⽴的容器，该容器内部的元素不会在布局上影响到外部的元素，在外部的普通流看来它和其他普通流元素⽆差别，⽂档最终会按照上⾯说的普通流计算布局。 <!DOCTYPE html> <html lang="en"> <head> <meta chars 阅读全文

posted @ 2020-10-08 12:11 冲啊！ 阅读(112) 评论(0) 推荐(0)

543 CSS布局模型：流动模型(Flow），浮动模型(Float），层模型(Layer）
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>流动模型(Flow 阅读全文

posted @ 2020-10-08 10:02 冲啊！ 阅读(421) 评论(0) 推荐(0)

542 vw弹性适配
摘要：vw : 1vw 等于视⼝宽度的1% vh : 1vh 等于视⼝⾼度的1% vmin : 选取 vw 和 vh 中最⼩的那个 vmax : 选取 vw 和 vh 中最⼤的那个 视⼝单位区别于%单位，视⼝单位是依赖于视⼝的尺⼨，根据视⼝尺⼨的百分⽐来定义的；⽽%单位则是依赖于元素的祖先元素。 <!DO 阅读全文

posted @ 2020-10-07 20:52 冲啊！ 阅读(159) 评论(0) 推荐(0)

541 固定定位不总是相对于浏览器视窗（viewport）进行定位
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>固定定位（posi 阅读全文

posted @ 2020-10-07 17:45 冲啊！ 阅读(336) 评论(0) 推荐(0)

540 CSS3属性对层叠上下文的影响
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS3属性对层叠 阅读全文

posted @ 2020-10-07 17:27 冲啊！ 阅读(111) 评论(0) 推荐(0)

539 层叠上下文的创建（层叠上下⽂形成条件）
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>层叠上下文的创建- 阅读全文

posted @ 2020-10-07 17:09 冲啊！ 阅读(214) 评论(0) 推荐(0)

538 不同堆叠上下文元素排列顺序
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>不同堆叠上下文元素 阅读全文

posted @ 2020-10-07 16:49 冲啊！ 阅读(146) 评论(0) 推荐(0)

537 同一个堆叠上下文元素排列顺序
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>同一个堆叠上下文元 阅读全文

posted @ 2020-10-07 16:42 冲啊！ 阅读(139) 评论(0) 推荐(0)

536 层叠顺序
摘要：https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-orderz-index/ <!-- 我的demo --> <!DOCTYPE html> <html lang="en"> <head> <me 阅读全文

posted @ 2020-10-07 16:30 冲啊！ 阅读(132) 评论(0) 推荐(0)

535 postition fixed和sticky
摘要：https://www.zhangxinxu.com/wordpress/2020/03/position-sticky-rules/ 我的demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=" 阅读全文

posted @ 2020-10-07 10:03 冲啊！ 阅读(163) 评论(0) 推荐(0)

534 定位常⻅值及原理
摘要：http://www.ruanyifeng.com/blog/2019/11/css-position.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= 阅读全文

posted @ 2020-10-07 09:58 冲啊！ 阅读(147) 评论(0) 推荐(0)

533 CSS3多列布局
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv 阅读全文

posted @ 2020-10-06 18:08 冲啊！ 阅读(98) 评论(0) 推荐(0)

532 全屏布局
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv 阅读全文

posted @ 2020-10-06 17:53 冲啊！ 阅读(112) 评论(0) 推荐(0)

531 等高布局：margin + padding，table + table-cell
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv 阅读全文

posted @ 2020-10-06 15:01 冲啊！ 阅读(191) 评论(0) 推荐(0)

530 等分布局：flex，float，table+table-cell
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv 阅读全文

posted @ 2020-10-06 14:10 冲啊！ 阅读(176) 评论(0) 推荐(0)

529 双飞翼布局
摘要：双飞翼布局最早是淘宝团队提出，是针对圣杯布局的优化解决方案。 主要是优化了圣杯布局中开启定位的问题。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width 阅读全文

posted @ 2020-10-06 11:52 冲啊！ 阅读(104) 评论(0) 推荐(0)

528 圣杯布局
摘要：圣杯布局是来源于该布局效果类似圣杯而得名。简单来说，就是指三行三列布局； 圣杯布局核心：主要是实现中间主体部分中的左右定宽+中间自适应的布局效果； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="v 阅读全文

posted @ 2020-10-05 21:35 冲啊！ 阅读(99) 评论(0) 推荐(0)

527 三列布局：float + margin，float + overflow，table + table-cell，flex，grid，postion，中间自适应-四种方法
摘要：三列布局一般情况下是指三列中左边两列是确定的宽度，右边一列是自动填满剩余所有空间的一种布局效果; 两列定宽,一列自适应(右边) float + margin属性实现； float + overflow属性实现； display属性的table相关值实现； 使用flex实现； 使用Grid实现； 两侧 阅读全文

posted @ 2020-10-05 20:46 冲啊！ 阅读(194) 评论(0) 推荐(0)

526 两列布局：float + margin，float + margin(fix)，float + overflow，table + table-cell，绝对定位，flex，Grid网格布局
摘要：两列布局一般情况下是指定宽与自适应布局，两列中左列是确定的宽度，右列是自动填满剩余所有空间的一种布局效果； 左列定宽, 右列自适应 float + margin属性实现； 优点：实现方式简单 缺点：自适应元素margin属性值需要与定宽元素的width属性值保持一致；定宽元素浮动与自适应元素不浮动导 阅读全文

posted @ 2020-10-05 20:28 冲啊！ 阅读(268) 评论(0) 推荐(0)

上一页 1 2 3 4 5 6 下一页

导航