CSS3 样式

最新推荐文章于 2024-10-18 18:45:22 发布

Asunny5

最新推荐文章于 2024-10-18 18:45:22 发布

阅读量272

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/m0_60979337/article/details/127586426

版权

学习目标：

box-sizing 可以改变元素尺寸的计算模式
cursor 鼠标样式
背景图片属性

学习产出：

1.box- sizing 可以改变元素尺寸计算元素
content-box (默认值） = width + padding + border
border- box 盒子的实际width=内容 + padding + border （常用在全网页样式）
inherit 继承父元素的边框（不常用）

    <style>
        .box2 {
            width: 200px;
            height: 20px;
            padding：20px
            border: 20px solid red;
        }
    </style>
<!--默认值 content-box-->  

<body>
    <div class="box2"></div>
</body>

   <style>
        .box2 {
            width: 200px;
            height: 20px;
            padding: 20px;
            border: 20px solid red;
            box-sizing: border-box;

        }
    </style>

<body>
    <div class="box2"></div>
</body>

2.cursor 修改鼠标的样式
auto（默认值）（根据元素自动识别）//a标签就是个手
default 默认光标样式（一个箭头）
not-allowed 禁止点击
help 带有？好的箭头表示帮助信息
pointer 表示一个链接（小手光标）

3.添加多背景图
多个背景图用,分割。
background-imge:url(), url(), ;

背景样式都可以用，号分割多组样式
background-repeat:norepeat , noreapt;

图片大小调整 background-size：width height；
可以控制图片的大小，可以有多组值给个背景图片，如果省略第二个参数，height则是自动计算。
1.可以给像素和百分比
2.cover属性值可以把背景图片扩展到足够大，使图片铺满背景区域（会放大图片，保证图片比例。
3.contain属性值最大尺寸填充满背景区域。

图片位置移动，可以用,分割
background-position:0 0 ,right bottom;

背景图片裁剪 background-clip
border-box 按边框裁剪 (边框以内背景可见）（默认值）

padding- box 内边距裁剪（内边距内的背景可见）

content-box 内容裁剪（内容部分的背景可见）

图片定位 background-origin （和裁剪类似，二选一使用）
border- box 图片从border开始定位（默认值）
border-padding 图片从padding开始定位
border- content 图片从内容开始定位

背景简写 background
建议书写顺序：background- color，background-image,background-position/[background-size],repeat,orign,clip
banckground-position 与background- size 同时存在，则只需要加/区分