CSS(3)
文章平均质量分 84
木槿花开lalala
学习总结,不断地积累和进步。。。
展开
-
CSS知识点总结
1.层叠次序一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。浏览器缺省设置外部样式表内部样式表(位于 标签内部)内联样式(在 HTML 元素内部)2.背景效果:background-color:背景颜色background-image:url(。。)背景图像background-rep原创 2016-10-30 15:11:51 · 374 阅读 · 0 评论 -
CSS预处理器--Sass
推荐网站: http://www.w3cplus.com/sassguide/index.htmlhttp://www.ruanyifeng.com/blog/2012/06/sass.html一,Sass简介Sass是一种”CSS预处理器”(css preprocessor)。它的基本思想是:用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。(注意:CSS转载 2017-02-13 10:29:21 · 468 阅读 · 0 评论 -
CSS基础
一、CSS定义与编写CSS1.1 CSS的定义全名:Cascading Style Sheets ->层叠样式表定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容、图片的外形以及版面的布局等外观显示样式。1.2 HTML、CSS与JS三者的关系 HTML:页面结构,负责从语义的角度搭建页面结构。 CSS:页面样式表现,负责从审美的角度美化页面。转载 2017-02-15 21:32:09 · 1294 阅读 · 0 评论 -
Flex布局
Flex是Flexible Box的缩写,意为"弹性布局",可以简便、完整、响应式地实现各种页面布局。任何一个容器和行内元素都可以指定为Flex布局。如.box{ display: flex;} .box{ display: inline-flex;}注意:设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。一、基本概念采用Flex布局的元原创 2017-03-10 22:06:46 · 229 阅读 · 0 评论 -
原生实现响应式模态框
下面采用HTML+CSS+JavaScript实现模态框,并采用Flex布局和多媒体查询实现响应式。一、模态框HTML代码 模态框实现 模态框展示 模态框标题 × HTML+CSS+JS原生实现响应式模态框演示! 取消 确定 首先定义模态框的overlayer,然后定义模态框的内容包括head原创 2017-03-16 16:05:33 · 14933 阅读 · 3 评论 -
css垂直居中和水平居中
在网页布局中,垂直居中对齐总是一个绕不过的话题,而且这两种对齐方式由于浏览器渲染方式的不同,也存在很多不同的场景,本文试图将这些场景一一列举并给出解决方案,也是对这个知识点的一点回顾和总结。1.水平居中水平居中这个问题首先要搞清楚存在两个条件才能够称之为水平居中,即父元素必须是块级盒子容器,父元素宽度必须已经被设定好,在这两个前提下我们来看水平居中问题。场景1:子元素是块级元素转载 2017-05-04 22:03:30 · 322 阅读 · 0 评论 -
PostCSS使用教程
原创 2018-05-09 13:53:14 · 11079 阅读 · 0 评论 -
CSS揭秘-背景与边框
CSS编码技巧尽量减少代码重复当某些值相互依赖时,应该把他们的相互关系用代码表达出来,如行高是字号的1.5倍:font-size: 20px;line-height: 1.5;相信你的眼睛,而不是数字响应式网页设计(百分比长度、flex布局、媒体查询)合理使用简写背景与边框1. 半透明边框border: 10px solid hsla(0,0%,100%,.5); ...原创 2019-05-24 16:58:14 · 162 阅读 · 0 评论 -
CSS揭秘-形状
形状1. 自适应的椭圆border-radius可以单独指定水平和垂直半径,用一个斜杠(/)分隔这两个值即可。border-radius: 水平半径 / 垂直半径;border-radius: 50% / 50%;即可实现一个自适应的椭圆;半椭圆border-radius: 50% / 100% 100% 0 0;其中垂直半径分别为:左上角100% 右上角100% 左下角0...原创 2019-05-27 20:05:02 · 180 阅读 · 0 评论 -
CSS揭秘-视觉效果
1. 单侧投影由box-shadow的第四个长度参数即扩张半径,可根据你指定的值去扩大或 (当指定负值时)缩小投影的尺寸。可知单侧投影实现如下:box-shadow: 0 5px 4px -4px black;邻边投影box-shadow: 3px 3px 6px -3px black;双侧投影box-shadow: 5px 0 5px -5px black, ...原创 2019-05-27 21:02:18 · 197 阅读 · 0 评论