css整理

1: 目标伪类选择器：

:target {
color: red;
font-size: 30px;
}

2: word-spacing: 10px;  /* 单词间距 针对于英文 中文无效 */

3: text-indent: 2em;  /* 此时2em 就是2个汉字的宽度 */

4: font-weight: normal;  /* 让粗体不加粗 */

5: font-style: normal; /*  让斜体 不倾斜 */

6:  选择器

input[type=text] {
color: red;
}/* 属性选择器用中括号 来表示 */

div[class^=font]  /*  class^=font 表示 font 开始位置就行了 */

div[class$=footer] /*  class$=footer 表示 footer 结束位置就行了 */

div[class*=tao] /* class*=tao *= 表示tao 在任意位置都可以 */

p::first-letter {   /* 选择第一个字 */ }

p::first-line {   /* 选择第1行 */ }

p::selection {  /* 当我们选中文字的时候，可以变化的样式(只能是字体颜色与背景颜色) */ }

div::before { /* before 和 after 在盒子div 的内部前面插入或者是内部后面插入 */
content: "俺";
}

p:nth-of-type(-n +3) : 选择前三个

选择第4到7之间的盒子，div:nth-child(n+4):nth-child(-n+7)

7: background-attachment: fixed;  /* 默认的是 scroll 滚走的 */ 

background: #000 url(images/ms.jpg) no-repeat fixed center -25px；／＊　背景缩写　＊／

background-size: 50%/contain／cover；

background: url(images/l.jpg) no-repeat left top ,url(images/3.jpg) no-repeat right bottom hotpink;　　多背景情况，用逗号隔开

８：凸起的文字　text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;

凹下的文字　text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;

凸起的盒子：box-shadow: 10px 10px 10px  rgba(0, 0, 0, .7);

９：细线表格：

table {
width: 700px;
height: 300px;
border: 1px solid red;
border-collapse: collapse; /* 合并相邻边框 */ }

10:margin: 0 auto;  /* 左右一定是auto就可以居中 */

11:border: 1px solid red; /* 解决外边距合并(塌陷)问题 */或者给父元素添加 overflow:hidden;

12:box-sizing: content-box;  /* 默认的盒子模型　宽度和高度不包括padding, border */

box-sizing: border-box;   /* padding border  不撑开盒子 */

１３：

img {
float: right; /* 浮动可以用来做文字环绕效果 */
}

１４：（１）：浮动的元素不占位置，只会影响后面的元素，不会影响前面的，（２）盒子浮动不会压住父盒子的padding，（３）具有行内块的属性，（４）：浮动元素不占有位置， 父亲没有高度，此时，底下盒子就会跑上来，这时需要清除浮动

清除浮动：

（１）加标签（２）给父元素加overflow:hidden

（３）加伪类

.clearfix:after {
content: "."; /* 内容为小点， 尽量加不要空， 否则旧版本浏览器有空隙 */
display: block; /* 转换为块级元素 */
height: 0; /* 高度为0 */
visibility: hidden; /* 隐藏盒子 */
clear: both; /* 清除浮动 */
}
.clearfix { /* ie6.7浏览器的处理方式 */
*zoom: 1;
/* * 代表ie6.7能识别的特殊符号 带有这个*的属性 只有ie6.7才执行
zoom 就是ie6.7 清除浮动的方法 */
}

（４）加双伪类

.clearfix:before, .clearfix:after {
content: "";
display: block; /* 触发bfc 防止外边距合并 */
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}

 １５：定位：加了绝对定位的盒子，margin 左右auto 就无效了

１６：

 

display: none;/*隐藏元素 不是删除 看不见了而已，但是元素一直存在页面中 但是不保留位置 block 显示*/
visibility: hidden; /* 隐藏元素 他和 display none 最大的区别是 他保留位置 visible显示*/

overflow: visible; /*默认的，超出显示 */
overflow: auto; /*自动 超出就显示滚动条，不超出不显示 */
overflow: scroll; /*一直显示滚动条 */
overflow: hidden; /* 溢出隐藏 */

text-indent: -20000px; 隐藏文字

１７：cursor: pointer; 小手 cursor: move; 四角箭头 cursor: text; 插入光标 cursor: default; 小白

１８：表单

轮廓线

input {
/* outline: 5px solid red;
border: 1px solid blue; */
outline: 0; /* 取消轮廓线 */
}

textarea {
resize: none; /* 防止文本域拖拽 */
outline: none;/* 取消轮廓线 */
}

１９：img { /* 行内块 */解决图片与底部有缝隙
/* vertical-align: baseline; 默认的基线对齐 */
vertical-align: middle; /* 手动改为中线对齐 ，对于块级元素无效*/

vertical-align: top;  /* 用的最多的 */
}

２０：英文状态下

word-break: break-all; /* 允许单词拆开显示， */
word-break: keep-all; /* 不允许拆开单词显示 除非连字符特殊 连字符： z-index */

汉字状态下：

white-space: nowrap; /* 首先先需要添加这句话 强制一行*/
overflow: hidden; /* 其次必须有这句话 */
text-overflow: ellipsis; /* 超出的部分，省略号代替 　clip; 直接裁剪 */

 

２１：字体图标：一般保存svg格式，前端上传生成兼容性字体文件包，再引用

@font-face { /* 电脑中没有的字体，我们需要声明 */
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}

使用方法１：

div::before {
font-family: "icomoon"; /* 一定保证和上面的 font-family: 相同 */

content: "\e91b";
font-size: 100px;
color: hotpink;

}

<div></div>

使用方法２：

span {
font-family: "icomoon"; /* 一定保证和上面的 font-family: 相同 */
font-size: 100px;
color: pink;
}

<span>□</span>

22: 低版本的浏览器可以单独做一个页面提示客户升级浏览器

23: html5兼容ie9以上版本

24:height:auto;自动跟随高度一起缩放

２５：div:hover::before {  /* 鼠标经过之后 前面插入一个伪元素 */｝

２６：

<meta name="description" content="网站说明" />
<meta name="Keywords" content="关键词" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> 
<!-- 引入css初始化文件 -->
<link rel="stylesheet" href="css/normalize.css" />
<!-- 头部和底部 结构基本相同 我们做基本的公共样式 -->
<link rel="stylesheet" href="css/base.css" />
<!-- 我们做专属的首页样式 -->
<link rel="stylesheet" href="css/index.css" />

２７：  ./是当前目录           ../是父级目录         /是根目录

２８：　ul: list-style: none

２９: 

a,a:hover{
text-decoration: none;
color: #666;
}

３０: <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />网站图标

３１：渐变色：　background: linear-gradient(to right, red, blue);