CSS 笔记

Css

CSS动画

---

---

Get it done

    
rgba(0, 0, 0, 0.4)
!important;   重要的

display: -webkit-box;
-webkit-box-flex: 1;
https://www.cnblogs.com/yuzhongwusan/p/6070496.html

box-sizing: unset;    大小不一样 --> 捣蛋鬼

-webkit-appearance:none; /*去除input默认样式*/

*******************************************************************************************************************************

常用

Css	说明
z-index: 100;	元素的堆叠顺序
position: fixed;	定位方式(absolute:父绝对/fixed:窗绝对/relative:相对/static:默认)
top: 5px;	顶边距(搭配position使用)
bottom: 5px;	底边距(搭配position使用)
left: 5px;	左边距(搭配position使用)
right: 5px;	右边距(搭配position使用)
float: left;	浮动(左:left/右:right)
clear: both;	不允许浮动 float
padding: 10%;	内边距(上右下左)
padding: 10px 10%;	内边距(上下 左右)
margin: 2px 4vw 3px;	外边距(上 左右 下)
margin: 2px 4% 3px 4vw;	外边距(上 右 下 左)
height:100px;	元素的高度(px/cm/%)
width:100%;	元素的宽度(px/cm/%)
border-bottom: 1px solid #ddd;	边框(width,style,color)
border-radius: 10px;	圆角(px/cm/%)
box-shadow: 5px 5px 10px #DDD;	阴影效果(水平 垂直 模糊 颜色)
box-shadow: 5px 5px 10px 10px #DDD inset;	阴影效果(水平 垂直 模糊 尺寸 颜色 内部)
font-size: 15px;	字体大小
font-family: Helvetica;	字体
font-weight: bold;	字体粗细
font-style: italic;	字体样式(斜:italic/倾:oblique)
text-align:center;	内部文本对齐方式(一些元素也会对齐)(left/right/center/justify:两端对齐)
text-decoration:underline;	文本线(上划线:overline/中横线:line-through/下划线:underline/闪烁的文本:blink/空:none)
letter-spacing: 3px;	字符间的间距
text-overflow: ellipsis;	文本过长自动修剪…
word-break:hyphenate;	自动换行设置
white-space: nowrap;	处理元素内的空白/段落中的文本不进行换行/
overflow: hidden;	滚动条设置(隐藏:hidden/显示:scroll/自动:auto/继承父:inherit)
opacity:0.2;	透明度 20%
visibility: hidden;	隱藏，却又占位
display:none;	设置框的类型 inline：内联元素前后没有换行符、 block：块级元素有换行符、 none：不显示不占用空间
color: #FEFEFE;	前景颜色
background: rgba(0, 0, 0, 0.4);	背景颜色(半透明)
background: linear-gradient(#FF8900, #FF5400);	渐变背景 從上到下
background: linear-gradient(to right, #FF8900, #FF5400);	渐变背景 從左到右
background: radial-gradient(red, green, blue);	渐变背景 從內到外
background-image: url(http://fanyi.baidu.com/static/translation/img/header/logo_cbfea26.png);	背景图片
background-size: contain;	背景图片大小(px/%/auto/自动缩放到覆盖:cover/自动缩放到内部:contain)
background-size:500px 500px;	背景图片大小(px/%/auto/自动缩放到覆盖:cover/自动缩放到内部:contain) 更多
list-style: square inside url('/i/arrow.gif');	设置所有的列表属性
list-style-type: square;	设置列表标记
cursor: pointer;	鼠标变变变 auto:I crosshair:+ pointer:手掌指着 move:四个夹头 text:I wait:加载中 help:?

*******************************************************************************************************************************

其它

---

Flex 布局语法教程

Flex 布局语法教程

---

微信图片_不双击放大

其他方法

img{ pointer-events: none; }

---

去掉谷歌浏览器黄色

outline: none;  /*去掉谷歌浏览器黄色 边框*/
-webkit-box-shadow: 0 0 0 400px #FFF inset !important;  /*去掉谷歌浏览器黄色 内阴影方式*/
-webkit-text-fill-color: #666666;  /*去掉谷歌浏览器黄色 字体*/

---

苹果 IOS 输入框内阴影

input{ -webkit-appearance: none; }

---

placeholder颜色

input::-webkit-input-placeholder {color: #999;}
input::-moz-placeholder { color: #999;} /* Mozilla Firefox 19+ */
input:-moz-placeholder { color: #999; } /* Mozilla Firefox 4 to 18 */
input:-ms-input-placeholder { color: #999; } /* Internet Explorer 10-11 */

---

对齐&居中

line-height: 30px;                   //行高 垂直居中
vertical-align: text-top;            //内部元素对齐方式

水平居中
	text-align:center;
	margin:0 auto;(一定要设置元素宽度)

相对定位，父元素left:50%;子元素left:-50%;相对自己的长度减回50%

CSS3的flexbox，display:flex;



text-align: center;
line-height: 50px; /*能确定文字的长度才能使用，否则容易变形*/

---

弹性布局

display: -webkit-flex; /* Safari */
-webkit-justify-content: space-around; /* Safari 6.1+ */
display: flex;
justify-content: space-around;
/* https://www.w3school.com.cn/cssref/pr_box-flex.asp */

---

旋转 2D/3D

http://www.w3school.com.cn/cssref/pr_transform.asp

transform:rotate(90deg);
-ms-transform:rotate(90deg);     /* IE 9 */
-moz-transform:rotate(90deg);    /* Firefox */
-webkit-transform:rotate(90deg); /* Safari 和 Chrome */
-o-transform:rotate(90deg);  /* Opera */

---

字体过长自动省略

自动宽度

外部

display: -webkit-flex;
-webkit-flex-direction: row-reverse;
display: flex;

目标

overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
flex-grow: 1.0;
width: 5px;

单行

width: 17.5rem;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;

2行

overflow:hidden; 
text-overflow:ellipsis;
display:-webkit-box; 
-webkit-box-orient:vertical;
-webkit-line-clamp:2; 

---

图片变灰

.gray {     
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}

---

英文自动换行

word-wrap: break-word;
word-break: break-all;

---

*******************************************************************************************************************************

1. 使用

内联样式 单个标签

<p style="color: blue; margin-left: 20px;">This is a paragraph.</p>

---

内部样式 单个文件

<head>
    <style type="text/css">
        body { 
            background-color: yellow;
        }
        h1 {
            color: red;
        }
        p {
            color: blue;
        }
    </style>
    <!-- <body>背景颜色:黄色、<h1>颜色:红色、<p>颜色:蓝色 -->
</head>

---

外部样式 引用文件

CSS 放在 JavaScript 的 上面

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head> 

---

关于CSS 阻塞渲染

<link href="index.css" rel="stylesheet"><!-- 正常引用 会加载并阻塞 -->
<link href="print.css" rel="stylesheet" media="print"><!-- 设置了媒体类型，会加载但不会阻塞，print 声明只在打印网页时使用-->
<link href="other.css" rel="stylesheet" media="(min-width: 30em) and (orientation: landscape)"><!-- 提供了媒体查询，会在符合条件时阻塞渲染-->

---

动态引用

const style = document.createElement("link"); //动态创建css
style.rel = "stylesheet";
style.href = "index.css";
document.head.appendChild(style); // Chrome不阻塞，其他未知

---

*******************************************************************************************************************************

2. CSS选择器

span{}          /* 所有 span 项 */
.omg{}          /* class 为 omg 的项 */
#omg{}          /*   id  为 omg 的项 */

.omg>a{}        /* class 为 omg 的 a 子项 */
.omg a{}        /* class 为 omg 的 a 子项 子子项 ... */

input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none;}

:first-child         第一个
:last-child          最后一个

/* nth-child 同效 nth-of-type nth-child */
/* nth-last-child 从后面数起 */
li:nth-of-type(2){background: #F00;}         /* li 的 第2 项 背景为红 */
li:nth-of-type(odd){background: #FFF;}       /* li 的奇数项 背景为白 */
li:nth-of-type(even){background: #000;}      /* li 的偶数项 背景为黑 */
li:nth-of-type(3n+0){background: #FF0;}      /* li 的 三倍数+0 项 背景为黄 3 6 9 12 15... */

a:hover{background-color:yellow;} //鼠标浮在<a>上面时 <a>的背景颜色变为黄色

input:focus{background-color:yellow;} //当<input>获得焦点时 <input>的背景颜色变为黄色

p:after{content:" - 傻逼";} //<p>卢细几</p> --> <p>卢细几 - 傻逼</p>

before  --待补充

*******************************************************************************************************************************

对齐

一个元素 垂直水平居中

/*要求：固定高宽*/
width: 20vmin; 
height: 20vmin; 
background-color: aquamarine; 

margin: auto; 
position: absolute; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0;

.BOX_相对居中 {position: absolute; z-index: 1000; top: 30%; left: 50%; height: 500px; width: 600px; margin-left: -300px; margin-top: -250px; background: #FEFEFE; border: 1px solid #F00;}

*******************************************************************************************************************************