better-scroll实现菜单和内容联动的效果
1、基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device...
CSS实现底部tapbar栏功能
现在许多移动手机端都有底部tab栏切换的功能，最近恰巧也做到类似的功能，废话不多说，直接上代码。 先看效果图 css样式 *{ margin: 0; padding: 0; text-decoration: none; list-style: none; ...
CSS injection 知识总结
现代浏览器都已不允许在CSS中执行JavaScript了，以前的CSS注入可以利用JavaScript协议在 url() 、 expression() 中执行Javascript代码从而实现XSS。但是目前CSS注入在窃取数据方面仍然是非常有...
浅谈CSS3 box-sizing 属性 有趣的盒模型
盒模型的组成大家肯定都懂，由里向外content,padding,border,margin. 盒模型是有两种标准的，一个是标准模型，一个是IE模型。 从上面两图不难看出在标准模型中，盒模型的宽高只是内容（content...
css中间自适应布局的5种解法详解
前言 在做页面时，我们往往会碰到页面布局相关的内容，面试时也经常会被问到，那么今天我就来总结一下关于页面布局的内容。 问题：如何实现三栏布局（高度固定，左中右的结构） 假设高度已知，...
CSS ellipsis 与 padding 结合时的问题详解
CSS 实现的文本截断 考察如下代码实现文本超出自动截断的样式代码： .truncate-text-4 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -w...
css选中父元素下的第一个子元素(:first-child)
前言 最近在项目中用到 :first-child 很容易的就想到了，嗯嗯。这不就是选择第一个元素吗？ 好像很好用，平时使用中也没有遇到什么问题，理所当然的就以为它只会选中父元素下的第一个元素，对孙...
详解css盒子模型之内边距padding及简写
如上图,padding值是复合属性按照顺时针(上右下做)顺序,其中padding的内边距影响盒子大小的实际宽高 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
css如何利用负margin技术实现平均布局
我们平常会利用float布局来解决IE浏览器CSS的兼容性问题，比如淘宝，就是用float布局来实现的。 我们会在淘宝页面会看到下图这样一种布局。 这种图片均匀分布的布局我们叫平均布局，那这种布局...
CSS样式的分类介绍(基础知识)
css样式的分类 1.内部样式----内联样式 使用的是style标签 <style type="text/css"> /* 样式 */ </style> 多学一招：把页面的公共样式（不多的情况下）写在style标签中 2...