浏览器禁止用户在标签的style中使用js写入"!important"的特性 我们在使用jQuery设置css的时候 $('#text').css('height', '200px !important'); 发现并没有设置成功,使用原生的方法 document.getElementById('text').style.height = '200px !important'; 也是设置不了的.而且在style上设置本省就是最高等级了.使用"!important"是不…

你肯定已经知道,对于一个 img 元素而言,你可以单独地修改它的 width 或者 height 属性来设置它的大小,同时图片的比例还能够保持不变. 如下图所示,最上面是原始大小的图片,下面两张则分别是设置了 width: 50% 和 height: 50% 属性后的样子. 可以看到把宽度设置为了原来的一半的同时,图片的高度并不是保持原来的大小,而是相应的也变成了原来的一半,使得图片仍能够保持原有的比例.同理把高度设成原来的一半也如此. 作为对照,我们看看单独修改其他元素的宽和高会产生什么样的效…

什么是 CSS 特性检测?我们知道,前端技术日新月异的今天,各种新技术新属性层出不穷.在 CSS 层面亦不例外. 一些新属性能极大提升用户体验以及减少工程师的工作量,并且在当下的前端氛围下: 很多实验性功能未成为标准却被大量使用: 需要兼容多终端,多浏览器,而各浏览器对某一新功能的实现表现的天差地别: 所以有了优雅降级和渐进增强的说法,在这种背景下,又想使用新的技术给用户提供更好的体验,又想做好回退机制保证低版本终端用户的基本体验,CSS 特性检测就应运而生了. CSS 特性检测就是针对不同浏览…

原文:https://bitsofco.de/3-new-css-features-to-learn-in-2017/译文:http://caibaojian.com/3-new-css-features-to-learn-in-2017.html译者:前端开发博客(蔡宝坚) 未经许可,禁止转载,如有不妥之处,欢迎指正. 新年快乐!随着新的一年到来,我们有一整套新的东西要开始学习.虽然今年的新特性有很多,但有3个新的特性是最令我激动不已的. 1.Feature Queries 前段时间,我写过关…

