随笔分类 -  css

堆叠上下文z-index
摘要：堆叠上下文（stack context） 它是一块区域，这个区域由每个元素创建，规定了在区域中的内容在Z轴上的先后顺序； 创建堆叠上下文 根元素（html元素） 设置了Z-index 且为数值，非auto的定位元素 同一堆叠上下文中元素在Z轴的排列 从后到前的顺序 创建堆叠上下文的元素的背景和边框 阅读全文
posted @ 2020-03-15 19:38 古月大叔 阅读(130) 评论(0) 推荐(0)
深入理解字体：参考线、line-box（行框）、content-area
摘要：参考线： font-size、line-height、font-family、vertical-align 文字-字体： 文字是由软件制作的，比如font-forge，每种字体的参考线都不一样 字体参考线： font-size： 我们设置的字体大小，设置的是相对大小，并不是实际大小， 文字默认的相对 阅读全文
posted @ 2020-03-15 18:54 古月大叔 阅读(1513) 评论(0) 推荐(0)
CSS进阶知识：（@规则 ，，BFC，，布局）、body背景、行高、行盒对齐
摘要：行盒里面的文字会避开浮动元素，，浏览器会默认加上 span元素包裹（所以文字会避开float元素） @规则 at-rule @规则、@语句、css指令、css语句 1 import @import “./../xxx.css” 作用 引入另一个CSS 2 charset @charset “utf- 阅读全文
posted @ 2020-03-08 17:34 古月大叔 阅读(335) 评论(0) 推荐(0)
object/embed 元素
摘要：object： 用法： <object data="./../xxx.swf" type="application/x-shockwave-flash"> <param name="quality" value="high"></param> </object> embed： 用法： <embed 阅读全文
posted @ 2020-03-07 18:16 古月大叔 阅读(216) 评论(0) 推荐(0)
object-fit，object-position 和 background-size 和 background-position
摘要：object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。 object-position ： 属性来切换被替换元素的内容对象在元素框内的对齐方式。 object取值： fill 默认值 被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比 阅读全文
posted @ 2020-02-22 21:14 古月大叔 阅读(375) 评论(0) 推荐(0)
css概念--可替换元素和不可替换元素
摘要：可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。 也就是说，css可以影响元素但是不能影响其内容的显示。 可替换元素 ： 典型可替换元素 <iframe> <video> <embed> <img> 有些 阅读全文
posted @ 2020-02-22 20:51 古月大叔 阅读(528) 评论(0) 推荐(0)
backdrop-filter 和 filter
摘要：backdrop filter 和 filter backdrop filter 可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。 blur()使得出现毛玻璃效果，只会模糊背景， filter blur()使 阅读全文
posted @ 2020-02-21 23:07 古月大叔 阅读(2293) 评论(0) 推荐(2)
包含块的规则，
摘要：1、width、padding、margin百分比取值为父元素（包含块）的width值， 2、当父元素高度auto，子元素设置为50%时，子元素的百分比无效无效 3、height：auto为0，width：auto 默认沾满一行 4、相邻元素：margin的合并，常规流的外边距将会合并，取最大的值， 阅读全文
posted @ 2019-12-17 22:08 古月大叔 阅读(182) 评论(0) 推荐(0)
css样式重叠、css样式继承、css 属性计算，，a元素下的文字颜色不能继承
摘要：1、属性的重叠 在渲染前浏览器将判断使用哪个样式 我们书写的样式会覆盖浏览器的自带样式 我们写的样式进行权重比较，规则如下 ！import Infiniti无穷大 进制伪256行内样式 1000.id 100类选择器|伪类选择器|属性选择器 10元素选择器|伪元素选择器 1*通配符选择器 0多个选择 阅读全文
posted @ 2019-12-15 20:03 古月大叔 阅读(486) 评论(0) 推荐(0)
line-height 行高的使用
摘要：line-height:normal; 默认 字体 line-height:1.5; line-height:200%; line-height:50px; ps : 固定的值 line-height:5em;. 不同浏览器的字体行高不一样（ps : 行高 = font-size 的值 * 属性值 阅读全文
posted @ 2019-11-09 21:41 古月大叔 阅读(388) 评论(0) 推荐(0)
三栏布局的实现圣杯模式，，margin-left = -100%的理解，浮动盒子的放置规则
摘要：当不需要main必须在前面时，可以采用简单写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal 阅读全文
posted @ 2019-10-26 22:33 古月大叔 阅读(1631) 评论(0) 推荐(0)
css flex 使用
摘要：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 阅读全文
posted @ 2019-10-19 22:22 古月大叔 阅读(132) 评论(0) 推荐(0)
三角形的实现和盒模型、层模型、浮动模型、定位、权重、margin问题
摘要：相邻的border会平分所占的区域，出现一个斜线， .my_triangle{ width: 10px; height: 10px; background-color: blue; border-width: 100px ; border-style: solid; border-left-colo 阅读全文
posted @ 2019-09-13 16:23 古月大叔 阅读(331) 评论(0) 推荐(0)
实现div里面有placeholder形式
摘要：样式中设置content为元素的data-值 p{ color: deepskyblue; } p:before{ content: attr(data-beforeContent); color: darkred; } 然后js修改 $('p').on('click',function(){ $( 阅读全文
posted @ 2019-09-04 14:42 古月大叔 阅读(1044) 评论(0) 推荐(0)