随笔分类 - CSS
摘要：clip 属性定义了元素的哪一部分是可见的。clip 属性只适用于 position:absolute 的元素。 <top> 和 <bottom> 指定相对于盒子上边框边界 的偏移，<right> 和 <left> 指定了相对于盒子左边框边界 的偏移。<top>， <right>， <bottom>
阅读全文
摘要：使用雪碧图的目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多很多的小图标，浏览器在显示页面的时候，就需要像服务器发送很多次访问请求， 这样一来，一是造成资源浪费，二是会导致访问速度变慢。这时候，把很多小图片（需要使用的小图标）放在一张图片上，按照一定的距离隔开，就解决了
阅读全文
摘要：原理 css盒模型 一个盒子包括: margin+border+padding+content– 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等.– 调整宽度大小可以调节三角形形状. 示例1 一般情况下, 我们设置盒子的宽高度,
阅读全文
摘要：结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。 示例演示 通过“:first-child”选择器定位列表中的第一个列表项，并将序列号颜色变为红色。 HTML代
阅读全文
摘要：一，js换肤的基本原理 基本原理很简单，就是使用 JS 切换对应的 CSS 样式表文件。例如导航网站 Hao123 的右上方就有网页换肤功能。除了切换 CSS 样式表文件之外，通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤，这样下次用户访问的时候，就可以自动使用上次用户配置的选项
阅读全文
摘要：】把元素的position属性设定为relative、absolute或fixed后，继而可以使用TRBL属性，相对于另一个元素移动该元素的位置。这里的“另一个元素”，就是该元素的定位上下文。 绝对定位元素的默认上下文是body。然而绝对定位元素的任何祖先元素都可以成为它的定位上下文，只要把相应的祖
阅读全文
摘要：css中的::after和::before已经被大量地使用在我们日常开发中了，使用他们可以使我们的文档结构更加简洁。 但是很多人对::after和::before仍不是特别了解，究竟他们是做什么的？如何使用他们？什么时候应该使用他们？笔者总结了一些对伪元素的理解和使用经验。 一、概念： 1.定义 从
阅读全文
摘要：1. flex设置元素垂直居中对齐 在之前的一篇文章中记载过如何垂直居中对齐，方法有很多，但是在学习了flex布局之后，垂直居中更加容易实现 HTML代码： CSS代码： 2. 用flex布局制作导航栏 以前在写导航栏的时候，总是用float或者display：inline-block实现，但是这两
阅读全文
摘要：先看上面的代码，解释一下意思，看你能认识多少（后面有注释）： 1，什么是主轴，什么是交叉轴？ 下面就给你解释一下上面的问题，咱们先看图： 1，水平主轴就是图中的（main axis）线标出的 2，垂直交叉轴就是（cross axis）线标出的 那其他的又是什么？ 看下面的全部解释： 容器默认存在两根
阅读全文
摘要：word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。 它们的区别就在于：1，word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulatio
阅读全文
摘要：如果要防止内容把div容器或者表格撑大，可以在CSS中设置一、overflow: hidden; 表示如果内容超出容器大小，就把超出部分隐藏(相当于切掉)二、overflow: scroll; 这个表示给内容加上控制滑块，可以在容器内部拖动它查看，而不把容器撑大(相当于窗体上的控制滑块) 当一个元素
阅读全文
摘要：css的box-shadow是用来添加边框阴影效果的。 属性值详解： 1、inset可选值，默认阴影在盒子外使用inset后，阴影在盒子内，即使指定边框或者透明边框，阴影依然存在。 2、<offset-x> <offset-y>这是头两个<length> 值，用来设置阴影偏移量。offset-x为设
阅读全文
摘要：下面开始代码： 开发基本的菜单结构 解决第2、3个问题 解决延迟引入的新问题
阅读全文
摘要：这里介绍几种三栏布局的实现方式，最终目的都是左右两边固定宽度，中间的自适应。 最终效果如下： 6、绝对定位三栏布局 优点： 简单。 缺点： 完美！
阅读全文
摘要：之前我一直认为margin属性是一个非常简单的属性，但是最近做项目时遇到了一些问题，才发现margin属性还是有一些“坑”的，下面我会介绍margin的基本知识以及那些“坑”。这篇博文主要分为以下几个部分： margin--基础知识 margin--在同级元素（非父子关系）之间应用 margin--
阅读全文
摘要：css中的border-collapse属性如何设置表格边框线？本篇文章就给大家介绍css中的border-collapse属性是什么？ border-collapse属性设置表格边框线的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。 首先我们来了解一下css border-
阅读全文
摘要：理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性，其中，最常见的有： none block inline inline-block inherit 下面，我将按照顺序将上述几种属性做一个完整的讲解。 第一部分：display:none none这个值表示
阅读全文
摘要：说明 这次实现的雪花飘落的效果很简单，主要是为了练习练习JavaScript中的定时器，setTimeout 和 setInterval。 效果图 解释setTimeout() setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消
阅读全文
摘要：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘： 再请看下图，当框 1 向左浮动时，它脱离
阅读全文
摘要：一、本特效主要用到的前端知识点 CSS中绝对定位（absolute）CSS实现垂直居中jQuery中简单的淡入淡出动画效果（fadeIn，fadeOut）定时器（setInterval，clearInterval）jQuery中增删类（addClass，removeClass） 二、特效分析 网页开
阅读全文
