css3 学习笔记

css3

样式

背景

• background

• background-img

• background-repeat

• background-size

background-img:url() url();  // 背景图,可以同时设置两个背景图
background-repeat:no-repeat,repeat; // 第一个不平铺，第二个平铺
background-position: center top,center center; // 第一个在上方居中，第                                                //二个中间居中
                                               // 也可以,与上方一致
background: url() no-repect center top,url() repeat center center
// ...
background-size: 100% 100%; // 在指定的div大小下，背景正常显示，等比缩放
background-size: contain; // 与上面的属性一样，但是要指定的 with 和                               //height大小，如果width:100%;height:100% 							//则不生效
background-size:cover;  //与上面不同，可以用width:100%;height:100%，并							//且是响应式的

background-origin 属性规定 background-position 属性相对于什么位置来定位。

• background-origin : border-box | content-box | padding-box
  • padding-box 背景图像相对于内边距框来定位。【默认】
  • border-box 背景图像相对于边框盒来定位。
  • content-box 背景图像相对于内容框来定位。

background-clip属性指定背景绘制区域。

• background-clip border-box|padding-box|content-box;
  • border-box 背景绘制在边框方框内（剪切成边框方框）【默认】
  • padding-box 背景绘制在衬距方框内（剪切成衬距方框）
  • content-box 背景绘制在内容方框内（剪切成内容方框）

边框

• box-shadow 边框阴影【水平阴影 垂直阴影 模糊程度 阴影大小 阴影颜色】
• border-radius 设置圆角 【左上 右上 右下 左下 (顺时针方向)】
• border-image-source 设置边框图片
• border-image-repeat 用于图像边界是否应重复（repeated）、拉伸（stretched）或铺满（rounded）
• border-image-slice 属性指定图像的边界向内偏移。

应用效果：

文本效果

• text-shadow 文字的阴影【水平阴影，垂直阴影，模糊程度，阴影颜色】

• white-space 属性设置如何处理元素内的空白。

  • normal 空白会被浏览器忽略。
  • pre 空白会被浏览器保留。其行为方式类似 HTML 中的

     标签。

  • nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
    标签为止。
  • pre-wrap 保留空白符序列，但是正常地进行换行。
  • pre-line 合并空白符序列，但是保留换行符。
  • inherit 规定应该从父元素继承 white-space 属性的值。

• overflow 规定当内容溢出元素框时发生的事情。

  • visible 内容不会被修剪，会呈现在元素框之外。【默认】
  • hidden 内容会被修剪，并且其余内容是不可见的
  • scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
  • auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
  • inherit 规定应该从父元素继承 overflow 属性的值

• text-overflow 规定当文本溢出包含元素时发生的事情。

  • clip 修剪文本
  • ellipsis 显示省略符号来代表被修剪的文本
  • string 使用给定的字符串来代表被修剪的文本

练手—超出框内省略显示

选择器

属性选择器

/*样例*/
/*标签[属性=值]*/
input[type=text]{
	background-color:red;
}
a[data-title=hello]{
    color;red;
}

伪类选择器

/*样例*/
a:link{
	/*未被访问过标签的样式*/
}
a:visited{
    /*访问过后的显示样式*/
}
a:hover{
    /*鼠标悬停的时候的显示样式*/
}
a:active{
    /*鼠标按住的时候显示的样式*/
}

伪元素选择器

p::after{
    content:'很帅'; /*在 p 标签的后面添加内容*/
    color:red; /* 单独设置颜色 */
}
p::before{
    content:'很帅'; /*在 p 标签的前面添加内容*/
    color:red; /* 单独设置颜色 */
}

后代选择器

ul li:first-child{
    color:red; /* 第一个 li 元素显示红色 */
}
ul li:last-child{
    color:red  /* 最后一个 li 元素显示红色 */
}
ul li:nth-child(x){
	color:red; /* 第 x 个元素显示红色*/
}
ul li:nth-child(2n){
    color:red; /* 偶数元素显示红色 */
}

渐变

background:linear-gradient(red,blue,yellow,green); /* 默认从上往下 */
background:linear-gradient(to right,red,blue,yellow,green)/* 从左往右 */
background:linear-gradient(to buttom right,red,blue,yellow,green)/* 从左上角往右下角 */