Feature Queries 是CSS3 Conditional Rules specification中的一部分,它支持“@supports”规则,“@supports”规则可以用来测试浏览器是否支持CSS属性和值对.CSS本身有降级机制,比如忽视不支持的属性或值,但当很重要的属性直接被忽视也是很严重的,这个时候你可以用Feature Queries 测试是否支持所有的CSS规则,还可以优化你的页面.Queries在各个浏览器中已经有很多稳定的实现了,比如Chrome,Firefox和 Op…

  css书写位置   行内式写法 <p style="color:red;" font-size:12px;></p> 外联式写法 <link rel="stylesheet " href="地址" type="text/css"/> 嵌入式写法 <style type="css/stylesheet"> p{ font-size:20px; color:r…

css的特性 css具有两大特性:继承性和层叠性 1.继承性 指的是子元素继承父元素的样式,但没有所有的样式都可以继承(那样就太可怕了) 所以具有继承性的属性主要分为三大类 a.文本属性 font-size.font-family.font-style.font-weight.font.text-align.word-spacing.line-height.text-index b.列表相关属性 list-style-image.list-style-position.list-style-ty…

众所周知,css的三大特性分别是 继承性,层叠性,和优先级. 那么这里就详细说一下css中width的继承性及其特殊情况. 继承性概念详解:css的继承性指的被包在内部的标签拥有外部标签的样式性,子元素可以继承父元素的属性.但也不是所有的css属性都有继承性的. 常见的拥有继承性的属性以 text- . font- .line- 开头的属性较为常用.其中也有例外如a标签的字体颜色是不继承的,它有它自己的默认颜色-蓝色,下划线等自带样式,h1~h6的字体大小是不继承的,跟a标签一样都是有自带默认值…

自适应布局 概念 自适应布局(Adaptive Layout)是对凡是有自适应特性的一类布局的统称 自适应布局使用media query来检测当前浏览器的宽度进而通过CSS样式调整页面大小.自适应布局和静态布局类似也是采用绝对长度单位(px.pt.mm.cm.in),但不同点在于它通过media query为页面指定了多个固定宽度. 布局特点 自适应布局的特点是分别为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围. 改变屏幕分辨率可以切换不同的静态局部(页面元素…

流体布局 什么是流 在谈论流体布局之前我们需要知道一件事情就是何为“流”,所谓“流”就是“文档流”,是css中的一种基本定位和布局 概念 流体布局(Liquid/Fluid Layout)指的是利用元素“流”的特性实现的各类布局,流式布局采用了相对长度单位(%.em.rem.vm.vh).典型的流式布局是采用百分比(%)作为主要区块的单位, 当然其他的相对单位(em)也是同样适用 布局特点 ** 因为“流”本身具有自适应特性,所以流体布局往往都是具有自适应特性的,但是流体布局并不等同于自适应布局…

CSS背景在网页设计中使用频率非常高,然而对于这个开发人员很熟悉的CSS属性,却隐藏着许多不为初级开发人员熟知的细节,这篇文章尝试扒开这层不为人知的面纱. 首先列举一下CSS中关于元素背景的所有属性并简要描述了其作用,其中后面几个属性是在CSS3中新加入的. 属性 描述 备注 background 简写属性,作用是将背景属性设置在一个声明中.   background-color 设置元素背景颜色   background-image 把图像设置为背景   background-repeat 设…

CSS初学感觉很简单,但随着学习的深入才感觉CSS的水由多深,平常总会遇到各种坑,先总结一些经常遇到的坑 大小写不敏感 虽然我们平时在写CSS的时候都是用小写,但其实CSS并不是大小写敏感的 .test{ background-COLOR:#a00; width:100px; height: 100px; } 虽然把background-color写为了background-COLOR,但仍然会生效,之所以写成小写是因为xhtml标准的关系,但是即使不是xhtml还是写成小写比较好,美观.易读而…

在css中也存在着继承关系,与面向对象的编程语言不同,css的继承很简单,而且主要指的是在CSS盒模型中,外围的盒子的样式会被内部所包含的盒子所继承.具体来了解一下. HTML元素之间存在一个”树型“关系,这个关系使得样式发生继承.1. 子元素会继承父元素的样式 2. 子元素可以定义自有样式 3. 子元素可以改变从父元素继承而来的样式 4. 子元素的样式不会反作用于父元素(继承是单向的) 5. 每个元素都遵循样式继承的概念. 6. 样式继承是一个抽象(抽象是提取共同点的方法)的过程,抽象程度越高…

CSS初学感觉很简单,但随着学习的深入才感觉CSS的水由多深,平常总会遇到各种坑,先总结一些经常遇到的坑 大小写不敏感 虽然我们平时在写CSS的时候都是用小写,但其实CSS并不是大小写敏感的 .test{ background-COLOR:#a00; width:100px; height: 100px; } 虽然把background-color写为了background-COLOR,但仍然会生效,之所以写成小写是因为xhtml标准的关系,但是即使不是xhtml还是写成小写比较好,美观.易读而…

expression是在IE5版本之后支持使用的,用来把CSS属性和Javascript脚本关联起来,[这里的CSS属性可以是元素固有的属性,也可以是自定义属性.]是动态设置CSS属性的强大方法,但也存在着一定的危险性. CSS属性后面可以是一段Javascript表达式,CSS属性的值等于Javascript表达式计算的结果. 在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象.这个表达式就好像是在这个元素的一个成员函数中一样. 1,给元素固有属性赋值 #div{ posit…

为什么写? 今天去上班的公交上,有朋友在张队(张善友)的微信群里,发了一个介绍C# 6.0新特性的视频,视频7分钟,加上本人英语实在太low,整体看下来是一脸懵逼的. 下班回到家里,打开这个视频,把视频中介绍的新特性用文档的形式记录下来,加深自己的印象,此处把我整理的文档分享出来,希望对大家能有所帮助! C#6.0已经发布快三年了,可能我们没有有太去关心新版本所加入的特性,有人说,发布新版本,无非就是添加一些“语法糖”罢了,不管是糖不是糖,既然加入了新功能,那么自然有新功能的好处,我们一起来看看…

CSS中大部分属性值都有对应的量词单位,常见的如描述盒模型尺寸的 width, height, margin, padding, border,又比如CSS3中的transform属性的一些值.下面的导图中基本上包括了所有的单位,下面将详细介绍它们的定义及使用方式.  一.长度单位 1.相对字体长度单位 单位 描述 em 相对于当前元素的字体大小(注意当前元素字体大小可能是继承父元素的) rem 相对于根元素字体大小(一般根元素就是html元素) ch 相对于当前使用字体中字符0的宽度,改变f…

CSS 有一些新的属性,可以简化代码的书写,用简单的代码就可以实现复杂的变化.不用像 js 那样,需要写很多代码 这里主要介绍三个属性:transition ,transform,以及translate 1. transition: 允许属性在一定时间内进行过渡 规则: transition:property duration timing-function delay; property--->属性值,例如width,height,background-color等,默认值为all durat…

前言 这是个老掉牙的需求啦,不过仍然有很多人在网上找解决方案,特别是搜索结果排名靠前的那些,都是些只会介绍兼容性不好的使用-webkit-line-clamp的方案. 如果你看到这篇文章,可能代表你正是从那么多千篇一律的文章中跳转过来的,想找更好地方案的.那恭喜你,没有更好的,只有更合不合适的,当然,前提是我的文章流量够多,能被顶上去你才有机会看到. 这里介绍三种多行文本截断的方法,当然第一种就是你看到想吐的-webkit-line-clamp方案,不想看就直接跳到第二种方法开始看啦. 使用-w…

各种浏览器之间的竞争的白热化意味着越来越多的人现在开始使用那些支持最新.最先进的W3C Web标准的设备,以一种更具交互性的方式来访问互联网.这意味着我们终于能够利用更强大更灵活的CSS来创造更简洁,更好维护的浏览器前端代码.现在让我们来看一看一些也许你还不知道的让人兴奋的CSS功能. 在CSS中用attr()显示HTML属性值 attr()功能早在CSS 2.1标准中就已经出现,但现在才开始普遍流行.它提供了一个巧妙的方法在CSS中使用HTML标签上的属性,在很多情况下都能帮你省去了以往需要J…

这里主要是为了留个备份,更好的排版请查看原文: http://www.cnblogs.com/dolphinX/p/3511300.html //以下为全文转载 CSS初学感觉很简单,但随着学习的深入才感觉CSS的水由多深,平常总会遇到各种坑,先总结一些经常遇到的坑 大小写不敏感 虽然我们平时在写CSS的时候都是用小写,但其实CSS并不是大小写敏感的 .test{ background-COLOR:#a00; width:100px; height: 100px; } 虽然把background…

关于js 我们知道完整的js包括三个方面ECMAScript.DOM(文档对象模型).BOM(浏览器对象模型). ECMAScript定义了与宿主无关的预言基础,比如:语法(包含正则语法).类型.语句.关键字.保留字.操作符.对象 DOM是针对HTML(基于XML但经过拓展)的api.主成部分主要有DOM Core(映射基于XML的文档结构).DOM HTML(拓展DOM Core,增加的针对HTML的对象和方法).DOM视图(跟踪不同文档视图的接口).DOM事件.DOM样式(基于css为元素应…

1层叠  样式冲突的遵循就近原则, 2继承  子代会继承父代的某些属性,例如字体大小,字体颜色 3优先级 !important 权重最高 通配符 * 和 继承的属性 权重为 0 0 0 0 行内样式权重为 1 0 0 0 id选择器权重为 0 1 0 0 类选择器和伪类的权重为 0 0 1 0 标签的权重为 0 0 0 1 权重一样就近原则 关于选择器css 基础:标签选择器 类选择器 id选择器 通配符选择器 符合选择器:后代选择器 子代选择器 并集选择器 交集选择器…

em布局/rem布局 em和rem的区别 在了解弹性布局前我们需要先知道em和rem rem:font size of the root element,rem是相对于根元素<html>来设置字体大小的,这就意味着,我们只需要根据自己的需求在根元素确定一个参考值. em:以使用em为单位的元素本身的font-size大小为参考点,标准不统一,容易造成混乱 em/rem与px的换算 浏览器的默认字体高度一般为16px,即1em:16px,但是 1:16 的比例不方便计算,为了使单位em/rem更…

响应式布局 概念 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局 布局特点 响应式设计的目标是确保一个页面在所有终端上(各种尺寸的PC.手机.手表.冰箱的Web浏览器等等)都能显示出令人满意的效果,对CSS编写者而言,在实现上不拘泥于具体手法,但通常是糅合了流式布局+自适应 布局.分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配.即:创建多个流体式布局,分别对应一个屏幕分辨率范围.可以把响应式布局看作是流式布局 和自适应布局设计理…

前言 当为大量用户设计网站时,设计人员必须考虑到访问者的差异: 屏幕分辨率, 浏览器的选择, 是否在浏览器最大化状态, 浏览器的额外工具栏的开启(历史记录,书签等), 操作系统和硬件. 我们知道css中有各类布局,从发展至今包括 固定布局.静态布局.栅格布局.流体布局.液体布局.自适应布局.响应式布局.弹性布局,但是概念总是模糊不清,最近在看一本很喜欢的书,决定要把css布局整理一下 固定布局 概念 固定布局(fixed layout)即传统Web设计,页面的大小采用固定的宽度,固定布局拥有固定…

white-space: pre-line;//P标签自动换行…

/*white-space: nowrap; text-overflow: ellipsis; text-decoration: none;*/ /*这三句话必须连着使用, * clip: 当对象内文本溢出时不显示省略标记(...),而是将溢出的部分裁切掉. * ellipsis: 当对象内文本溢出时显示省略标记(...).*/…

这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东西要学习.尽管CSS有很多新的特性,但有三个特性令我最激动并进行学习. 1. Feature Queries(特性查询) 在这之前我写了一篇关于Feature Queries的文章the one CSS feature I really want.现在,它已经在这里了!目前所有主流浏览器都支持特征查询(包括Opera Mini),IE…

这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东西要学习.尽管CSS有很多新的特性,但有三个特性令我最激动并进行学习. 1. Feature Queries(特性查询) 在这之前我写了一篇关于Feature Queries的文章the one CSS feature I really want.现在,它已经在这里了!目前所有主流浏览器都支持特征查询(包括Opera Mini),IE…