随笔分类 - CSS层叠样式表（Cascading style sheets）
摘要：问题： 当两个div使用了display：inline-block样式后，会出现错位的情况： 问题分析 出现这种情况的原因是，第二个外层的div会相对于第一个 外层div 中最后渲染出来的 内层div 的顶部对齐， 所以才出现了这种错位的情况，如下所示： 解决 给每个外层div设置 vertical
阅读全文
摘要：解决办法： 在父元素中使用：font-size:0;即可以解决实例： <template> <div class="home-page"> <ul class="navigator"> <li>推荐</li> <li>课程</li> <li>实践</li> <li>职业路径</li> <li><im
阅读全文
摘要：官网：https://daneden.github.io/animate.css/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 弹性布局嵌套: 1，谨记：由外向内进行设置弹性盒子。先设置外部弹性布局，然后在设定里面的布局即可。 <!-- 圣杯布局的要求 -- 纵向分为上中下三部分，上中
阅读全文
摘要：弹性布局： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 弹性布局：以下建议使用开发者工具修改值进行查看非常直观易懂。 弹性布局属性使用顺序： 一，父元素属性设置顺序： 以下四个属性是对主轴方向上的子元素
阅读全文
摘要：.p{ display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; text-overflow: ellipsis; -webkit-line-clamp: 2; }
阅读全文
摘要：所有的超链接 a 标签 如果只有 href='' ，并且为空，点击时相当于刷新页面，所以在某个按钮使用时，谨记写成：href='javascript:;' 防止出错。 target='_blank' 表示新打开一个页面
阅读全文
摘要：既然 transform 不适用于某些内联元素，那咱们就把这些元素变成 inline-block 或 block 就行了。
阅读全文
摘要：如下图一：鼠标悬浮 显示菜单 和 菜单 之间有横线 如下图二：鼠标悬浮 显示菜单 和 菜单 之间没有横线 页面渲染的顺序层级高低，以下是由低到高： 文档流 浮动元素 定位元素。 在正常文档流中，后面的元素会覆盖前面的，浮动元素居中，定位元素层级最高，覆盖一切。 由此： 解决上面的问题，就可以设置z-
阅读全文
摘要：重绘： 使用js改变网页的背景颜色 浏览器会把整个网页的颜色重新在画一遍，导致性能降低 回流： 只要改变某个DOM对象的宽或者高，浏览器就会重新再计算网页结构，重新生成一次，导致性能严重降低。 CSS样式的性能比JS性能更高，所以能使用CSS的就不要使用JS控制。 修改样式有三种方式： 1，直接在C
阅读全文
摘要：搜狗：tubiao/icon 小图标的处理方法有三种： 一，最直接就是切图放在文件中进行读取 缺点： 1，多次HTTP请求，影响性能 2，不方便修改和维护。（每次修改都要重新修改美工修改图片大小，颜色等等） 二，使用base64，把图片转换为base64代码 本质：把小图标通过Base64转换成 B
阅读全文
摘要：perfectpixel 这是火狐的插件： 用途：加载设计图，和 已经编写好的网页进行对比，看是否完美还原。 谷歌也有类似的插件，但是无法下载。
阅读全文
摘要：一，设置PS 使用PS进行切图前的设置： 1，打开PS 打开PSD图片 点击窗口 分别把：历史记录，信息，图层，三个打勾。 历史记录：可以回到之前想要的步骤，特别是不小心把图层的文字或者图层删除了，进行恢复。 信息：可以获得框选部分的：rgb ，XY轴的起始位置，还有宽高。 图层：PSD图片，是通过
阅读全文
摘要：CSS是层叠样式表（Cascading Style Sheets）的简称，并且它是增量式，向后兼容，所以它支持CSS3以前的所有的版本，当然包括CSS2的内容，CSS3也称作级联样式表或者是层级样式表。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的， 选择器：指定特定标签的方式。
阅读全文
摘要：1，使用鼠标选中前面浅灰色缩进。 2，Ctrl+H 查找替换 点击 Find All 查找全部缩进。 3，按backspace向后删除两次，如下图所示： 4，向下按一次方向键，再向左按一次方向键，最后向后删除一次backspance 如下图所示： 5，CSS代码就整理好了！！！！这里一定记住在书写C
阅读全文
摘要：在内容中 一行内容包括三张图片，每张图片下面有标题和具体介绍，那么可以使用： 分析和解决如下步骤： 1，一行三块，先向左浮动成为一行float:left。 2，把他们的宽度平分三份，33.3%。三份都一样，所以共同属性写在comment中。 3，再调整他们的内边框，外边框等等。调整好外面一层，再写里
阅读全文
摘要：1，全部都是占满行。 2，使用百分比定义宽度，width:100%; 或者max-width:1200px; min-width:800px; 3，块级元素添加margin:0 auto; 左右自适应宽度居中。 4， height=line-height; text-align:center; 块级
阅读全文
摘要：自然顺序，盒子模型 .block:nth-child(1){ //第一个类名为.clock 的标签添加样式。 position: static; //static，会直接忽略所有的偏移量关键字，如下面的top,left,bottom,right,z-index。 top: 20px; left: 2
阅读全文
摘要：loat有四个属性，分别是： float：none； 没有浮动； float：left； 左浮动； float：right； 右浮动； float：inherit；继承父元素的浮动； 使用浮动：会脱离文档流，出现高度塌陷，浮动溢出的情况。 <style> .container{ //父元素宽高自适应
阅读全文
摘要：div{ background: red; width: 300px; height: 300px; border: 20px dashed; ///这里不设置颜色，默认颜色为背景色。即：background-color:transparent;(全透明黑色的速记法)。 } <div>背景包括边框和
阅读全文
浙公网安备 33010602011771号