css学习笔记

css:层叠样式表

1样式

1.1背景backgrand:

		//背景色
		background-color: aqua;
    //背景图片
background-image: url('http://by-image.oss-cn-shanghai.aliyuncs.com/Pre/drumkit/cover.jpg');
    //背景缩放
    background-size: cover;(如果定义了长宽,按比例缩放)
    //背景循环(如果设置为no-repeat,则不循环,按页面比例大小缩放)
    background-repeat: no-repeat;

1.2文本text

 		//首行缩进
 		text-indent:50px;
 		//文本居中
    text-align: center;
    //每个单词间隔
    word-spacing: 10px;
		//每个字符间隔
		letter-spacing: 10px;
		//中间划线
    text-decoration:line-through;

1.3字体 font

		//字体大小
		font-size:30px;
		//字体粗度
    font-weight:500;
    //风格 (斜体,粗体,下划线,)
    font-style:italic;
    //字体
    font-family:'Times New Roman', Times, serif;
    //边框
    border:1px dashed black;

1.4轮廓border

    //边框
    border:1px solid black;
    
    //边缘阴影渐变
    box-shadow:1px 1px 16px #red
    

2盒子模型

    //外边距(扩展出来的是背景)
    margin-left:100px;
    margin-right:100px;
    margin-bottom:100px;
    
    //内边距(扩展出来的是本身)
    padding-top:50px;
    padding-left:50px;
    padding-bottom:50px;
    padding-right:50px;
    
    //边框
    border:1px solid black;
    
    //边缘阴影渐变
    box-shadow:1px 1px 16px #red
    

3选择器

伪类选择器:某个元素的虚拟状态
例如对于a标签
a:link(默认状态)
a:hover(鼠标放上去的状态 状态选择器)
a:active(鼠标点下去的时候)
a:visit(访问后)  
(同时使用时具有多种状态时会有层叠性,会适用最后一个状态覆盖,因此对link的排布有要求,link,visit,hover,visit)
first-child,nth-child

3.2优先级

内联>id选择器>类选择器>标签选择器

1. 类型选择器（例如，h1）和伪元素（例如，::before）
2. 类选择器 (例如，.example)，属性选择器（例如，[type=“radio”]）和伪类（例如，:hover）
3. ID 选择器（例如，#example）

3.3伪元素

不是用html来构建,用css来构建 ,在所选元素最前面和最后面加上伪元素

默认为行内元素,但是可以改为block

相当于在css里加了新元素

.content::before{

content:' before'或content:''或content:'after'

}

主要用来装饰,

4.css定位

4.1static:

1. position: static;默认位置
2. position: relative; 相对定位,相对于默认位置进行偏移(相对于默认位置)
3. position: absolute; 绝对定位 绝对定位会浮起来 原有的占位消失,下面会跳上来,如果父类为static或者不给,绝对定位相当于浏览器位置 ,如果不是static就绝对位置于父类位置(绝对于绝对对象)
4. Margen: 0 auto 元素居中
5. Border-radius:50%

5flote:浮动 div横向排列

浮动的框可以一直向左向右 直到遇到另一个浮动的框

flote:left

5.1基本概念:

1、什么是浮动定位
如果将元素的定位方式设定为浮动定位的话，那么它将具备以下特征
1、浮动元素 会被排除在文档流之外-脱离文档流，不占据页面空间，其他未浮动元素要上前补位
2、浮动元素会停靠在父元素的左边或右边，或平级的其他已浮动元素的边缘上
3、浮动元素依然位于包含框之内
4、浮动定位解决的问题-让多个块级元素在一行内显示

5.2、属性

属性：float
取值：
1、none
默认值，无浮动定位
2、left
左浮动，让元素停靠在父元素的左边，或紧挨着左侧已有的浮动元素
3、right
右浮动，让元素停靠在父元素的右边，或紧挨着右侧已有的浮动元素
右浮动，让元素停靠在父元素的右边，或紧挨着右侧已有的浮动元素

5.3浮动引发的特殊效果

1、当父元素的宽度已显示不下所有的已浮动子元素时，那么最后一个子元素将换行显示
2、元素一旦浮动起来之后，元素的宽度将变成自适应(内容决定宽度)，前提：不指定元素宽度的情况下
3、元素一旦浮动起来之后，都将变成块级元素，尤其对行内元素影响较大
块级元素：允许修改尺寸
行内元素：不允许修改尺寸
4、文本，行内元素，行内块元素时采用环绕的方式来排列的，是不会被浮动元素压在底下的

5.2清浮动

 								再需要清浮动的父类上加入clearfix即可
 								.clearFix{
                    content: "";
                    clear: both;
                    display: block;
                }
                原理类似再浮动类周围加上一圈clearfix

Overflow: aoto,hidden,visible,

Z-index:图层顺序

6布局

居中

内联元素和字相同:text-alian,水平居中(行内元素)

单行文字垂直居中:将line-height设为100%

块级元素水平居中:margin 0 auto

块级元素垂直居中:top :50% tranform: translateY(-50%) 下移50后 再以自身y轴上移自身的50

7动画

transform:变换

属性	作用
transform:	translateX,Y移动 rotate旋转 scale(1.2)放大缩小
transition:	all 0,5s 2s easy过度时间,可惜选择过度属性(all指所有属性)
transition-property	监听属性
transition-duration	时间
transition delay	延迟时间
transition time funtion:	时间变化函数有bezier曲线 匀速等待

Animation:动画

动画 定义

 @keyfeame name{

	0%{}

	100%{}

	(没百分之1都可以设置状态)

}

使用方式:animation: name time 次数 循环方式 (结束时最后一帧)

名词	作用
none	默认第一帧
backwards	回到第一帧
forwords	结束时最后一帧

一些注意点

定位和flote的层位置,具体在哪层的详细(例如flote一定在当前要票的层 对父层框漂浮)

百分比定长增减 calc(100% - 100px)

注意-俩边空格