为您找到搜索结果：1786个
关于css里大于号（>)的用法
之前用的css没涉及到这个问题，今天看到。知道大概用法，但不知道和普通的后代选择器有什么区别。到网上找了，其实w3c的css文档里有很详细明确的介绍（http://www.w3school.com.cn/css/css_selector_child.asp）。 这里写下全做加深印象: 如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Childselector）。 例如，如果您希望选择只作为h1元素子元素的strong元素，可以这样写：h1>strong{color:red;} 这个规则会把第一个h1下面的两个strong元素变为红色，但是第二个h1中的strong不受影响：<h1>Thisis<strong>very</strong><strong>very&...
CSS里的引用@import、link
引入CSS的方法有两种，一种是@import，一种是link @importurl('地址');<linkhref="地址"rel="stylesheet"type="text/css"/>现在绝大部分的网站都采用后一种link方式，原因在于@import先加载HTML，后加载CSSlink先加载CSS，后加载HTML。所以前者加载网页会出现令浏览者以外的格式，后者则是带格式的加载网页。...
width和height不是全局，在css中必须有单位
虽然很多元素有width和height属性。但他们不是全局，但他们不是全局，但他们不是全局！！！比如div中就不能直接用。必须放在style中。并且有该属性的元素，使用可以不用单位，默认是像素。（html5规定还必须像素）<inputwidth="100">或者<inputwidth="100px">在css中：必须有单位：100px，100rem;也可以是百分比：100%。例如：p.ex{height:100px;width:100px;}在HTML4.01中，宽度应该被定义为以像素为单位或者以包含元素的百分比为单位。在HTML5中，宽度值必须以像素为单位。（即拥有该属性的标签可以省略单位！）语法<imgwidth="pixels"><imgsrc="smiley.gif">"Smileyface"height="42"width="42"> ...
css 如何使图片与文字在div中居中展示？
1.情景展示 如何将图片与文字在div中一起居中展示？ HTML片段<div><imgsrc="C:UsersMarydonDesktophead_no.jpg"/><span>Marydon</span><span>12345678900</span></div> 界面展示2.原因分析 由于img和span标签都是行内标签3.解决方案 所以，可以使用div的居中属性"align:center"<divalign="center">4.拓展 如何使Marydon提上去？ 分析过程： Marydon和12345678900并列展示，可通过定位实现； 由于Marydon和12345678900，后者更长，考虑到居中展示后，左右边距问题； 遂将Marydon使用绝对定位，旨在让其脱离文档（腾出原来占用的位置），这样， div的"align:center"属性在计算左右间距时，就只计算待居中元素的宽度为：图片宽度+12345678900宽度，不再将Marydon占用...
css 禁止录入中文
1.情景展示 如何禁止输入框，输入中文字符？2.解决方案 IE浏览器，可以使用ime-mode来实现UpdateTime--2016年12月15日19:52:16 /*屏蔽输入法，可以用来禁止录入中文*/ ime-mode:disabled;//IE兼容，chrome不兼容 <inputtype="text"name="mobile"/> 详细介绍 ime-mode语法： ime-mode:auto|active|inactive|disabled 取值： auto: 默认值。不影响IME的状态。与不指定ime-mode属性时相同 active: 指定所有使用IME输入的字符。即激活本地语言输入法。用户仍可以撤销激活IME inactive: 指定所有不使用IME输入的字符。即激活非本地语言。用户仍可以撤销激活IME disabled: 完全禁用IME。对于有焦点的控件(如输入框)，用户不可以激活IME注意事项： 该语法在google浏览器上无效，需要用js进行控制，见文末推荐！&n...
CSS3新特性
1.对于CSS3新特性，支持 淘宝手机端页面：1<!DOCTYPEhtml>2<html>3<head>4<metacharset="utf-8"/>5<title>淘宝</title>6<metaname="viewport"content="width=375,user-scalable=no"/>7<linkrel="stylesheet"type="text/css"href="css/index.css"/>8</head>9<body>10<!--.nav>(.logo+(a.search>(.icon+span)))-->11<divclass="nav">12<divclass="logo"></div>13<ahref=""class="search"><spanclass="icon"></span><span>寻找宝贝...
CSS/JavaScript hacks,browserhacks使用
1、网址http://browserhacks.com/2、使用（1）JavaScriptHacks浏览器js判断（2）条件注释hack（3）MediaQueryHacks媒体查询hack（4）Property/ValueHacks属性/值hack （5）SelectorHacks选择器hack ...
css zoom与scale区别
转自：http://www.zhangxinxu.com/wordpress/2015/11/zoom-transform-scale-diff/1、zoom的缩放是相对于左上角的；而scale默认是居中缩放；2、zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化；所以二者会导致渲染的性能差异。3、对文字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大小限制；而scale就是纯粹的对图形进行比例控制，文字50%原来尺寸。 ...
css实现九宫格
原理：浮动+margin负边距示例代码：<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"/><title>css实现九宫格</title><styletype="text/css">*{margin:0;padding:0;}ul.box{list-style:none;width:165px;height:165px;padding:30px;}.boxli{/*关键--浮动*/float:left;}.boxa{display:block;width:50px;height:50px;border:5pxsolidblue;/*关键--margin负值*/margin-left:-5px;/*关键--margin负值*/margin-top:-5px;}.boxa:hover{/*关键--相对定位*/position:relative;border-color:red;/*关键--z-index*/z-index:100;}.box:af...
CSS命名规范 BEM
良好的代码结构，HTML和css元素之间的关系，对于项目交付是很重要的！BEM解释：(1).block是BEM的区块(B)，包含内容和风格。如bootstrap框架的.container。 (2).block-element代表自子容器(E)。如bootstrap框架的轮播图，.carousel表示轮播图，carousel-indicators表示轮播图的对应点，carousel-inner表示轮播图的内容。 (3).block-modifier,表示区块元素的改变(M)。如bootstrap框架的 text-danger。 ...
webpack css打包为一个css
1、安装npminstallextract-text-webpack-plugin--save-dev 2、项目目录：index文件夹下的index.css：body{background-color:#ccc;}.flex-div{display:flex;}index文件夹下的index2.css：p{text-indent:2em;}index文件夹下的index-less.less：.layer{width:600px;height:200px;background-color:green;>div{width:400px;height:200px;background:url(../../img/ais.jpg);}.flex{display:flex;}}index文件夹下的index.js：require('./index-less.less');require('./index.css');require('./index2.css');require('../module.js');console.log('首页-index文件');login文件夹下...
webpack 编译less/scss文件
1、安装插件处理less：npminstallless-loader--save-dev处理sass：npminstallsass-loader--save-dev2、项目目录： layer.less为：.layer{width:600px;height:200px;background-color:green;>div{width:400px;height:200px;background-color:red;}.flex{display:flex;}}layer.js为：import'./layer.less';//importtplfrom'./layer.html';functionlayer(){return{name:'layer',tpl:tpl}}exportdefaultlayer;3、webpack.config.js配置文件(以编译less为例)varhtmlWebpackPlugin=require('html-webpack-plugin');module.exports={entry:'./src/app.js',output:{path:_...
webpack 处理CSS
1、安装插件npmistyle-loadercss-loader--save-devnpmipostcss-loader--save-devnpmiautoprefixer--save-devnpminstallpostcss-import--save-devstyle-loader插件为：通过注入<style>标签将CSS添加到DOM中autoprefixer自动添加前缀postcss-import：支持使用@import引入css2、项目目录结构：common.css为：@import'./flex.css';html,body{padding:0;margin:0;background-color:red;}ul{list-style:none;margin:0;}flex.css为：.flex-div{display:flex;}app.js为：import'./css/common.css';importlayerfrom'./components/layer/layer.js'constApp=function(){console.log(layer)}newA...
CSS3 calc()函数使用
1、calc是什么？calc是英文单词calculate(计算)的缩写，用于动态计算长度值。calc()函数支持"+","-","*","/"运算；+和 -运算符的两边必须始终要有空白符。比如 calc(50%-8px)会被解析成为一个无效的表达式：一个百分比后跟一个负数长度值。而calc(8px+-50%) 会被解析成为一个长度后跟一个加号再跟一个负百分比。*和 /运算符不需要空白符，但考虑到统一性，仍然推荐加上空白符。可以使用百分比、px、em、rem等单位；2、浏览器兼容性http://caniuse.com/#search=calc3、calc使用calc()主要应用在流体布局上，可以通过calc()计算得到元素的宽度。calc()根据给定百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50%+2em)”，这样一来你就不用考虑元素DIV的宽度值到底是多少，而把这个烦人的任务交由浏览器去计算。4、示例代码<!DOCTYPEhtml><html><head><met...
CSS3 选择器浏览器兼容性汇总 IE8
1、css选择器css（包括css1、css2和css3）有哪些选择器？http://www.w3school.com.cn/cssref/css_selectors.asp 2、CSS3选择器因为CSS1和CSS2选择器浏览器兼容性很好，因此本文主要讲解CSS3选择器，CSS3选择器一共有21个，他们为：3、CSS3选择器的兼容性根据CanIUse：http://caniuse.com/#search=nth-of-type 可知：结论：（1）对于IE7和IE8浏览器来说，只支持element1~element2、[attr$=val]、[attr^=val]、[attr*=val]四个选择器，因此对于需要兼容IE8浏览器时，慎用CSS3选择器。（2）:first-child是CSS2选择器（3）:before和:after是CSS2选择器 ...