【前端】css笔记（7）

最新推荐文章于 2024-09-15 10:33:02 发布

足足一米58

最新推荐文章于 2024-09-15 10:33:02 发布

阅读量78

点赞数 2

分类专栏： css 文章标签：前端 css html

本文链接：https://blog.csdn.net/weixin_61731785/article/details/126018057

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

目录：

padding 属性（填充）

定义元素边框与元素内容之间的空间：

可以使用长度值或百分比值，但与 margin 属性不同，它不允许使用负值

内边距的百分比数值

百分比数值是相对于其父元素的 width 计算的，如果改变了父元素的 width，则它们也会改变

<body>

<div style="width: 200px;border: 1px solid #616161">
<p>这个段落包含在一个宽度为200像素的DIV中。</p>
</div>

</body>

ps：上下内边距与左右内边距一致，即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度

单边内边距

<style>
p.padding
{
   padding-top:25px;
   padding-bottom:25px;
   padding-right:50px;
   padding-left:50px;
}
</style>

简写

<style>
p.padding
{
padding:25px 50px;
}
</style>

padding 属性，可以有一到四个值：

padding:25px 50px 75px 100px;

上填充为25px
右填充为50px
下填充为75px
左填充为100px

padding:25px 50px 75px;

上填充为25px
左右填充为50px
下填充为75px

padding:25px 50px;

上下填充为25px
左右填充为50px

padding:25px;

所有的填充都是25px

分组

可以将具有相同样式的选择器进行分组，减少代码量：

<style>
h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}
</style>

应用分组：

<style>
h1,h2,p
{
color:green;
}
</style>

嵌套

适用于选择器内部的选择器的样式：

<style>
p
{
   color:blue;
   text-align:center;
}
.marked
{
   background-color:red;
}
.marked p
{
   color:white;
}
</style>

ps：

为所有 p 元素指定一个样式，为所有元素指定一个 class="marked"的样式，并仅用于class="标记"，类内的 p 元素指定第三个样式，“标记”类元素中的 p 元素保持对齐样式，但具有不同的文本颜色

元素高度

设置不同元素的高度：

<style>
img.normal
{
   height:auto;
}
img.big
{
   height:120px;
}
p.ex
{
   height:100px;
   width:100px;
}
</style>

ps：

line-height元素设置行高

图像高度

使用百分比值设置元素的高度：

<style>
html {height:100%;}
body {height:100%;}
img.normal {height:auto;}
img.big {height:50%;}
img.small {height:10%;}
</style>

元素宽度

使用像素值来设置元素的宽度：

<style>
img {width:200px;}
</style>

元素最大高度

设置元素的最大高度：

<style type="text/css">
p
{
max-height:50px;
background-color:yellow;
}
</style>

元素最大宽度

使用百分比值来设置元素的最大宽度：

<style>
p
{
max-width:20%;
background-color:yellow;
}
</style>

元素最低高度

设置元素的最小高度：

<style>
p
{
min-height:100px;
background-color:yellow;
}
</style>

元素最小宽度

使用像素值设置元素的最小宽度：

<style>
p
{
min-width:150px;
background-color:yellow;
}
</style>

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>css整理</title>
</head>
<body>
    <body>

        <div style="width: 200px;border: 1px solid #616161">
            <p>这个段落包含在一个宽度为200像素的DIV中。</p>
        </div>
    </body><!--百分比数值-->

    <style>
        p.padding {
            padding-top: 25px;
            padding-bottom: 25px;
            padding-right: 50px;
            padding-left: 50px;
        }
    </style><!--单边-->

    <style>
        p.padding {
            padding: 25px 50px;
        }
    </style><!--简写-->

    <style>
        h1, h2, p {
            color: green;
        }
    </style><!--分组-->

    <style>
        p {
            color: blue;
            text-align: center;
        }

        .marked {
            background-color: red;
        }

            .marked p {
                color: white;
            }
    </style><!--嵌套-->

    <style>
        img.normal {
            height: auto;
        }

        img.big {
            height: 120px;
        }

        p.ex {
            height: 100px;
            width: 100px;
        }
    </style><!--元素高度-->

    <style>
        html {
            height: 100%;
        }

        body {
            height: 100%;
        }

        img.normal {
            height: auto;
        }

        img.big {
            height: 50%;
        }

        img.small {
            height: 10%;
        }
    </style><!--图像高度-->

    <style>
        img {
            width: 200px;
        }
    </style><!--元素宽度-->

    <style type="text/css">
        p {
            max-height: 50px;
            background-color: yellow;
        }
    </style><!--元素最大高度-->

    <style>
        p {
            max-width: 20%;
            background-color: yellow;
        }
    </style><!--元素最大宽度-->

    <style>
        p {
            min-height: 100px;
            background-color: yellow;
        }
    </style><!--元素最低高度-->

    <style>
        p {
            min-width: 150px;
            background-color: yellow;
        }
    </style><!--元素最小宽度-->

</body>
</html>