CSS3
Marvel__Dead
这个作者很懒,什么都没留下…
展开
-
cssRuels和rules的区别
对于cssRules和rules的区别: 在计算cssRules和rules的长度的时候,cssRules的单位是是对整条规则,而rules的单位是一个选择器。 下面进行代码演示:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style>原创 2016-11-05 21:10:02 · 2657 阅读 · 3 评论 -
移动端viewport
移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是 dip ( device-independent pixel 设备逻辑像素 )和 CSS 像素之间的关系。这里首先了解以下几个概念。layout viewport(布局视口)一般移动设备的浏览器都默认设置了一个viewport 元标签,定义一个虚拟的layout viewport(布局视口),用于解转载 2017-02-17 06:09:11 · 782 阅读 · 0 评论 -
CSS3-JS-小练习
1.感觉可以做一个很不错的进入界面。<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style> .box{width:200px;height:200px;border:1px solid #2FD000;margin:300px auto;}</style><script>原创 2017-01-21 01:01:39 · 810 阅读 · 0 评论 -
CSS3-2D及3D效果以及过渡
CSS转动2D效果概念:通过 CSS3 中的属性,我们能够对元素进行移动、缩放、转动、拉长或拉伸。 实现2D或3D效果。 使用transform属性来实现,该属性的值是几个函数。主要2d转换函数:1.translate(x,y) 或者 translateX(n) 或者 translateY(n) 平移2.rotate(10deg) 旋转,2d旋转3.scale(x,y)或者scaleX(n)原创 2017-01-21 02:07:02 · 1219 阅读 · 0 评论 -
CSS3-JS-styleSheets的概述
下面通过代码进行解释:<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style> .box{width:100px;height:100px;background:#30D716;} .box2{width:200px;height:200px;background:#DF2894原创 2017-01-21 02:47:03 · 1089 阅读 · 1 评论 -
解决设置float样式后父级元素不适应问题
这是没有解决之前的样式:<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style> *{margin:0;padding:0;} .box{border:1px solid #23D127;width:520px;margin:100px auto;} .box .page原创 2017-01-21 16:45:47 · 1869 阅读 · 1 评论 -
CSS3-多列布局+resize+box-sizing+outline讲解
css3多列通过 CSS3,能够创建多个列来对文本进行布局 - 就像报纸那样Internet Explorer 10 和 Opera 支持多列属性。 Firefox 需要前缀 -moz-。Chrome 和 Safari 需要前缀 -webkit-。涉及相关属性column-count 分列的数量column-gap 分列间的距离column-width分列的宽度column-span原创 2017-01-21 17:12:12 · 1355 阅读 · 0 评论 -
CSS3-颜色渐变--线性渐变+径向渐变
下面我要说的渐变是w3c的标准渐变,庆幸的是w3c的渐变目前PC所有浏览器都兼容支持。包括我在安卓机上的测试都支持(PC端测试IE,谷歌,火狐,搜狗等几个浏览器。移动端测试安卓系统,uc浏览器和自带浏览器。所有测试版本为2016年最新版本。) 也就是说,我们只需要写w3c的标准就行了,但是在苹果和很多移动端浏览器,我们必须要加上webkit前缀的渐变。线性渐变W3C标准语法从官网copy下来的l原创 2017-01-24 21:10:07 · 1736 阅读 · 1 评论 -
CSS3-文本模型
在文本中常用的几个模型:text-overflowclip 修剪文本。ellipsis 显示省略符号来代表被修剪的文本。string 使用给定的字符串来代表被修剪的文本。overflow visible 默认值。内容不会被修剪,会呈现在元素框之外。hidden 内容会被修剪,并且其余内容是不可见的。scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。a原创 2017-01-25 01:24:52 · 866 阅读 · 1 评论 -
CSS3-盒模型基本样式
paddingpadding 内填充(padding在元素的边框以内,内容之外,padding同样显示元素的背景,background-position的原点是padding的左上角) padding-top padding-right padding-bottom padding-left可视宽(高)=border+padding+width(height);marginmargin 外边原创 2017-01-13 18:54:53 · 876 阅读 · 0 评论 -
CSS3-font和字体基本样式
fontfont-size 文字大小font-weight 文字加粗(bold加粗/normal正常)font-style 文字倾斜(italic倾斜/normal正常)line-height 行高 (文字在一行上下居中)font-family 字体 -------------------------------------font:font-weight font-style font原创 2017-01-13 16:10:25 · 1305 阅读 · 0 评论 -
CSS3选择器详解
要想给HTML标签添加样式,就必须先能够选择HTML标签下面我就来介绍CSS3的一些选择器和CSS3以前的选择器。这是CSS3样式的pdf总结:下载地址css常用选择器什么是选择器? 当我们定义一条样式规则时候,这条样式规则会作用于网页当中的某 些元素,而我们的规定的这些元素的规则就叫做选择器 1. id选择器 ① ①#idname 2. 类选择器 ① ①.classname 3. 标原创 2016-11-05 20:31:03 · 1057 阅读 · 1 评论 -
CSS Float布局过程
使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了。一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局。前者适合布局首页,因为首页上的内容往往可以完全控制。后者适合布局模板,模板中填充的内容你没法控制——比如,在编辑wordpress模板时,你肯定没法考虑每篇博文的长度。这篇博文,就是总结一下怎样使用CSS中的float属性进原创 2016-11-06 21:53:14 · 1845 阅读 · 3 评论 -
float布局和position布局的简单区别
float布局和position布局的区别这里要讲解的区别是float布局和position中的absolute布局的区别。因为它们两个都是把标签文档流中拉了出来。但是具体实现时,它们两个的效果又有点区别。float被称为浮动布局。属性值为:left,right,none;它的布局方式是把 标签从文档流中拉出来,然后后面的标签就会填补当前标签的位置。如果不想要后面的标签填补上来就可以对后面的原创 2016-11-07 15:38:56 · 2869 阅读 · 1 评论 -
position布局详解
简介:当你已经学会了怎么用选择器去选择html标签,那么就得给html标签一些适当的布局让html页面变得美观了。 CSS3选择器详解position布局position布局有以下几个属性值:realtive、absolute、fixed、static。static:无特殊定位,对象遵循正常文档流,默认取该值。top,right,bottom,left等属性不会被应用。relative:对象遵原创 2016-11-06 18:06:10 · 2205 阅读 · 1 评论 -
用text-align、vertical-align、line-height进行居中布局
居中布局是非常常用的布局,个人觉得只要把居中布局,float左右布局,然后微调用position进行布局之后,对于页面布局来说就没什么难点了。预备知识:text-align 对于inline-block属性的标签有用,如图片,字符,还有设置了display:inline-block的标签,如div。还有要注意一点text-align是对于标签内元素的布局,也就是说要把这个属性设置在父标签中才原创 2016-11-09 09:36:57 · 1783 阅读 · 0 评论 -
CSS常识(不定期更新)
标签具有继承父元素样式的能力。text-align为对文本的布局。所以其它的标签为单位上的布局就不能用这个了。要用marging布局等。默认是left布局。其中text-align:inherit;的意思是说样式text-align向上继承父元素的text-align的样式,但是不是所有样式都能够继承,比如说border就不能够继承。然而设置text-align:inherit;并不会起到什么用,原创 2016-11-07 16:22:56 · 1283 阅读 · 1 评论 -
CSS3-background的基本用法
<!DOCTYPE html><html><head><meta charset="utf-8"><style> *{margin:0px;padding: 0px;} .box-top{width: 50%;height: 400px;background-color: #ccc;margin: 1% auto;background-image: url(1.jpg) ;b原创 2016-12-24 10:25:38 · 1431 阅读 · 1 评论 -
CSS3-border基本使用
<!DOCTYPE HTML><html><head> <title>边框</title> <meta charset="utf-8"> <style> *{margin:0;padding: 0} /* 当长度为0px时,可以把px省略。 */ .box-top{width: 100原创 2016-12-24 11:24:21 · 934 阅读 · 1 评论 -
CSS3实现三角形效果
原文:Magic of CSS border property译文:不可思议的CSS border属性译者:dwqs在CSS中,其border属性有很多的规则。对于一些事物,例如三角形或者其它的图像,我们仍然使用图片代替。但是现在就不需要了,我们可以用CSS形成一些基本图形,我分享了一些关于这方面的技巧。1、正三角形:.triangle_up{ height:0px; width:0px;转载 2017-06-20 18:52:29 · 1085 阅读 · 0 评论