autoprefixer: {},‘postcss-px-to-viewport‘: {unitToConvert: ‘px‘, //将要转化的单位viewportWidth: 750, //(Number)视图的宽度unitPrecision: 3, //(Number)指定`px`转换为视窗单位值的小数位数，默认是5propList: [‘*‘], //(Array)指定可以转换的css属性，默认是[‘*‘]，代表全部属性进行转换viewportUnit: ‘vw‘, //(String)指定需要转换成的视窗单位，默认vwfontViewportUnit: ‘vw‘, //(String)指定字体需要转换成...
CSS3中，追加了三个属性选择器分别为： [att*=val]。属性值中有val的元素被选中[att^=val] 属性值中以val 开头的[att$=val] 属性值中以val结束的 如果val为数字则数字前边加反斜杠使属性选择器有通配符的概念 ////伪类选择器 伪元素选择器first-linefirst-letterbeforeafterroot. :root{}not. :not(){}empty. 内容为空白时的样式target. 原文：https://www.cnblogs.com/xiaoqianliu/p/9118458.html
CSS选择器世界CSS选择器的分类与优先级css选择器分为四类：选择器、选择符（后代关系的空格、>、+、~、||）、伪类、伪元素（::before、::after、::first-letter等）。css的优先级:css的优先级有很多划分方法，所有的方法其实都大同小异。这里将CSS优先级划分为6个等级：0级：通配选择器（*）、选择符（+、>、~、空格、||）、逻辑组合伪类(:not()、:is()等)1级：标签选择器2级：类选择器、属性选择器、伪类3级：ID选择器4级：style内...
一、文件规范基本样式库 /css/module通用UI元素样式库 /css/libJS组件相关样式库 /css/ui 业务类的CSS是指和具体产品相关的文件，放在如下目录中：读书 /css/book/ 文件名必须由小写字母、下划线组成 例如 /css/module/rec_btn.css二、sass使用规范module库和lib库 内文件必须以下划线开头：/css/lib/_lib.scss通用工具文件 /css/lib/_lib.scss 内只允许 使用 @mixin命令，定义代码块。@import 最多允许嵌套两层（最好一层）。mod...
1.圆角边框 border-radius border-radius 属性用于设置元素的外边框圆角 语法：border-radius:length; 参数值可以是数值 或者 百分比 的形式 正方形，数值设置宽或高的一半，或者 50%； 矩形，数值设置高度的一半 2.盒子阴影 box-shadow box-shadow：水平阴影的位置 垂直阴影的位置 模糊距离 阴影尺寸 阴影颜色 外部阴影 模糊距离：影子的虚实 阴影尺寸：影子大小 注意： 1.默认值外阴影（...
UIWebView加载CSS样式的html 效果 源码//// ViewController.m // CSS //// Created by YouXianMing on 16/7/19. // Copyright ? 2016年 YouXianMing. All rights reserved. // #import"ViewController.h"@interface ViewController ()@end@implementation ViewController- (void)viewDidLoad {[super viewDidLoad];self.view.backgroundColor = [UIColor whiteColor];CGFloat width = self.view.bounds.size.width...
CSS样式可以精确控制HTML元素的背景、边框的样式和外观，也可以精确控制边框的线型和形状。其中，背景相关属性可以用于控制背景色、背景图片等属性。在控制背景图片的同时还可以控制背景图片的排列方式。 常用的背景相关属性如下：background：设置对象的背景样式，是一个复合属性，可以用于同时设置背景色、背景图片、背景重复模式等属性。 该复合属性可以分开写为以下几个属性：background-color：设置背景色。如果同时设置...
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>markdown</title> 6</head> 7<style> 8 h1{text-align: center;} 9 p.date{text-align: right;}10 p.main{text-align: justify;}11</style>12<body>13<h1>CSS-align example</h1>14<p class="date">2015年3月14号</p>15<p class="main">"当我年轻的时候，我梦想改变世界；当我成熟以后，我发现我不能够改变这个世界，我讲目光缩短了些，决定...
1, IE条件注释法，微软官方推荐的hack方式。只在IE下生效 <!--[if IE]> 这段文字只在IE浏览器上显示 <![endif]-->只在IE6下生效<!--[if IE 6]> 这段文字只在IE6浏览器上显示 <![endif]-->只在IE6以上版本生效<!--[if gt IE 6]> 这段文字只在IE6以上版本IE浏览器上显示 <![endif]--> 只在IE7上不生效<!--[if ! IE 7]> 这段文字在非IE7浏览器上显示 <![endif]--> 非IE浏览器生效<!--[if !IE]><!-->这段文字只在非IE浏览器上显示 <!--...
1、认识HTML标记 HTML的全称是Hyper text markup language,超文本标记语言，用于定义文档的内容结构。在HTML中，所有的标记都是成对出现的。<html>标记：是HTML文档的根元素，放在开头，表示网页文档的开始。<head>标记：出现在文档的起始部分，标明文档的头部信息，比如标题信息。<body>标记：文档的主体区域网页所要显示的内容都在这个标记内。 2、HTML元素的组成部分3、元素的层次结构一个元素的内容中可以包含其他元素，形成嵌...
在网页中，元素有三种布局模型：1、流动模型（Flow） 默认的2、浮动模型 (Float)3、层模型（Layer） 1、流动模型（Flow） 流动（Flow）模型是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。流动布局模型具有2个比较典型的特征：第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占...
css是什么？层叠样式表，是一种表现HTML或者XML等文件样式的机器语言。css引用样式表的三种方式？1、行间样式表（把style直接写在<>当中）；2、内部样式表（把style写在固定的位置，方便调用）；3、外部样式表（把style写在外部文件中，这样最方便调用）。外部引用有什么优点？如果三种样式作用于一个元素，哪种样式的优先级高？就近原则，离元素越近，优先级越高层叠样式表（Cascading Style Sheets）层叠：多个样式表作用于统一个...
环境 xp ie 8 , ietester<!doctype html><html><head><meta charset="utf-8"/><style rel="stylesheet" type="text/css">*{font-size:19px;}i{color:red; font-weight:bold; margin:0 10px;}b{color:#BF7C17; margin:0 10px;}h2,p{padding:20px;}h2{background:#eee; font-size:20px;}p{font-size:15px;}p[attr]{color:blue;}p[attr="bar"]{color:pink;}p[attr~="go"]{color:green;}p[attr|="some"]{color:red;}.subEle > span { ...
CSS3动画 添加某种效果可以从一种样式转变到另一个@keyframes 创建动画 @keyframes move { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }animation 所有动画属性的简写属性，除了 animation-play-state 属性。animation-name 规定 @keyframes 动画的名称。animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。animation-timing-function 规...
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>边框距</title><style type="text/css"> div{ border: 1px solid red; width: 100px; height: 100px; } /*1.四个边设置相同的边距*/ #d1{ padding: 20px; margin: 30px; } /*2.四个边设置不同的边距*/ #d2{ padding: 10px 20px 30px 40px; margin: 10px 20px 30px 40px; } /*3.单...