css 学习笔记2

Ll Lin

已于 2023-10-26 11:39:48 修改

阅读量44

点赞数

分类专栏： web前端文章标签： css 学习笔记

于 2023-07-25 18:21:36 首次发布

本文链接：https://blog.csdn.net/m0_74852435/article/details/131917813

版权

web前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.盒子模型

css会把所有html元素看作盒子

组成部分：

盒子大小：content 内容区域+padding 内边距+border 边框

（margin外边距不会影响盒子大小）

2.边框

border

 div {
            width: 300px;
            height: 300px;
            background-color: pink;
            border: 20px solid black;
        }

（这里盒子大小为340*340 ，即内容加上边框的大小）

3.内边距

内容与边框的距离

padding

padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;

padding值会改变盒子的大小，padding的值不能为负值，行内元素的左右内边距可以准确设置

连写：

两个值时，第一个值代表上下的padding值，第二个值代表左右的padding值

padding: 10px 50px;

三个值时，第一个值代表上，第二个值代表左右，第三个值代表下

padding: 10px 40px 50px;

四个值时：上右下左（顺时针方向）

padding: 10px 20px 30px 40px;

4.外边距

两个元素之间的距离

margin

margin-bottom: 20px;
margin-right: 20px;
margin-left: 20px;
margin-top: 40px;

实现元素的水平居中（选择的所有元素）：

margin: 0 auto;

连写与padding相同

5.外边距塌陷

父盒子里，第一个子盒子的margin-top值会被父盒子抢掉

解决方法：

1.给父元素加边框

border: 1px solid black;

2.给父元素添加内边距

padding: 10px;

3.溢出隐藏

overflow: hidden;

6.避免padding将盒子撑大

box-sizing: border-box;

内容部分会变小

7.flex布局

通过添加 display: flex; 属性可以将容器变为弹性盒子，盒子内的子元素会在一行排列显示

改变子元素排列方式：

flex-direction

flex-direction: row-reverse;

主轴对其方式

justify-content

justify-content: space-between;
 /* space-between:两边贴边，中间评分剩余空间 */
/* space-around：平分在子项的两边 */

允许换行

 flex-wrap: wrap;

侧轴单行

 align-items: center;

侧轴对齐方式

align-content

align-content: center;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;

order

值越小，排列越靠前；没有设置的子项目，默认为0

order: -1;

8.去除标签默认边距

在未设置边距时会有默认边距影响布局，可以通过通配符选择器去除

* {
    margin: 0;
    padding: 0;
}

9.字体

通过 @font-face 引入字体，src: url 指向字体地址

@font-face {
    font-family: 自定义字体名;
    src: url(./字体原名.ttf);
}

10.渐变

background-image

background-image: linear-gradient(to right, red, pink, green, blue);
/* 重复线性渐变： */
background-image: repeating-linear-gradient(45deg, yellow, pink, red);
/* 镜像线性渐变： */
background-image: radial-gradient(red, pink, blue, greenyellow);

11.浮动

解决文字环绕图片的问题

元素浮动后会脱离文档流（文档流是文档中可显示对象在排列时所占用的位置）

浮动后会影响后面的元素，前面的元素不受影响

设置浮动：float

float: left;

清除浮动：clear

clear: both;

12.2d转换

transform

移动

translateX、translateY 单独写会发生覆盖

transform: translateX(100px) translateY(100px);
/* 复合：x ，y */
transform: translate(50px, 50px)

旋转

/* 绕X轴旋转 */
transform: rotateX(45deg);
/* 绕Y轴旋转 */
transform: rotateY(45deg);
/* 绕Z旋转 */
transform: rotateZ(45deg);

缩放

transform: scaleX(1.5) scaleY(2);
/* xy同时缩放 ：*/
transform: scale(0.5);

先缩放再移动最后旋转

原点对移动无影响，对旋转、缩放有影响

调整原点

transform-origin: top left;

13.3d转换

给父元素添加，开启3d空间

transform-style: preserve-3d;

移动

transform: translateZ(-200px)

旋转

transform: rotateX(45deg);
transform: rotateY(45deg);

设置背部可见性

backface-visibility: hidden;

14.过渡

/* 过渡前 */
div {
    width: 100px;
    height: 100px;
    background-color: pink;
    /* 设置过渡时能观察的变化 */
    transition-property: width, height, background-color;
    /* 过渡时间 */
    transition-duration: 5s;
}
/* 过渡后 */
div:hover {
    width: 1200px;
    height: 200px;
    background-color: green;

}

复合写法：

/*   观察对象  时间  帧数   */
transition: all 3s steps(120);

15.动画

定义动画

/* @keyframes name */
@keyframes movie {
    from {
        /* css样式 */
        border-radius: 0;
        transform: translateX(0) rotateZ(0);

}

to {
    border-radius: 50%;
    transform: translateX(1100px) rotateZ(360deg);
}