随笔分类 -  css

oh 是css！
css 文本超出部分省略显示
摘要：1. 首先先简单介绍一下几个属性： （1）white-space：nowrap，目前在学习过程中只见过这个属性值，但 white-space 还有其他属性值，可以去文档参考。它表示连续的空白符会被合并，最终只显示一个空白符，同时禁止换行。 （2）text-overflow：ellipsis，表示当文 阅读全文
posted @ 2021-11-06 15:44 TwinkleG 阅读(314) 评论(0) 推荐(0)
神奇的 margin/paddding 百分比布局
摘要：1. 今天累的有点迷茫，躺在床上看着看着面试题，突然看到个好玩的，然后自己坐起来打开电脑跑了一下代码。 2. margin、padding 在使用百分比时，它的百分比值是参照父元素的 width 值，是的，margin-top/left/right/bottom 都是 以父元素宽度为参照。 而且如果 阅读全文
posted @ 2021-10-07 21:43 TwinkleG 阅读(70) 评论(0) 推荐(0)
两栏布局三种方式实现
摘要：1. 实际上类似 三栏布局，仍然是三种实现方式：浮动、定位、flex 【1】float + margin-left / BFC（overflow: hidden;） <div class="box"> <div class="left"></div> <div class="right"></div 阅读全文
posted @ 2021-10-03 20:23 TwinkleG 阅读(126) 评论(0) 推荐(0)
flex-basis 优先级问题
摘要：1. content【flex弹性盒宽度】-> width【指定弹性子元素宽度】-> flex-basis 【指定弹性子元素宽度】 优先级依次上升，不过虽然 flex-basis 优先级大于 width，但 max-width 和 min-width 可以限制 flex-basis 的宽度。 阅读全文
posted @ 2021-10-03 20:20 TwinkleG 阅读(106) 评论(0) 推荐(0)
CSS 绘制同心圆
摘要：1. 利用三个 div 盒子，以及 margin、border-radius 属性实现同心圆效果： <style> .outer { width: 150px; height: 150px; background-color: deeppink; border-radius: 50%; } .mid 阅读全文
posted @ 2021-10-03 19:37 TwinkleG 阅读(1414) 评论(0) 推荐(0)
CSS 绘制三角形
摘要：1. 两种 CSS 三角形画法 【1】选取一条底边，另外两边作为腰： .box1 { width: 0; height: 0; border-left: 40px solid blue; border-right: 60px solid mediumspringgreen; border-botto 阅读全文
posted @ 2021-10-03 19:27 TwinkleG 阅读(178) 评论(0) 推荐(0)
css animation
摘要：1. 先来实现一个简单动画效果 <body> <div>hello animation</div> </body> <style> div { animation: 2s myanimation 3 /*steps(5)*/; // 表示动画花费2s执行完，动画名称为myanimation，动画执行 阅读全文
posted @ 2021-09-11 16:16 TwinkleG 阅读(198) 评论(0) 推荐(0)
css transition
摘要：1. 先实现一个简单的过渡效果吧！ <body> <div>hover to move</div> </body> <style> div { width: 100px; height: 100px; background-color: pink; transition: background-co 阅读全文
posted @ 2021-09-11 15:58 TwinkleG 阅读(77) 评论(0) 推荐(0)
BFC块级格式化上下文
摘要：BFC: 块级格式化上下文，它是页面中一块渲染区域，在这个渲染区域里面有一套渲染规则，规定了元素的布局方式以及如何和其它元素相互作用BFC的规则：1. 同一块BFC区域内的相邻元素外边距会发生重叠【margin重叠问题，分为相邻元素重叠和父子元素外边距塌陷问题】2. BFC区域内的元素不会与BFC区 阅读全文
posted @ 2021-09-10 17:20 TwinkleG 阅读(134) 评论(0) 推荐(0)
css浮动及清除浮动
摘要：float浮动：会脱离标准流，影响：1. 不保留原位置，因此父元素不设置高度则无法被撑大2. 同级元素应该也浮动，否则布局可能会出现问题清除浮动方法：1. W3C推荐做法：在浮动元素最后添加一个块级标签，css样式设置clear: both;兼容性好，但每次都会多添加一个块级标签，影响代码结构2. 阅读全文
posted @ 2021-09-10 16:44 TwinkleG 阅读(72) 评论(0) 推荐(0)
三栏布局(两边固定，中间自适应)的三种方法
摘要：1. 使用浮动float，左右分别左浮动和右浮动，中间元素设置margin实现自适应 <div class="box"> <div class="left">左边</div> <div class="right">右边</div> <!-- center未脱标，如果标签放在中间，会把right挤到下 阅读全文
posted @ 2021-09-10 16:07 TwinkleG 阅读(477) 评论(0) 推荐(0)
css水平、垂直居中
摘要：div水平居中：1. margin: 0 auto2. 定位 position: absolute;left: 50%;transform: translateX(-50%);3. flex布局display: flex;justify-content: center;div垂直居中：1. posi 阅读全文
posted @ 2021-09-10 15:51 TwinkleG 阅读(32) 评论(0) 推荐(0)
css选择器优先级
摘要：1. !important > inline > id > class > tag > * > inherit > default 2. 权重值对比： !important 最大 inline 行内样式 1000 id选择器 100 class选择器 10 标签 1 通配符选择器 0 *** 通配符 阅读全文
posted @ 2021-09-10 15:41 TwinkleG 阅读(31) 评论(0) 推荐(0)
flex布局说明
摘要：flex布局又称作弹性盒布局，其由两部分组成，首先是弹性盒【flex-container】，其次是弹性子元素【flex-items】 注意：在webkit内核中的flex布局需要加前缀：-webkit-flex 1. flex-container常见属性： 1. flex-direction: ro 阅读全文
posted @ 2021-09-10 15:25 TwinkleG 阅读(353) 评论(0) 推荐(0)