随笔分类 - css
摘要：before 和 :after 这两个伪元素,是以子元素存在的，属于行内元素，定义在元素主题内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。 前面的元素是伪元素的父亲，before在父元素内容的前面创建元素，after在父元素的后面插入元素 必须有content属性 应用：字体图标、遮
阅读全文
摘要：概念 响应式网站设计（Responsive Web design）是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。 原理 基本原理是通过媒体查询（@media）查询检测不同的设备屏幕尺寸做处理。 兼容 页面头部必须有meta声明的viewport。
阅读全文
摘要：绝对定位+transform 父亲给一个高度，position：relative；子盒子position：absolute，top：50%；left：50%；transform：translate（-50%，-50%） 绝对定位+margin:auto 父容器给一个高度，position：relat
阅读全文
摘要：首先判断display属性是否为none，如果为none，则position和float属性的值不影响元素最后的表现。 然后判断position的值是否为absolute或者fixed，如果是，则float属性失效，并且display的值应该被设置为table或者block，具体转换需要看初始转换值
阅读全文
摘要：属性 static 默认值，没有定位，元素出现在正常的文档流中，会忽略 top, bottom, left, right 或者 z-index 声明，块级元素从上往下纵向排布，⾏级元素从左向右排列。 relative 生成相对定位的元素，相对于其原来的位置进行定位。元素的位置通过left、top、r
阅读全文
摘要：margin重叠问题 个块级元素的上外边距和下外边距可能会合并（折叠）为一个外边距，其大小会取其中外边距值大的那个，这种行为就是外边距折叠。需要注意的是，浮动的元素和绝对定位这种脱离文 档流的元素的外边距不会折叠。重叠只会出现在垂直方向。只有块级元素会触发外边距塌陷的问题 计算原则 如果两者都是正数
阅读全文
摘要：BFC理解 Box: Box 是 CSS 布局的对象和基本单位，⼀个⻚⾯是由很多个 Box 组成的，这个Box就是我们所说的盒模型。 Formatting context：块级上下⽂格式化，它是⻚⾯中的⼀块渲染区域，并且有⼀套渲染规则，它决定了其⼦元素将如何定位，以及和其他元素的关系和相互作⽤。 块
阅读全文
摘要：浮动：float 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。 语法 左浮动：float：left; 右浮动：float:right; 浮动特性 浮动的元素会脱离标准流（脱标）【不再保留原来的位置】 浮动元素一行内显示（不会有缝隙，若一行装不下，另起一行），并且顶部对齐 浮动盒
阅读全文
摘要：加载性能 css压缩：将写好的css进行打包压缩，可以减小文件体积。 css单一样式：当需要下边距和左边距的时候，很多时候会选择使用 margin:top 0 bottom 0；但margin-bottom:bottom;margin-left:left;执行效率会更高。 减少使用@import，建
阅读全文
摘要：line-height的概念： line-height 指一行文本的高度，包含了字间距，上间距、下间距，实际上文本行基线间的垂直距离； 如果一个标签没有定义 height 属性，那么其最终表现的高度由 line-height 决定； 一个容器没有设置高度，那么撑开容器高度的是 line-height
阅读全文
摘要：新增选择器 属性选择器 结构伪类选择器 伪元素选择器 2D转换：transform 位移：transform：translate（100px，100px） 缩放：transform：scale（1，1） 旋转：transform：rotate（45deg） 3D转换：transform 位移：tra
阅读全文
摘要：在写页面的时候，会需要将<li>这个块状元素横排显示，此时就需要将display属性设置为inline-block，此时问题出现了，在两个<li>元素之间会出现大约8px左右的空白间隙，下面举例说明： <html> <head> <title>demo</title> <style type="te
阅读全文
摘要：盒模型分为两种，一种是IE盒模型，一种是W3C盒模型。 IE盒模型用于IE6一下版本的浏览器，它的content的宽度是包括了padding和border的 W3C盒模型：content的宽度不包括padding和border 此外两种盒模型都包括margin（外边距），在元素外创建额外的空白，空白
阅读全文
摘要：两者都是外部引用CSS的方式，它们的区别如下： link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。 link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。 link是XHTML标签，无兼容问题；@i
阅读全文
摘要：这两个属性都是让元素隐藏，不可见。两者区别如下： 在渲染树中 display:none会让元素完全从渲染树中消失，渲染时不会占据任何空间； visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见。 是否是继承属性 display:none是非继承属性
阅读全文
摘要：display：none 渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置 visibility：hidden 元素在页面中仍占据空间 opacity: 0 将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间 position: absolute 通过使用绝对定位将元素
阅读全文
摘要：none：元素不显示，并且会从文档流中移除。 block：元素显示/块类型。默认宽度为父元素宽度，可设置宽高，换行显示。 inline：行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。 inline-block：行内块元素类型。默认宽度为内容宽度，可以设置宽高，同行显示（有间隙）。 lis
阅读全文
摘要：不可继承属性 display：元素的显示模式（块级、行内元素、行内块） 文本属性 vertical-align：垂直对齐方式 text-decoration：规定添加到文本的装饰（underline-line、line-through、overline） text-shadow：文本阴影效果 whi
阅读全文
摘要：选择器 基础选择器 通配符选择器 标签选择器/元素选择器 类选择器 id选择器 复合选择器 后代选择器 子代选择器 并集选择器 伪类选择器 新增选择器 属性选择器 结构伪类选择器 伪元素选择器 优先级 0：通配符选择器（继承） 1：标签选择器、伪元素选择器 10：类选择器、属性选择器、结构伪类选择器
阅读全文
