CSS笔记（3D转换模块~CSS书写格式）_css3 3d转换笔记-CSDN博客

本文链接：https://blog.csdn.net/dawanhjiao/article/details/103281457

3D转换模块
2D是一个平面，只有宽度和高度
3D是一个立体，有宽度、高度和厚度
默认情况下元素都是以2D呈现的
若想让某个元素变成3D模块，就给它的父元素添加这个属性transform-style: preserve-3d;

.father{
            width: 200px;
            height: 200px;
            background-color: red;
            border: 1px solid #000;
            margin: 100px auto;
            perspective: 500px;
            transform-style: preserve-3d;/*若想让某个元素变成3D模块，就给它的父元素添加这个属性*/
            /*transform: rotateY(0deg);*/
        }

背景尺寸
专门用于设置背景图片大小的
background-size: 200px 200px;背景图片的宽、高，一个值是宽，图片会变形
background-size: 50% 100%;背景图片的宽、高，一个值是宽，图片会变形
background-size:auto 100%;背景图片的宽、高，auto是指等比拉伸，图片不会变形
background-size:cover;图片需要等比拉伸，且要拉伸到宽度和高度都填满元素
background-size:contain;图片需要等比拉伸，且要拉伸到宽度或高度其中一个值填满元素就停止拉伸

ul{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            margin: 100px auto;
            background-image: url("image/000.jpg");
            background-size: cover;
        }

背景图片定位区域属性
默认情况是背景图片从内边距区域开始显示的
background-origin: padding-box;背景图片从内边距区域开始显示的
background-origin: border-box;背景图片从边框区域开始显示的
background-origin: content-box;背景图片从内容区域开始显示的

背景的绘制区域属性
默认情况是背景是从body（border+padding+content）开始绘制的
background-clip: padding-box;背景从内边距区域开始绘制的
background-clip: border-box;背景从边框区域开始绘制的
background-clip: content-box;背景从内容区域开始绘制的

多重背景图片
将一张图片的背景属性全部写完后，用逗号隔开再写下一个图片的全部背景属性
background: url("image/1.jpg") no-repeat left top，url("image/2.jpg") left bottom;
但是当图片太多时，代码太乱，所以最好分开写

div{
            width: 500px;
            height: 500px;
            margin: 100px auto;
            border: 1px solid #000;
            /*逐个写属性，用逗号隔开*/
            background-image: url("image/1.jpg")，url("image/2.jpg");
            background-reapt:no-repeat,no-repeat;
            background-position:left top，left bottom;
        }

注意先添加的背景图片会盖住后添加的背景图片

CSS书写格式
1.行内样式
直接将CSS代码写在开始标签中

<div style="color: red">我是DIV</div>

2.内嵌样式
写在<head></head>里

<head>
    <style type="text/css">
    </style>
</head>

3.外链样式（企业开发中一般用外链样式）
单独新建一个.css文件，把CSS代码写在这里面，再通过link标签把这个文件和.html文件链接起来

<head>
    <link rel="stylesheet" href="css练习.css">
</head>

4.导入样式
单独新建一个.css文件，把CSS代码写在这里面，再通过@import标签把这个文件和.html文件链接起来

<head>
    <style>
        @import "css练习.css";
    </style>
</head>

外链样式和导入样式的区别
1.@import是CSS2.1推出的，所以会有兼容问题
2.外链样式在显示界面时，时先加载CSS样式，再加载结构，所以用户看到的界面一定已经设置了样式
而导入样式在显示界面时，时先加载结构，再加载CSS样式，所以用户看到的界面不一定已经设置了样式
所以用外链样式