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