随笔分类 - css
摘要：vw与百分比区别 如何让谷歌浏览器支持小字体 padding 与 margin 行内元素与块级元素的区别 如何用css绘制三角形 css加载会造成阻塞吗？ line-height和height 区别 css选择符有哪些？css哪些属性可以继承 哪些属性不可以继承？ css优先级如何计算？ 清除浮动有
阅读全文
摘要：rem是什么？ rem是一个长度单位,常用的长度单位有： * px: 绝对长度单位，最常用 * em: 相对长对单位，相对于父元素，不常用 * rem: 相对长度单位，相对于根元素，常用于响应式布局 * vw: 视口宽度， 100vw = 可视窗口的宽度 * vh: 视口高度，100vh = 可视窗
阅读全文
摘要：父元素设置ling-height;子元素继承父元素的line-height 1.ling-height:固定像素 此时p元素的line-height = 24px 2.line-height: 百分比 此时p元素的 行高是body 计算之后的。line-height = 200% * 20 = 40
阅读全文
摘要：水平居中 行内元素： * 如果父元素是块级元素，则直接给父元素设置text-align:center; * 如果父元素是不是块级元素，先将父元素设置为块级元素，再给父元素设置text-align:center; 块级元素: * 需要谁居中，给其设置 margin: 0 auto * 父元素设置相对定
阅读全文
摘要：实现麻将中三点筛子：效果如下图 具体实现代码： html代码： css 代码：
阅读全文
摘要：一、什么是 Flex 布局？ flex（Flexible Box）意为“弹性盒子”，用来为盒状模型提供最大的灵活性。 将一个容器指定为Flex布局： display：flex; 行元素也可使用flex 布局： display:inline-flex; 注：设置为flex布局以后，子元素的float、
阅读全文
摘要：圣杯布局和双飞翼布局的目的： 1.三栏布局，中间一栏最先加载和渲染（内容最重要） 2. 两侧内容固定，中间内容随着宽度自适应 3. 一般用于 PC 网页 圣杯布局实现思路： 1. 将最外层的container的padding 设置为 padding: 0 150px 0 200px; 为左右两块让出
阅读全文
摘要：* margin-top 和 margin-left 负值，自身元素向上、向左移动； * margin-right 负值，右侧元素左移，自身元素不受影响； * margin-bottom 负值，下方元素上移，自身元素不受影响；
阅读全文
摘要：css盒模型的基本概念： 包括：外边距（marign）、边框（border）、内容（content） 、内边距（padding）。 css盒模型还区分：标准盒模型 和 IE盒模型 标准盒模型和IE模型区别： IE盒模型和标准模型的区别是：宽高的计算方式不同 IE盒模型中，宽度为 左右边框的宽度 +
阅读全文
摘要：题目：上下高度固定，中间自适应。（移动端用的比较广泛） 方案一：flexbox布局 代码如下 方案二：表格布局 代码如下： 通过定位也可做到。
阅读全文
摘要：题目： 假设高度已知，左右宽度各位300px,中间自适应 方案一： 浮动解决方案 优点：浏览器兼容性比较好 缺点：需要清除浮动（脱离了文档流） 代码如下： 方案二： 绝对定位解决方案 优点：浏览器兼容性好 缺点：脱离了文档流，可使用性差 代码如下： 方案三：flexbox解决方案（优先选择的方案）
阅读全文
