CSS自学手册-第4章


    CSS margin-外边距

    CSS margin(外边距)属性定义元素周围的空间。


    margin 清除周围的(外边框)元素区域。margin 没有背景颜色,是完全透明的。

    margin 可以单独改变元素的上,下,左,右边距,也可以一次改变所有的属性。

    CSS自学手册-第4章 插图1

    可能的值

    说明
    auto设置浏览器边距。
    这样做的结果会依赖于浏览器
    length定义一个固定的margin(使用像素,pt,em等)
    %定义一个使用百分比的边距

     Margin可以使用负值,重叠的内容


    在CSS中,它可以指定不同的侧面不同的边距:

    margin-top:100px;
    margin-bottom:100px;
    margin-right:50px;
    margin-left:50px;

    复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!

    为了缩短代码,有可能使用一个属性中margin指定的所有边距属性。这就是所谓的简写属性。

    所有边距属性的简写属性是 margin :

    margin:100px 50px;

    margin属性可以有一到四个值。

    • margin:25px 50px 75px 100px;
      • 上边距为25px
      • 右边距为50px
      • 下边距为75px
      • 左边距为100px
    • margin:25px 50px 75px;
      • 上边距为25px
      • 左右边距为50px
      • 下边距为75px
    • margin:25px 50px;
      • 上下边距为25px
      • 左右边距为50px
    • margin:25px;
      • 所有的4个边距都是25px

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>元宇宙之家-liboven.cn</title> 
    <style>
    p.ex1 {margin-top:2cm;}
    </style>
    </head>
    
    <body>
    
    <p>一个没有指定边距大小的段落。</p>
    <p class="ex1">一个2厘米上边距的段落。</p>
    <p>一个没有指定边距大小的段落。</p>
    
    </body>
    </html>

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>元宇宙之家-liboven.cn</title> 
    <style>
    p.bottommargin {margin-bottom:25%;}
    </style>
    </head>
    <body>
    
    <p>这是一个没有指定边距大小的段落。</p>
    <p class="bottommargin">这是一个指定下边距大小的段落。</p>
    <p>这是一个没有指定边距大小的段落。</p>
    
    </body>
    </html>


    属性描述
    margin简写属性。在一个声明中设置所有外边距属性。
    margin-bottom设置元素的下外边距。
    margin-left设置元素的左外边距。
    margin-right设置元素的右外边距。
    margin-top设置元素的上外边距。

    CSS 分组 和 嵌套 选择器

    在样式表中有很多具有相同样式的元素

    h1 {
        color:green;
    }
    h2 {
        color:green;
    }
    p {
        color:green;
    }

    为了尽量减少代码,你可以使用分组选择器。

    每个选择器用逗号分隔。

    在下面的例子中,我们对以上代码使用分组选择器:

    h1,h2,p
    {
        color:green;
    }

    它可能适用于选择器内部的选择器的样式。

    在下面的例子设置了四个样式:

    • p{ }: 为所有 p 元素指定一个样式。
    • .marked{ }: 为所有 class=”marked” 的元素指定一个样式。
    • .marked p{ }: 为所有 class=”marked” 元素内的 p 元素指定一个样式。
    • p.marked{ }: 为所有 class=”marked” 的 p 元素指定一个样式。
    p
    {
        color:blue;
        text-align:center;
    }
    .marked
    {
        background-color:red;
    }
    .marked p
    {
        color:white;
    }
    p.marked{
        text-decoration:underline;
    }

    CSS 尺寸-Dimension

    CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样,它允许你增加行间距


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>元宇宙之家-liboven.cn</title> 
    <style>
    img.normal
    {
    	height:auto;
    }
    img.big
    {
    	height:120px;
    }
    p.ex
    {
    	height:100px;
    	width:100px;
    }
    </style>
    </head>
    
    <body>
    <img class="normal" src="logocss.gif" width="95" height="84" /><br>
    <img class="big" src="logocss.gif" width="95" height="84" />
    <p class="ex">这个段落的高和宽是 100px.</p>
    <p>这是段落中的一些文本。这是段落中的一些文本。
    这是段落中的一些文本。这是段落中的一些文本。
    这是段落中的一些文本。这是段落中的一些文本.</p>
    </body>
    </html>

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>元宇宙之家-liboven.cn</title> 
    <style>
    html {height:100%;}
    body {height:100%;}
    img.normal {height:auto;}
    img.big {height:50%;}
    img.small {height:10%;}
    </style>
    </head>
    
    <body>
    <img class="normal" src="logocss.gif" width="95" height="84" /><br>
    <img class="big" src="logocss.gif" width="95" height="84" /><br>
    <img class="small" src="logocss.gif" width="95" height="84" />
    </body>
    </html>

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>元宇宙之家-liboven.cn</title> 
    <style>
    img {width:200px;}
    </style>
    </head>
    <body>
    
    <img src="logocss.gif" width="95" height="84" />
    
    </body>
    </html>

    <html>
    <head>
    <meta charset="utf-8"> 
    <title>元宇宙之家-liboven.cn</title> 
    <style type="text/css">
    p
    {
    	max-height:50px;
    	background-color:yellow;
    }
    </style>
    </head>
    
    <body>
    <p>本段落的最大高度被设置为 50px。 本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。</p>
    </body>
    </html>

    复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>元宇宙之家-liboven.cn</title> 
    <style>
    p
    {
    	max-width:20%;
    	background-color:yellow;
    }
    </style>
    </head>
    <body>
    
    <p>This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.</p>
    
    </body>
    </html>

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>元宇宙之家-liboven.cn</title> 
    <style>
    p
    {
    	min-height:100px;
    	background-color:yellow;
    }
    </style>
    </head>
    
    <body>
    <p>这段的最小高度设置为100 px。</p>
    </body>
    </html>

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>元宇宙之家-liboven.cn</title> 
    <style>
    p
    {
    	min-width:150px;
    	background-color:yellow;
    }
    </style>
    </head>
    
    <body>
    <p>这个段落的最小宽度设置为 150px。</p>
    </body>
    </html>


    属性描述
    height设置元素的高度。
    line-height设置行高。
    max-height设置元素的最大高度。
    max-width设置元素的最大宽度。
    min-height设置元素的最小高度。
    min-width设置元素的最小宽度。
    width设置元素的宽度。

    Display-显示 与 Visibility-可见性

    display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏

    CSS自学手册-第4章 插图2

    隐藏一个元素可以通过把display属性设置为”none”,或把visibility属性设置为”hidden”。但是请注意,这两种方法会产生不同的结果。

    visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局

    h1.hidden {visibility:hidden;}

    display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。

    h1.hidden {display:none;}

    块元素是一个元素,占用了全部宽度,在前后都是换行符。

    块元素的例子:

    • <h1>
    • <p>
    • <div>

    内联元素只需要必要的宽度,不强制换行。

    内联元素的例子:

    • <span>
    • <a>

    可以更改内联元素和块元素,反之亦然,可以使页面看起来是以一种特定的方式组合,并仍然遵循web标准。

    下面的示例把列表项显示为内联元素:

    li {display:inline;}

    下面的示例把span元素作为块元素:

    span {display:block;}

    注意:变更元素的显示类型看该元素是如何显示,它是什么样的元素。例如:一个内联元素设置为display:block是不允许有它内部的嵌套块元素


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>元宇宙之家-liboven.cn</title> 
    <style>
    p {display:inline;}
    </style>
    </head>
    
    <body>
    <p>display 属性的值为 "inline"的结果</p>
    <p>两个元素显示在同一水平线上。</p>
    </body>
    </html>

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>元宇宙之家-liboven.cn</title> 
    <style>
    span
    {
    	display:block;
    }
    </style>
    </head>
    <body>
    
    <span>display 属性值为 "block" 的结果</span> <span>这两个元素之间的换行符。</span>
    
    </body>
    </html>

    复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>元宇宙之家-liboven.cn</title> 
    <style>
    table, th, td {
        border: 1px solid black;
    }
    
    tr.collapse {
        visibility: collapse;
    }
    </style>
    </head>
    <body>
    
    <table>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
      </tr>
      <tr>
        <td>Peter</td>
        <td>Griffin</td>
      </tr>
      <tr class="collapse">
        <td>Lois</td>
        <td>Griffin</td>
      </tr>
    </table>
    
    <p><b>注意:</b> IE8 及其更早版本需要通过指定 !DOCTYPE 才可以支持 visibility:collapse。</p>
    
    </body>
    </html>


    块级元素(block)特性:

    • 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
    • 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

    内联元素(inline)特性:

    • 和相邻的内联元素在同一行;
    • 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变,就是里面文字或图片的大小;

    块级元素主要有:

    •  address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

    内联元素主要有:

    • a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

    可变元素(根据上下文关系确定该元素是块元素还是内联元素):

    • applet ,button ,del ,iframe , ins ,map ,object , script

    CSS中块级、内联元素的应用:

    利用CSS我们可以摆脱上面表格里HTML标签归类的限制,自由地在不同标签/元素上应用我们需要的属性。

    主要用的CSS样式有以下三个:

    • display:block  — 显示为块级元素
    • display:inline  — 显示为内联元素
    • display:inline-block — 显示为内联块元素,表现为同行显示并可修改宽高内外边距等属性

    我们常将所有<li>元素加上display:inline-block样式,原本垂直的列表就可以水平显示了

    对于 CSS 里的 visibility 属性,通常其值被设置成 visible 或 hidden

    visibility: hidden 相当于 display:none,能把元素隐藏起来,但两者的区别在于:

    •  1、display:none 元素不再占用空间。
    •  2、visibility: hidden 使元素在网页上不可见,但仍占用空间。

    然而,visibility 还可能取值为 collapse 。

    当设置元素 visibility: collapse 后,一般的元素的表现与 visibility: hidden 一样,也即其会占用空间。但如果该元素是与 table 相关的元素,例如 table row、table column、table column group 等,其表现却跟 display: none 一样,也即其占用的空间会释放。

    在不同浏览器下,对 visibility: collapse 的处理方式不同:

    •  1、visibility: collapse 的上述特性仅在 Firefox 下起作用。
    •  2、在 IE 即使设置了 visibility: collapse,还是会显示元素。
    •  3、在 Chrome 下,即使会将元素隐藏,但无论是否是与 table 相关的元素,visibility: collapse 与 visibility: hidden 没有什么区别,即仍会占用空间

    复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!

    display是控件的css属性之一,表示的是显示模式。none表示不显示在网页上,但是代码存在;bolck是此元素将显示为块级元素,此元素前后会带有换行符。

    在CSS中,块级对象元素会单独占一行显示,多个block元素会各自新起一行,并且可以设置width,height属性;而内联对象元素前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满,对inline元素设置width,height属性无效。

    我们有个时候既希望元素具有宽度高度特性,又具有同行特性,这个时候我们可以使用inline-block。在CSS中通过display:inline-block对一个对象指定inline-block属性,简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性


    温馨提示:本文最后更新于2023-01-19 03:20:46,某些文章具有时效性,若有错误或已失效,请在下方留言或联系云小叔叔
    文章版权声明 1、本网站名称:元宇宙之家
    2、本站永久网址:https://liboven.cn
    3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
    4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
    5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
    6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。

    © 版权声明
    THE END
    喜欢就支持一下吧
    点赞23赞赏 分享
    评论 抢沙发
    头像
    欢迎您留下宝贵的见解!
    提交
    头像

    昵称

    夸夸
    夸夸
    还有吗!没看够!
    取消
    昵称常用语表情代码图片

      暂无评论内容