html css常用样式
鼠标选中内容样式/*鼠标选中内容样式*/::selection { background:#72d0eb; color: #FFF;}禁止文字选中/*禁止文字选中*/.user-select { -webkit-user-select: none; -moz-user-select: non...
CSS布局相关及Flex详解
float及postion缺点对于两个div元素，其是相对独立的，如果在其中一个div元素中加入内容，将会使得两个元素的底部不能对齐，导致页面多出空白区域。多栏布局css3中加入了多栏布局，可以将一个元素中的内容分为两栏或者多栏显示，并且确保各栏中内容的底部对齐。<style>#div1...
css：使用filter和backdrop-filter实现高斯模糊效果
背景 今天接到一个需求是，使用高斯模糊的效果对一个页面进行模糊处理，正好借这个机会来整理一下 css3 中高斯模糊的两个 API API介绍 filter 说明： 该 API 是一个过滤器，不仅能实现高斯模糊，还有很多比如颜色偏移、饱和度、灰度等等 语法： // 使用空格分隔多个滤镜filter: ...
浏览器中CSS的BUG
对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明.其它请参考:CSS hack 针对IE6，IE7，firefox显示不同效果 1.div的垂直居中问题 vertical-align:middle; 将行...
什么是CSS？
原文链接： https://note.noxussj.top/?source=51cto什么是 CSS？CSS 指层叠样式表 (Cascading Style Sheets)，理解为 CSS 样式就可以了。CSS 样式有什么作用呢？比如我们在页面中添加了一个 div ，我想给这个 div...
CSS之垂直对齐
vertical-align:baseline 默认。元素放置在父元素的基线上。sub 垂直对齐文本的下标。super 垂直对齐文本的上标top 把元素的顶端与行中最高元素的顶端对齐text-top 把元素的顶端与父元素字体的顶端对齐middle 把此元素放置在父元素的中部。bottom 把元素的底...
【web性能】让css更简洁、高效
用了这么多年的CSS，现在才明白CSS的真正匹配原理，不知道你是否也跟我一样？看1个简单的CSS：DIV#divBox p span.red{color:red;}，按习惯我们对这个CSS 的理解是，浏览器先查找id为divBox的DIV元素，当找到后，再找其下的所有p元素，然后再查找所有span元...
css之隐藏元素
visibility: hidden;这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在opacity: 0; CSS3属性，设置0可以使一个元素完全透明position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外display: none; 元素会变...
2、前端学习笔记之——css
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS-learning-note</title> <style...
js，css学习笔记
“<!--” 是HTML 说明语句的开始，“-->”是说明语句的结束，该说明语句使不支持JavaScript的浏览器把看成说明JavaScript语句，相当于把其中的JavaScript语句看成文本，不做处理，而支持JavaScript的浏览器则忽略该说明标志，并处理其中的JavaS...
css学习笔记-动画
开始前还是推荐下：http://www.w3school.com.cn/cssref/index.asp#animation 内容去W3school看，讲的很详细。附上一段笔者的测试代码： <!DOCTYPE html><html lang="en"><head&g...
CSS3学习笔记(上)
一、初识CSS 1、CSS是什么？ CSS是CascadingStyle Sheets（级联样式表）的缩写。 2、CSS可以用来做什么？ CSS是一种样式表语言，用于为HTML文档定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。 HTML可以用于为网站添加布局效果，...
Bootstrap源码分析系列之核心CSS
本节主要介绍核心CSS，从整体架构中的7个Less文件对应的源码分别进行分析scaffolding.less这个文件编译后的css文件(886~989行)其作用就像定义全局样式。//调整css盒模型为border-box,这样修改使得添加padding不至于元素宽度超出边界* { -webkit-b...
#yyds干货盘点 react笔记之css-Module模块化
前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣核心概念/* * CSS模块 * ...
css文字链接滑过向上移动1像素
方法一：行高a{line-height:22px;}a:hover{line-height:21px;}方法二：定位a{position:absolute;top:0;}a:hover{top:-1px;}...
input标签写CSS时需要注意的几点（先收藏）
（从已经死了一次又一次终于挂掉的百度空间人工抢救出来的，发表日期2014-05-05）飞鱼的声纳顶部的搜索框让我头疼了很长时间，原因是总不能获得跨浏览器的统一样式。主要的问题有这么两个：一是input标签的高度不能统一，Firefox和IE中的高度始终不能一致；二是在IE浏览器中属性为text的in...
DIV+CSS常用网页布局技巧！
以下是我整理的DIV+CSS常用网页布局技巧，仅供学习与参考！第一种布局：左边固定宽度，右边自适应宽度HTML Markup<div id="left">Left sidebar</div> <div id="content">Main Content</...
CSS定位与层叠
position：static(静态定位) 当position属性定义为static时，可以将元素定义为静态位置，所谓静态位置就是各个元素在HTML文档流中应有的位置podisition定位问题。所以当没有定义position属性时，并不说明该元素没有自己的位置，它会遵循默认显示为静态位置，在...
html+css学习总结
HTML与css学习总结一；html概念1.html是一种描述网页的语言，并不是计算机语言这要分清楚；标记语言是运用一套标记标签描述网页的；注意点：①标签字母都要小写，标签一般都是成对出现，有开始标签与闭合标签；也有自结束标签<meat>,<br/>等；html标签包括行内标...
css扁平化博客学习总结（四）content代码实现
1.根据功能，把不同的部分写出来，方便扩展<div class="content"><!-- 内容开始 --><section class="green-section"><div class="wrapper"><h2>一个标题</...