CSS - css 属性（三）

最新推荐文章于 2024-08-24 00:18:19 发布

lixiang5453

最新推荐文章于 2024-08-24 00:18:19 发布

阅读量328

点赞数

分类专栏： CSS 进阶之路文章标签： css css3 html

本文链接：https://blog.csdn.net/lixiang5453/article/details/122358468

版权

进阶之路同时被 2 个专栏收录

57 篇文章 8 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

CSS 属性

所有属性查询文档 CSS 教程 | 菜鸟教程

名称	作用	值	备注
width	宽	Npx
height	高	Npx
border	边框	Npx，边框类型	CSS Border(边框) \| 菜鸟教程
background-color	背景颜色	颜色代码
background-image	背景图片	图片url
background-size	背景图片大小	两个值宽和高的px
margin	外边距	Npx，可以传1个，可以传4个	CSS margin(外边距) \| 菜鸟教程
margin-left、margin-right、margin-bottom、margin-top	上下左右外边距	Npx
padding	内边距	Npx，可以传1个，可以传4个	CSS padding（填充） \| 菜鸟教程
padding-left、padding-right、padding-bottom、padding-top	上下左右内边距	Npx
font-size	字体大小	Npx
text-align	文字对齐方式	right、left、center
line-height	行高	Npx、百分比
display	改变元素类型	none、block、inline、inline-block
position	元素定位	absolute、fixed、relative
z-index	显示优先级	整数/负数，数字越大优先级越高
overflow	控制内容溢出元素框时显示的方式	hidden、scroll、auto
float	块级元素浮动	left、right

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css属性</title>

    <style>
        div{
            background-image: url("ico/8vIhjc-WEF0.jpg");
        }

        /*padding 内边距属性，设置标签内的标签的边距*/
        .padding{
            width: 400px;
            height: 400px;
            background-color: #bdedbc;
            padding: 10px;
            border: 5px solid;
        }
        .pos1{
            position: fixed;
            top: 100px;
            left: 300px;

        }
        .pos2{
            position: relative;
            top: 100px;
            left: 300px;

        }
        .pos3{
            position: absolute;
            top: 100px;
            left: 300px;

        }
    </style>

</head>

<!-- margin 边距可以写在 head 里边，也可以写在 body，也可以在标签中定义-->
<!--边距也可以写负数，这样就会产生覆盖的现象-->
<body style="margin: 0px">

<div style="width: 640px;height: 480px;background-color: #e4ecf3;border: 1px solid;margin: 0px">
div 标签属性
</div>

<div style="width: 100px;height: 100px;background-color: #66cc66;border: 10px solid;margin-top: 20px  ">

</div>

<div class="padding">
    <div style="width: 200px;height: 200px;background-color: #FF6600;border: sandybrown 5px solid">
    </div>
</div>

<!--text-align: left 文字对齐方式，left 左对齐，right 右对齐，center 居中显示-->
<div style="text-align: center">
    background-image: 背景图片 <br>
    background-color：背景色 <br>
    width： 宽 <br>
    height： 高 <br>
    border： 边框 <br>
    margin: 上下左右边距 <br>
    margin-top: 上边距 <br>
    <a href="http://www.baidu.com" style="cursor: default;text-decoration: none">百度一下</a>
</div>

<!--display 可以改变元素属性，可以将内联元素和快联元素互换-->
<a href="http://www.baidu.com" style="cursor: default;text-decoration: none;display: block">百度一下</a>
<a href="http://www.baidu.com" style="cursor: default;text-decoration: none">百度一下</a>
<a href="http://www.baidu.com" style="cursor: default;text-decoration: none">百度一下</a>

<!--display: none 可以将当前的标签隐藏不显示-->
<div style="display: none">
    <h1>
        今天是周二，今儿要上班
    </h1>
</div>

<!--position:fixed 绝对位置，相当于当前浏览器的页面的固定位置，即使页面滑动也在指定的位置-->
<div style="height: 50px;width: 50px;background-color: #FF6600" class="pos1">
    fixed
</div>

<!--position: relative 相对定位，相对于父级元素的位置-->
<div style="height: 300px;width: 300px;background-color: #cc0000">
    <div style="height: 50px;width: 50px;background-color: #FF6600" class="pos2">
        relative
    </div>
</div>

<!--position: absolute 绝对定位，固定在当前页面中，页面滑动也会跟着一起动-->
<div style="height: 300px;width: 300px;background-color: #cc0000" class="pos3">
    absolute
</div>

<p>
    今儿天气很好呀！今儿天气很好呀！今儿天气很好呀！今儿天气很好呀！今儿天气很好呀！今儿天气很好呀！
</p>

<img src="ico/adK3Vu70DEQ.jpg" alt="" style="position: fixed;z-index: -1;border: 10px solid;width: 200px;height: 200px" id="img1">

<!--overflow: hidden 当标签内的内容溢出元素时显示方式，hidden 为隐藏-->
<div style="height: 100px;width: 140px;background-color: #FF6600;overflow: hidden">
    今儿天气很好呀！
    今儿天气很好呀！
    今儿天气很好呀！
    今儿天气很好呀！
    今儿天气很好呀！
</div>

<div style="height: 200px;background-color: #cc0000">
    <div style="float: left;margin-right: 10px">我的电脑</div>
    <div style="float: contour;margin-right: 10px">我的文档</div>
    <div style="float: right;margin-right: 10px">回收站</div>
</div>

</body>
</html>