径向渐变–均分分布

background:radial-gradient(red,green,blue)/* 标准语法 */

径向渐变–不均分分布

background:radial-gradient(red 5%,green 15%,blue 60%) /* 标准语法 */

设置形状

background:radial-gradient(circle,red,yellow,black 50%) /* 标准语法 */

2D

• transform

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

transform:translate(30px,30px)  /* 水平坐标平移 【x,y】*/
transform:rotate(30deg)  /* 顺时针旋转 */
transform:rotate(-30deg) /* 逆时针旋转 */
transform:scale(2,3)  /* 定义 2D 缩放转换。 x轴 2 倍，y轴3倍 【x,y】*/  
transform:skew(30deg,20deg) /*定义沿着 X 和 Y 轴的 2D 倾斜转换。【x,y】*/

3D

…

过渡

• transition-property
• transition-duration
• transition-timing-function
  • ease 默认 慢->快->慢
  • ease-in 慢速开始
  • ease-out 慢速结束
  • ease-in-out 慢->快->慢
  • linear 匀速
• transition-delay

**注释：**请始终设置 transition-duration属性，否则时长为 0，就不会产生过渡效果。

transition-propery /*规定设置过渡效果的 css 属性名称*/
transition-duration /*规定完成过渡效果需要多少秒或者毫秒*/
transition-timing-function /*规定速度效果的速度曲线*/
transition-delay /*定义过渡效果何时开始*/

动画

/* 动画的起始和终点位置 
  change 为名称（可修改）
*/
@keyframes change{
    from{
        background-color:red;
    }
    to{
        background-color:green;
    }
}
/* 动画的不同时期的效果 
	move 为名称（可修改）
*/
@keyframes move{
    0%{
        background-color:red;
    }
    25%
        background-color:green;
    }
    75%
        background-color:yellow;
    }
    100%
        background-color:blue;
    }
}

• animation 使用简写属性，将动画与 div 元素绑定
  • animation-name 规定需要绑定到选择器的 keyframe 名称。。
  • animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
  • animation-timing-function 规定动画的速度曲线。
  • animation-delay 规定在动画开始之前的延迟。
  • animation-iteration-count 规定动画应该播放的次数。
  • animation-direction 规定是否应该轮流反向播放动画。

网页布局

多列布局

column-count:3   /* 指定需要分割的列数 3 列 */
column-gap:50px;  /* 指定列与列之间的间隙 */
column-rule:1px solid #bbb  /* 显示分割线 */

flex 弹性布局

在父元素中设置弹性布局。其子元素都会按照弹性布局来显示

display:flex 
flex-direction:row; /* 按照左纵轴为主轴 */
flex-direction:row-reverse;/* 按照右纵轴为主轴 */
flex-direction:col; /* 按照上横轴为主轴 */
flex-direction:row-reverse; /* 按照下横轴为主轴 */
flex-wrap: wrap;  /* 超出部分是否换行，默认不换行（nowarp） */

justify-content: flex-start[左对齐] | flex-end[右对齐] | center[水平居中] | space-between | space-around/* 定义项目在主轴上的排列方式 */

align-items: stretch[默认] | flex-start[上方对齐] | flex-end[下方对齐] | center[垂直居中]/* 定义项目在垂直交叉轴的排列方式 */
align-content: /* 定义多根轴线的对齐方式 */

子元素的布局

/* 定义项目的排列方式，数值越小，排列月往前 */
order:2

/* 定义子元素的放大比例 */
/* 默认值为0 按照默认的大小 存在剩余的空间，子元素也不放大*/
/* 如果给子元素设置flex-grow为 1，则将等分剩余的空间*/
flex-grow:0; 

/* 定义子元素的缩小比例 */
/* 默认值为 1 空间足够大的时候安装默认的大小显示；空间不足的时候等分空间*/
/* 设置为0时，不等分缩小，按照默认的大小 */
flex-shrink:1

/* 定义项目在主轴上的占据的空间的大小 */
flex-basis:500px

快捷键

flex:auto;
/* flex-grow:1  flex-shrink:1  flex-basis:auto  */
flex:none;
/* flex-grow:0  flex-shrink:0  flex-basis:auto */
flex:1
/* flex-grow:1  flex-shrink:1  flex-basis:0%  */