css
文章平均质量分 79
juzipchy
好好学习 天天向上
展开
-
CSS3中vh
vh 说明: 相对于视口的高度。视口被均分为100单位的vh. 示例代码:h1 { font-size: 8vh;}如果视口的高度是200mm,那么上述代码中h1元素的字号将为16mm,即(8x200)/100实例:<!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="utf-8" /><title></ti原创 2017-05-15 19:46:57 · 676 阅读 · 0 评论 -
css权威指南(4):值和单位
颜色 用RGB指定颜色 有两种颜色值类型使用函数式RGB记法,而不是16进制记法.这种类型颜色值的一般语法是rgb(color),其中color是一个百分数或整数三元组.百分数值在0%~100%,整数范围为0~255.如: rgb(100%,100%,100%)rgb(191,253,45)值得注意的点是 1.百分数计数法可以使用分数和小数,但是如果用户代理忽略小数点原创 2018-01-13 16:33:05 · 217 阅读 · 0 评论 -
css权威指南(5):字体
css字体处理中最复杂的部分是字体系列的匹配和字体加粗的匹配,其次是字体大小的计算。字体系列 我们大多数人以为字体就是某一种字体,实际可能是一个字体系列。常见的字体系列有Times,Serif,Sans-serif等有时候我们指定了某种特定字体,但是不可用,可能显示为用户代理的默认字体只有当一个字体名中有一个或多个空格(如New York),或者如果字体名包括#或$之类的符号,才需要原创 2018-01-14 18:48:48 · 267 阅读 · 0 评论 -
css权威指南(8):内边距、边框和外边距
宽度和高度 1.一个元素的width被定义为从做内边界到右内边界的距离,height被定义为上边界到下边界的距离。 2.这两个属性很重要的一点是:它们不能应用到行内非替换元素。 3.如果在行内非替换元素声明了width和height,浏览器会忽略。外边距 margin 值:length> | precentage> | auto | inherit 1.浏览器对许多元素已经提供了预定原创 2018-01-22 23:14:06 · 644 阅读 · 0 评论 -
css权威指南(1):css和文档
替换元素 替换元素指用来替换元素内容的部分并非由文档内容直接表示。在XHTML中,我们最熟悉的替换元素是img元素。它有文档本身之外的一个图像文件来替换。实际上,img并没有具体的内容。 <img src='xxx.png'/>这个标记片段不包含任何具体内容。只有一个元素名和属性名。除非将其指向一个具体内容,否则这个元素没有意义。input元素类似,取决于input元素的类型。替换元素显示原创 2018-01-07 21:58:49 · 270 阅读 · 0 评论 -
css权威指南(10):浮动和定位
浮动 float 值:left | right | none | inherit 1.css允许浮动任何元素浮动元素 1.会以某种方式将浮动元素从文档的正常流中删除,不过它还是会影响布局 2.一个元素浮动时,其他内容会“环绕”该元素 3.浮动元素周围的外边距不会合并。即入如果其他元素与此图像相邻,而且这些元素也有外边距,那么这些外边距不会与浮动图像的外边距合并浮动的详细内幕 1原创 2018-01-28 20:21:06 · 487 阅读 · 1 评论 -
css权威指南(12):列表和生成内容
列表类型 list-style-type 值:disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha原创 2018-02-04 20:20:35 · 276 阅读 · 0 评论 -
css权威指南(9):颜色和背景
前景色 color 值: color> | inherit 1.要设置一个元素的前景色,可以使用此属性 2.color值可以影响元素周围的边框 3.此属性可以继承背景色 background-color 值: color> | transparent | inherit 1.可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值. 2.不原创 2018-01-28 17:38:45 · 310 阅读 · 0 评论 -
css权威指南(6):文本属性
text-indent 值: <length> | <percentage> | inherit 1.通过使用此属性,所有元素的第一行都可以缩进一个给定的长度,该长度甚至可以是负值. 2.可以为所有块级元素使用text-indent,但无法将这个属性应用到行内元素,图像类的替换元素也无法应用text-indent属性. 3.text-indent可以使用所有长度单位(包括百分数值).但是百原创 2018-01-20 14:56:35 · 334 阅读 · 0 评论 -
css权威指南(7):基本视觉格式化
块级元素 水平格式化 1.水平格式化的7大属性:margin-left,border-left,padding-left,width,margin-right,border-right,padding-right.这些属性与块级框的水平布局有关.这7个属性的值加在一起必须是元素包含块的宽度.这往往是块元素的父元素的width值. 2.这7个属性中,只有3个属性可以设置为auto:width,原创 2018-01-20 18:47:47 · 284 阅读 · 0 评论 -
css权威指南(13):用户界面样式
系统字体 css2定义了6个系统字体关键字,如下: 1.caption 由标题控件使用的字体样式,如按钮和下拉控件 2.icon 操作系统图表标签使用的字体样式,如硬盘驱动器,文件夹和文件图标 3.menu 下拉菜单和菜单列表中文本使用的字体样式 4.message-box 对话框中文本使用的字体样式 5.small-caption 对话框中文本使原创 2018-02-04 21:48:05 · 307 阅读 · 0 评论 -
css权威指南(3):结构和层叠
特殊性 上一章介绍了用不同的选择器选择元素,假设一个元素可以用两个或多个规则选择,每个规则都有自己的选择器,那应该应用哪一个选择器呢? 显然每一对规则只能有一个胜出.应该选哪个呢?答案就在每个选择器的特殊性,对于每个规则,用户代理会计算选择器的特殊性,并将这个特殊性附加到规则中的各个声明.如果一个元素有两个或多个冲突的属性声明,那么有最高特殊性的声明就会胜出.选择器的特殊性由选择器原创 2018-01-13 13:49:35 · 297 阅读 · 1 评论 -
css权威指南(2):选择器
类选择器: 类选择器的用法很简单,个人最常用的写法如下:.warning{ color: red;}今天看了书,发现还有这种写法:p.warning{ color: red; //其class属性包含词warning的所有段落}选择器会匹配class属性包含warning的所有p元素,其他任何类型的元素都不会匹配,不管是否有此class属性原创 2018-01-10 22:50:47 · 209 阅读 · 0 评论 -
CSS3 修改和去除移动端点击事件出现的背景框 (tap-highlight-color)
看了微博的移动端的一个源码,对某一行代码有点懵逼:a { -webkit-tap-highlight-color: rgba(255, 255, 255, 0);}度娘查了一下,现记录如下: 这个属性是用于设定元素在移动设备(如Adnroid、iOS)上被触发点击事件时,响应的背景框的颜色。例如在Adnroid版本的微信中,点击a标签时将会出现一个橙色的小框表示点击的响应。此时,如果对元素设原创 2017-05-07 20:01:15 · 367 阅读 · 0 评论 -
Sass学习总结
以下代码是基于scss格式的:.sass与.scss的区别 “.sass”只能使用 Sass 老语法规则(缩进规则),“.scss”使用的是 Sass 的新语法规则,也就是 SCSS 语法规则(类似 CSS 语法格式)。 .sass:$font-stack: Helvetica, sans-serif //定义变量$primary-color: #333 //定义变量body font:原创 2017-04-23 15:18:59 · 787 阅读 · 0 评论 -
Sass在win7环境中的安装
好讨厌安装各种东西,一装准失败,心累,安装这个sass也装了一天没装好,网上教程也不太对,各种毛病。现在win7环境下只要按照下面的步骤安装就好了: 1.sass是用ruby写的,安装sass之前,要安装ruby,到ruby官网下载合适版本即可单击这里下载 我下载的版本是红框圈出来的 2.下载完成后一路next下去安装,要注意的是到图中这一步的时候,要选中第二个选项,,添加环境变量,不然以原创 2017-04-23 10:07:49 · 996 阅读 · 0 评论 -
css3字体缩放样式-webkit-text-size-adjust的用法详解
又是看源码看到的写页面的应该都知道Chrome浏览器默认情况下的字体最小为12px,如果你要设置某字体大小为10px的话,你会在Chrome发现还是12px。如果要使此生效的话,就得修改Chrome的默认配置了,一般应用下面的代码就能在全局生效了:html { -webkit-text-size-adjust: none; }但是这样设置之后会有一个问题,就是当你放大网页时,一般情况下字体也会随着变原创 2017-05-07 20:12:47 · 19079 阅读 · 3 评论 -
用CSS实现一个简单的幻灯片效果页面
又是一个常见面试题,不搜不知道,一搜吓一跳,有很多很有意思的写法。第一反应是利用CSS3的animation。不过为了兼容浏览器,记得加各浏览器前缀(“chrome和safira:-webkit-”、“firefox:-moz-”、“opera:-o-”) 下面说说用到的animation各属性。 animation-name(动画名字,需用引号包裹) animation-duration(动原创 2017-03-02 17:30:02 · 7375 阅读 · 0 评论 -
不熟悉的CSS
querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。注意: querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用querySelectorAll() 方法替代。原创 2016-11-17 21:42:54 · 396 阅读 · 0 评论 -
CSS3中不熟悉的属性1:box-pack和box-align
box-pack 定义和用法: box-pack 属性规定当框大于子元素的尺寸,在何处放置子元素。 该属性规定水平框中的水平位置,以及垂直框中的垂直位置。 语法: box-pack: start|end|center|justify; start: 对于正常方向的框,首个子元素的左边缘被放在左侧(最后的子元素后是所有剩余的空间) 对于相反方向的框,最后子元素的右边缘被放在右侧(首个子元原创 2017-06-05 18:44:53 · 601 阅读 · 0 评论 -
CSS3中不熟悉的属性2:display:box和display:flex的区别
display:box和display:flex有什么区别吗?没区别,仅是各阶段草案命名。 W3C 2009年第1次草案:display:box; W3C 2011年第2次草案:display:flexbox | inline-flexbox;- W3C 2012年第5次草案及以后的候选推荐标准:display:flex | inline-flex;因此display:box和display原创 2017-06-06 10:45:27 · 2309 阅读 · 0 评论 -
CSS3中不熟悉的属性3:will-change
will-change属性可以提前通知浏览器我们要对元素做什么动画,这样浏览器可以提前准备合适的优化设置。这样可以避免对页面响应速度有重要影响的昂贵成本。元素可以更快的被改变,渲染的也更快,这样页面可以快速更新,表现的更加流畅。举个例子,当对于素使用 CSS 3D变形时,元素及其内容可以在合成到页面之前被创建到我们之前说的layer。然而把元素放到layer中是个昂贵的操作,这将会导致变形动画延迟一原创 2017-06-09 15:40:48 · 642 阅读 · 0 评论 -
用position: sticky 实现粘性元素区域悬浮效果
在一些很长的表格中,常常会使用表头悬浮的设计以方便阅读,即在表格离开窗口之前,表头会一直 fixed 悬浮在表格的最顶上。还有许多诸如评论框等元素,也采用了这种被称为 Sticky Pin 或者 粘性元素 的设计。这个效果可以用position:sticky实现,设置了sticky的元素,在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top、left等属性无效),当该元素的位置原创 2017-08-02 20:04:13 · 2243 阅读 · 0 评论 -
CSS变量总结
文档https://drafts.csswg.org/css-variables/1.声明变量时,变量名前要加两根线(–),声明的变量区分大小写var()函数用于读取变量:root { // 根元素 --header-color: #06c;}h1 { background-color: var(--header-color); }2.var()可以有两个参数,第一个参数是...原创 2018-12-05 17:54:14 · 355 阅读 · 0 评论