随笔分类 - css
摘要：一、relative和absolute相煎关系 relative限制absolute 1、限制left/top/right/bottom定位 如果父元素有relative，只能根据父元素进行定位 2、限制z-index层级 如果relative有z-index，absolute的z-index失效
阅读全文
摘要：vertical-align除了支持很多属性都有的inherit之外，还包括其它四类属性值 1、线类 baseline,top,middle,bottom 2、文本类 text-top,text-bottom 3、上标下标类 sub,super 4、数值百分比类 20px,20% 数值和百分比 1、
阅读全文
摘要：响应式设计 .在不同设备上正常使用 .一般主要处理屏幕大小问题 .主要方法： .隐藏 ＋ 折行 ＋ 自适应空间 .rem/viewport/media query 第一个案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
阅读全文
摘要：.像文本一样排block元素 .没有清除浮动等问题 .需要处理间隙 一种方式 <style> .container{ width: 800px; height: 200px; font-size: 0; /** * 使用inline-block，就相当于是文本，文字和文字之间肯定是有间隙的 * 不可
阅读全文
摘要：float的特性一 .元素‘浮动’ .脱离文档流 .但不脱离文本流 首先看一个案例，直观的了解下float的特性 <style> .container{ background: red; width: 400px; } .p1{ background: green; float: left; wid
阅读全文
摘要：.弹性盒子 .盒子本来就是并列的 .指定宽度即可 <style> .container { width: 800px; height: 200px; display: flex; border: 1px solid black; } .flex { background: red; margin:
阅读全文
摘要：relative是相对元素本身位置进行移位，但不会改变本身位置的大小 本身的位置 本身的位置 移位后，可以看到，p5的位置还是在那，并不会自动往上走，也就是p2的位置原来所占据的位置不变的。不会因为偏移而改变布局的计算 移位后，可以看到，p5的位置还是在那，并不会自动往上走，也就是p2的位置原来所占
阅读全文
摘要：普通的表格布局 <style> .table { display: table; width: 800px; height: 200px; } .table-row { display: table-row; } .table-cell { vertical-align: middle; displ
阅读全文
摘要：1、css样式(选择器)的优先级 1）计算权重确定 2）!important优先级最高，能覆盖它就再写个!important 3) 内联样式优先级也比较高 4）后写的优先级高 <style> .hahha { color: green !important; } </style> <body> <
阅读全文
摘要：checkbox选择按钮要用我们自己的样式，看到这个的时候，很可能会以为需要checkbox才能实现，用css可能很难。其实狠简单。 <style> .checkbox input{ display: none; } .checkbox input + label { background: url
阅读全文
摘要：字重（粗体） font-weight 斜体 font-style:itatic itatic跟意大利很像，最早是来自于意大利 下划线 text-decoration 用的比较多的是text-decoration:none 指针 cursor 用的比较多的是cursor:none font-weigh
阅读全文
摘要：文字折行跟滚动相似的地方就是显示不下。 overflow-wrap(word-wrap) 通用换行控制，以前用的是word-wrap，但是跟word-break太相似了，所以在新的规范中进行了修改 －是否保留单词 word-break 针对多字节文字 －中文句子也是单词 white-space 空白
阅读全文
摘要：滚动行为和滚动条 visible 滚动条隐藏 （内容显示出来，撑出容器） hidden 滚动条隐藏 （超出容器的部分进行隐藏） scroll 滚动条显示（超出容器后，可以允许用户进行滚动） auto 滚动条自动显示（也是超出容器后，可以进行滚动，scroll是滚动条始终存在，auto是需要滚动的时候
阅读全文
摘要：一、为何border-width不支持百分比值 个人理解，border-width是根据 语义和使用场景决定的。 不会因为设备大就按比例变大的。 border-width还支持关键字：thin 1px,medium(默认值) 3px,think 5px 为何border-width默认值是mediu
阅读全文
摘要：1、背景颜色 2、渐变色背景 3、多背景叠加 4、背景图片和属性（雪碧图） 5、base64和性能优化 6、多分辨率适配 1、背景颜色 1）直接用颜色名或颜色值 background: red; 2）hsl(色相，饱和度，亮度) 色相是0到360的角度。饱和度是0到100%。亮度100%是白色，0是
阅读全文
摘要：一、行高的定义 line-height(行高)：两行文字基线之间的距离 1、什么是基线？ 2、为何是基线？ 3、需要两行吗？ 1、什么是基线？ 我们上学的时候都用过，抄写英文字母的时候。其中有一条红线，这个红线就是基线，是为了写英文的时候对齐用的。 2、为何是基线？ 为什么不是底线，不是中线呢？因为
阅读全文
摘要：1、字体族 字体是一推的东西，字体族就是一堆的字体，具体可以分为5个字体族 － serif sans-serif monospace cursive fantasy serif 衬线字体，就是字体周围会一些装饰性，像衬衫一样，顶部或底部会有多出来的短线，比如宋体 sans-serif 非衬线字体，它
阅读全文
摘要：CSS ( Cascading Style Sheet 层叠样式表) 什么叫层叠呢？比如 { padding: 10px; font-size: 14px; background: red; } { font-size: 20px; background: red; } { background:
阅读全文
摘要：1、doctype的意义是什么 这个是有历史背景的，在很久以前，IE有一些自己的渲染模式，最典型的就是盒子模型，包括边距。这就造成了不兼容模式，所以他的意义 1）让浏览器以标准模式渲染 2）让浏览器知道元素的合法性 2、html,xhtml,html5的关系 1）html属于SGML 2）xhtml
阅读全文
摘要：几个著名的重置css goal https://meyerweb.com/eric/tools/css/reset/ 雅虎 https://yuilibrary.com/yui/docs/cssreset/ normalize https://necolas.github.io/normalize.
阅读全文