CSS‘样式’基础用法与案例

1、外部样式表

方式1&＃xff1a;
方式2&＃xff1a;&＃xff08;常用&＃xff09;


2、伪类选择器

a:hover{属性&＃xff1a;属性值} 鼠标悬停

3、css常用属性 

例&＃xff1a;半圆&＃xff08;border&＃xff09;

4、显示省略号

overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
#注释&＃xff1a;固定的宽度

5、样式清除

*{margin:0,padding:0}

6、CSS三角形

.box {width: 0;height: 0;border: 20px solid transparent;border-bottom: 20px solid skyblue;}

7、CSS水平垂直居中

1.基于浏览器窗口
.box { height: 200PX;width: 200PX;background-color: skyblue;position: absolute; top: 50%;left: 50%;margin-top: -100px;margin-left: -100px;}2.基于父盒子嵌套子盒子/*方式一*/.box { //父盒子height: 400PX;width: 400PX;background-color: skyblue;margin: 0 auto;position: relative; //必写}.box2 { //子盒子width: 200px;height: 200px;background-color: tan;position: absolute;top: 200px;left: 200px;margin-left: -100px;margin-top: -100px;}/*方式二*/.box1 { position: relative;width: 200px;height: 200px;background-color: pink;}.box2 { position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;width: 100px;height: 100px;background-color: skyblue;}/*方式三*/.box1 { width: 200px;height: 200px;background-color: pink;}.box2 { width: 50%;height: 50%;transform: translate(50%,50%); //css3 --- 2D平移background-color: skyblue;}3.弹性盒子 display:flex
.box1 {width: 200px;height: 200px;background-color: skyblue;display: flex;justify-content: center;align-items: center;}
.box2 {width: 100px;height: 100px;background-color: tan;}

8、精灵图

好处 1.减少服务器的请求次数&＃xff0c;从而提高页面的加载速度
         2.减小图片的体积
用法  backgrund-position: x轴 y轴

9、宽高自适应

min-height //最小高度&＃xff08;常用&＃xff09;
max-height
min-width
max-width盒子根据窗口的大小进行自适应
body,html { height:100% }calc() ---动态计算长度值&＃xff08;支持&＃xff1a;&＃43;、-、*、/ 运算&＃xff09;
例如&＃xff1a;width: calc(100% - 200px)

10、清除浮动

方法1&＃xff1a; 给父元素添加 overflow:hidden&＃xff08;缺点&＃xff1a;会隐藏溢出的元素&＃xff09;
方法2&＃xff1a; 在浮动的元素下方添加空块元素,并给该元素添加声明 clear:both&＃xff08;缺点&＃xff1a;添加无意义的空标签&＃xff0c;不利于代码可读性&＃xff0c;且降低了浏览器的性能&＃xff09;
方法3&＃xff1a; 万能清除浮动方法&＃xff08;父元素添加伪元素 ::after&＃xff09;选择器::after{height:0,content:"",clear:both,display:block,overflow:hidden / visibility:hidden}visibility:hidden //占位隐藏display:none //不占位隐藏

11、伪元素

选择器::before{ //在.....之前content:"内容"}
选择器::after{ //在.....之后content:"内容"}

12、CSS3---基础

1. 层级选择器

• 子代选择器&＃xff1a;    >
• 兄弟选择器&＃xff1a;    &＃43;  (当前元素后面的第一个兄弟)
•                           ~  (当前元素后面的所有兄弟)
• 属性选择器 &＃xff1a;   [ 属性名 ]
•                          标签名[ 属性名 ]
• 结构伪类选择器&＃xff1a; X:first-child&＃xff08;第一个元素&＃xff09;
                                X:last-child&＃xff08;最后一个元素&＃xff09;
                                X:nth-child(n)&＃xff08;索引值为n的子元素 2n/even:偶数&＃xff0c;2n-1/odd:奇数&＃xff09;
• 目标伪类选择器&＃xff1a;  E:target 

例 &＃xff1a;简易版---手风琴

a{ //cssdisplay: block;}div[id] { /* 属性选择器 */display: none;}div[id]:target { /* 目标伪类选择器 */display: block;}

2. 怪异盒模型 ( box-sizing )

•   标准盒模型   content-box
•   怪异盒模型   border-box

3. 渐变

• 线性渐变 --- background: linear-gradient ( to 方位 &＃xff0c;red , green ) 
  • 支持多颜色渐变
  • 支持方向&＃xff0c;( to left    或者   to bottom right )  
  • 支持角度的写法   ( 数值deg )
•  径向渐变 --- background: radial-gradient ( circle&＃xff0c; red &＃xff0c;green  );
  • 颜色后面添加百分比(%)&＃xff0c;控制过渡的展示比例&＃xff08;注&＃xff1a;没有渐变效果&＃xff09;
  • circle&＃xff1a;渐变为最大的圆形
• 线性重复渐变 --- background: repeating-linear-gradient(red,green 10%); 
• 径向重复渐变 --- background: repeating-radial-gradient(red,green 10%); 

例 &＃xff1a;太极 --- 案例

4. 过渡&＃xff08;transition&＃xff09;

• transition&＃xff1a;all/具体属性值  运动时间s/ms  动画类型  延迟时间s/ms
  • all&＃xff1a; 所有属性
  • linear/匀速、ease/逐渐慢下来、ease-in/加速、ease-out/减速、ease-in-out/先加速后减速
  • 谁要过渡&＃xff0c;给谁加

 5. 2D&＃xff08;transform&＃xff09;

• 改变中心点位置&＃xff1a;transform-origin&＃xff1a;位置方向(top) 位置方向(left)  &＃xff08;默认&＃xff1a;center&＃xff09;

 6. 关键帧动画&＃xff08;animation&＃xff09;

• animation&＃xff1a;动画名称 持续时间  过渡类型/linear  循环次数/infinite  循环中是否反向运动  延迟时间 保留动画最后状态&＃xff1b;
• 动画停止&＃xff1a;animation-play-state&＃xff1a;paused   &＃xff08;结合鼠标hover&＃xff0c;只能单一写&＃xff09;
• 过渡类型&＃xff1a;steps(1,end)&＃61;&＃61;&＃61;steps-end / steps(1,start)&＃61;&＃61;&＃61;steps-start&＃xff08;步数---直接进行关键帧跳跃&＃xff09;
  • end&＃xff1a;保留当前帧&＃xff0c;看不见最后一帧、start&＃xff1a;保留下一帧&＃xff0c;看不见第一帧
• 循环次数&＃xff1a;&＃xff08;infinite&＃xff1a;无限次&＃xff09;
• 保留动画最后状态&＃xff1a;forwards
• 循环中是否反向运动&＃xff1a;&＃xff08;reverse&＃xff1a;反方向&＃xff09;、&＃xff08;normal&＃xff1a;正方向&＃xff09;

• /*声明动画*/
&＃64;keyframes 动画名称{from{}to{}
}&＃64;keyframes 动画名称{0%{}...100%{}
}


7. 3D&＃xff08;transform&＃xff09; 

• transform-style: preserve-3d;    // 开启css3d模式
• perspective&＃xff1a;数值   // 景深-位移

 3D旋转正方体-案例

8. 网格布局&＃xff08;display&＃xff1a;grid&＃xff09;

• display&＃xff1a;grid     // 块级网格
• display&＃xff1a;inline-grid     // 行内块级网格 --- 了解
• grid-template-rows&＃xff1a;   //规定行
• grid-template-columns&＃xff1a; //固定列

 网格布局-案例