前端学习日志(CSS)

1.17

主流浏览器及其内核
IE trident
Chrome webkit/blink(2014)
Firefox Gecko
Opera presto
Safari webkit
cascading style sheet层叠样式表（css）
1.行间样式

  <div style="border: 0;
    width: 10px;
    background-color: brown; "></div>

2.页面级css

 <style  type="text/css">
        .br{
            background-color: red;
        }

    </style>

3.外联式

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

异步加载css文件（外联式）
选择器
1.id选择器

#only{
    background-color: red;
}

一个元素只能有一个ID
2.class选择器

.only{
    background-color: greenyellow;
}

一个元素可以有多个class
3.标签选择器

div{
    background-color: red;
}

选择了全部的该类标签
4.通配符选择器

*{
    margin: 0px;
    padding: 0px;
}

5.伪类选择器`

input:hover{
    color: red;
}

6.属性选择器

div[class="only"]{
    background-color: yellow;
}

7.父子选择器

div span{
   background-color: red; 
}

父子关系成立即可
8.直接子元素选择器

div>span{
   background-color: red; 
}

9.并列选择器

div.only{
   background-color: red; 
}

10.分组选择器

em,strong,div{
    background-color: rebeccapurple;
}                         

11.伪元素

span::after{
	content:"";
	clear:both;
	dispaly:block;
}

伪元素是行级元素（inline）

优先级
行间样式>id>class|属性>标签>*
css权重
！important infinity
行间样式 1000
id 100
class|属性|伪类 10
标签|伪元素 1
通配符 0

其中的权重为256进制
注：若权重一样，则后面的会覆盖前面的.
font-size；16px:字体大小；设置的是字体的高
font-weight:bolder/bold/normal/lighter(900)；字体粗细
font-style:italic/normal(斜体/正常)
font-family:arial;字体
color:#f40/grb(0,255,255)
border:100px solid black;
border-width;
border-style;
border-color;
border-radius:10px;
height:100px;内容高度
width:100px;
text-align:center/right/;对齐方式
line-height;10px:单行文本所占高度
text-indent;2em;缩进1em=1*font-size
text-decoration:none/underline
cursor:pointer/help;
list-style:none;
盒模型
盒子壁：boder
内边距：padding
盒子内容：content(height+width)
外边距：margin
1.18
定位
绝对定位
absolute

 position: absolute;
    top:100px;
    left: 100px;

脱离原来的位置进行定位，每一个absolute都有自己的层
相对与最近的有定位的父级进行定位，若没有，则相对与文档定位

相对定位

 position: relative;

保留原来位置进行定位
相对与自己原来的位置进行定位

广告定位

 position: fixed

最好让relative成为参照物，用absolute进行定位
Z-index:1;层数
经典的两栏布局

.right{
    position: absolute;
    width: 100px;
    height: 100px;
    right:0px;
    opacity: 0.5;
    background-color: #fcc;

}
.left{
    margin-right: 100px;
    height: 100px;
    background-color: #123;
}

两个bug
1.margin塌陷
垂直方向父级和自己同时运动，即为粘连在一起，两者取最大值
解决办法：
BFC block formate context
触发bfc（改变了渲染规则）

如何触发一个盒子的BFC
1.position:absolute;
2.display:inline-block
3.float:right/left;
4.overflow:hidden;
2.margin合并
垂直方向会合并
一般不解决。
float浮动模型

float:right/left;

1.浮动元素会产生浮动流。
所有产生了浮动流的元素，块级元素看不到他们。
产生了bfc和带有inline属性的可以看到。

clear:both;

清除浮动流
必须是块级元素才能用clear;

span::after{
	content:"";
	clear:both;
	dispaly:block;
}

凡是设置了position:absolute或float:left/right
系统从内部转化为inline-block;
文字溢出处理
溢出容器，打点展示
1.单行文本

p{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

开发常用的三件套
2.多行文本
点是自己写的。。。。
移动端可实现

   height: 100px;
    width: 200px;
    line-height: 50px;
    overflow: hidden;

计算出lineheight和容器高度

背景图片

  background-image: url();
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: center;

图片代替文字

   height: 100px;
    width: 200px;
    text-indent:200px;
    overflow: hidden;
    white-space: nowrap;

其中的方法为将其进行缩进，并在有图片的时候进行隐藏。

a{
    display: inline-block;
    background-image: url(https://gw.alicdn.com/imgextra/i3/O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png);
    height:0px;
    width:190px;
    background-size: 190px 90px;
    border: 1px solid black;
    text-decoration: none;
    color: #424242;
    padding-top:90px;
    overflow:hidden;


}

第二种为将背景图片放入padding中，当网速较慢时，会屏蔽掉css，则文字会显现。
带有文字属性的css子元素若没有设置，则会和父元素一样font-size
css3
线性渐变

.box{
			background:linear-gradient(to bottom right,red,blue);
			height: 200px;
			width: 200px;
		}

-ms//兼容ie

-webkit-兼容safri and chrom

-moz-兼容firefox

-o- 兼容opera

css2D变换

.box:hover{
			transform: translate(10px,10px);//水平变换
			transform: rotate(45deg);//变换角度
			transform: scale(2,3);//宽 高
			transform:skew(10deg，0deg);//x轴倾斜
		}

.father{
			height: 500px;
			width: 500px;
			margin: 100px auto;
			perspective: 800px;
			/*视线*/
			perspective-origin: center center;
			/*父元素必须设置*/
			transform-style: preserve-3d;

		}
		.box{
			background:-webkit-linear-gradient(left,red,blue);
			height: 200px;
			width: 200px;
		}
		.box:hover{
			/*transform: translate(10px,10px);*/
			transform: rotateX(45deg);

			 /* 设置过度属性 */
            transition-property: background-color;
            /* 设置过度时间 */
            transition-duration: 3s;
            /* 过渡的函数 */
            /* ease 慢快慢 linear 匀速 */
            transition-timing-function:linear;
            transition-delay: 0.2s;
            transition: all 2s linear 0.2s;

过度属性

 @keyframes change {
            0%{
                background-color: red;
            }
            100%{
                background-color: skyblue;
            }
        }
        .box{
            height: 200px;
            width: 200px;
            background-color: greenyellow;
            animation-name:change;
            animation-duration: 2s;
            animation-timing-function: linear;
            animation-delay: 0.1s;
            animation-iteration-count: infinite;/*默认一次*/
        }
        .box:hover{
            background-color: black;
            animation-play-state: paused;
    </style>

多列布局

x{
            /* 指定分割列数 */
            column-count: 3;
            /* 分割的距离 */
            column-gap:50px; 
            /* 分割线 */
            column-rule: 1px solid red;

flex布局
在父元素上设置一个dispaly:flex则子元素会进行弹性布局

display: flex;
            /* 决定主轴的方向 */
            flex-direction: row-reverse;
            /* 决定项目在主轴上是否换行 */
            flex-wrap: nowrap;
            /* 他是flex-directionn and flex-wrap的简写方式 */
            flex-flow: row nowrap;
            /* 定义当前项目在主轴上的排列方式*/
              /* 水平垂直居中 */
            justify-content: space-between;
            align-items: center;
            /* 水平垂直居中 */
            flex-wrap:wrap ;
            align-content: space-between;

order:0数值越小，则会在越在前面
子元素的放大比例flex-grow: 1;默认为0
子元素的缩小比例flex-shrink:0默认为1
定义项目在主轴上的空间大小flex-basis:500px
flex flex-grow flex-shrink flex-basis的简写
flex:1 1 1 0%等均匀的分布
flex:none 0 0 auto