css3管理图片及页面布局的一些属性

width的属性值：

    fill-available   合理分配有效剩余空间
    fit-content      找子元素内容的宽度。按照子元素的宽度进行设置
    
    max-content      找子元素最大的宽度
    min-content      找子元素最小的宽度

面试题:
    width:100% 和 width:fill-available；有什么区别？？

    对padding增加后的解析状态影响不一样，加足够多的padding，子元素会超出，而fill-avaliable不会超出，他会通过减小padding值来让子元素不溢出。

背景图：

background-origin:背景图的起始位置
    padding-box; 默认值（padding区域开始）
    border-box; 边框后面开始
    content-box; 从内容区域开始


background-clip:; 背景的裁切（只显示哪个区域的背景）
    border-box:;默认值
    padding-box:;
    content-box:;


background-size:;  控制背景图的大小
    属性值：宽度   高度
        属性值的数值：
            10px  10px
            100%  100%
            cover       按照背景图的比例放大到全部平铺在元素后面则停止
            contain     按照比例放大，当宽或者高，达到容器最高则停止

可同时加多个背景图，中间用逗号隔开，如不加位置，先写的在上面，把后写的遮住

多背景图的设置：
    background:url() no-repeat,url() no-repeat,url()

文本换行：

英文或者数字默认显示：如果没有换行的情况下：尝试把下一个长单词放在下一行显示。

word-wrap:break-word:
    功能：尝试把长单词换到下一行显示，如果在下一行仍然有超出的情况下，自动断句。


word-break:break-all;
    功能：粗暴的断句。

文本阴影：

    text-shadow: x轴位置  Y轴位置  阴影大小  阴影颜色
                         eg：10px 15px 20px red;  
    注：如果想添加多个阴影  每一组阴影以逗号分隔。

盒子阴影：

    box-shadow: x y 阴影的模糊度 阴影扩散的大小 阴影颜色 内阴影(inset 可选)

添加多阴影：以逗号分隔的形式添加多阴影

颜色模块：

rgb()
rgba()    ->  让背景颜色透明（内容不会产生透明）

opacity -> 让整个元素包括内容透明

background:hsla(240,50%,44%,0.5);<了解>

css3中的calc计算：

(100% - 200px)
被计算的宽或者高之间存在一些关系，通过宽度高度减运算，可以减少计算步骤，并且精确度高

pointer-events:none;

    阻止各种按钮（button\a）的功能
    穿透遮罩层，可以使得本来在遮罩层下的超链接或按钮实现它应有的功能。

图片边框：

    把一张图片，当作一个边框来显示。

border-image:; 简写
border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移(不加单位)。 [ 把图片切割成九宫格 ]
border-image-repeat 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)

border-image-outset 边框向外偏移<不常用>

.box{
            width: 400px;
            height: 350px;
            background: palevioletred;
            border: 30px solid palegreen;
            margin: 100px auto;
            border-image: url(./images/borderbg.jpg) 30 30;
            }
            </style>

/* 类似于把图片切割成九宫格，两个数字分别是九宫格四个角四边形的侧边和上下边的值*/

   border-radius: 半径!
        一个值：四周圆角
        两个值：左上角及右下角    右上角及左下角
        三个值：左上角   右上角及左下角    右下角
        四个值：从左上角开始 顺时针设置。（左上 右上 右下 左下）
        
        分垂直半径和水平半径：
        border-radius: 水平半径 / 垂直半径