CSS 练习笔记(2)

最新推荐文章于 2024-09-22 13:58:30 发布

sam-zy

最新推荐文章于 2024-09-22 13:58:30 发布

阅读量125

点赞数

原文链接：https://www.runoob.com/

版权

HTML+CSS+JavaScript+jQuery基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

6. Display(显示) 与 Visibility（可见性）

三、框模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像。

CSS box-model

1.框模型概述

<html>
<style>
div.ax {
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
div.ex { 
    width:220px;
    padding:10px;
    border:5px solid gray;
    margin:0px;
}
</style>
<div class=ax> 这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>

<img src="./images/image.png" width="250" height="250" />
<div class="ex"> 上面的图片是250 px宽。 这个元素的总宽度也是250 px。</div>
</html>

2.内边距

<html>
<head>
<style type="text/css">
    td.test1 { padding: 1cm }         /*相等内边距1cm*/
    td.test2 { padding: 0.5cm 2.5cm } /*上下内边距1cm，左右内边距2cm*/
    td.test3 { padding-bottom: 2cm }  /*下内边距2cm*/
</style>
</head>

<body>
<table border="1">
    <tr>
        <td class="test1">
            这个表格单元的每个边拥有相等的内边距。
        </td>
    </tr>
</table>

<table border="1">
    <tr>
        <td class="test2">
            这个表格单元的上和下内边距是 0.5cm，左和右内边距是 2.5cm。
        </td>
    </tr>
</table>

<table border="1">
    <tr>
        <td class="test3">
            这个表格单元拥有下内边距2cm。
        </td>
    </tr>
</table>

</body>
</html>

3.CSS边框

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

CSS border 属性允许你规定元素边框的样式、宽度和颜色。

<html>
<head>
<style type="text/css">
    p.dotted {border-style: dotted; border-color: #0000ff }             /*点状;蓝色*/
    p.dashed {border-style: dashed; border-color: rgb(250,0,255) blue}/*虚线;上下粉色 左右蓝色*/
    p.solid  {border-style: solid;  border-color: red #00ff00 blue }/*实线;上红 左右绿 下蓝*/
    p.double {border-style: double; border-color: red rgb(9, 230, 53) blue }/*空心线;上红 左右绿 下蓝*/
    p.groove {border-style: groove; }   /*3D沟槽边框*/
    p.ridge  {border-style: ridge;  }   /*3D脊边框*/
    p.inset  {border-style: inset;  }   /*3D的嵌入边框*/
    p.outset {border-style: outset; }   /*3D突出边框*/

    p.one  {border-style: solid; border-left-width: 15px}    /*左边框宽度15px*/
    p.two  {border-style: solid; border-width: thick}
    p.three{border-style: solid; border-width: 2px 10px}    /*上下2px，左右10px*/
    p.four {border-style: solid; border-width: 5px 15px 1px}    /*上5px，左右10px，下1px*/
    p.five {border-style: solid; border-width: 5px 10px 1px medium}
</style>
</head>
<body>
<p class="dotted"> 点状的边框，蓝色的 边框 </p>
<p class="dashed"> 虚线的边框，上下粉色 左右蓝色的 边框 </p>
<p class="solid"> 实线的边框;上红 左右绿 下蓝 </p>
<p class="double"> 空心线;上红 左右绿 下蓝 </p>
<p class="groove"> 3D沟槽边框 </p>
<p class="ridge"> 3D脊状边框 </p>
<p class="inset"> 3D的嵌入边框 </p>
<p class="outset"> 3D突出边框 </p>
<p class="one"> 左边框宽度15px </p>
<p class="two">  border-width: thick </p>
<p class="three"> 上下2px，左右10px </p>
<p class="four"> 上5px，左右10px，下1px </p>
<p class="five"> border-width: 5px 10px 1px medium /p>
</body>
</html>

CSS 边框属性

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。

4.外边距 margin 属性

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

<html>
<head>
<style type="text/css">
    p.one   {margin-left: 200px}         /*距离左边200px*/
    p.two   {margin-top:   5em}         /*距离左边5em*/
    p.margin {margin: 5cm 15cm 5cm 5cm}  /*上右下左：5cm 15cm 5cm 5cm*/
</style>
</head>
<body>
<p class="one"> 距离左边200px </p>
<p class="two"> 距离上边5em </p>
<p class="margin">上：5cm; 右：15cm；下：5cm；左：5cm；</p>
</body>
</html>

5.外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

<html>
<head>
<style type="text/css">
* {
  margin:0;
  padding:0;
  border:0;
}
#d1 {
  width:100px;
  height:100px;
  margin-top:20px;
  margin-bottom:20px;
  background-color:red;
}
#d2 {
  width:100px;
  height:100px;
  margin-top:10px;
  background-color:blue;
}
/*--------------------------------------------------*/
* {
  margin:0;
  padding:0;
  border:0;
}
#outer {
  width:100px;
  height:100px;
  background-color:red;
  margin-top:20px;
}
#inner {
  width:50px;
  height:50px;
  background-color:blue;
  margin-top:10px;
}
</style>
</head>
<body>
<p>请注意，两个 div 之间的外边距是 20px，而不是 30px（20px + 10px）。</p>
<div id="d1">  </div>
<div id="d2">  </div>

<p>注释：请注意，如果不设置 div 的内边距和边框，那么内部 div 的上外边距将与外部 div 的上外边距合并（叠加）。</p>
<div id="outer">
    <div id="inner"> 
    </div>
</div>
</body>
</html>

6. Display(显示) 与 Visibility（可见性）

<!DOCTYPE html>
<html>
<head>
<style>
    h4.hidden {visibility:hidden;}  /*实例中的隐藏标题仍然占用空间*/
    h2.hidden {display:none;}       /*实例中的隐藏标题不占用空间*/
    li{display:inline;}             /*链接列表水平显示*/
    /*如何使用表的collapse属性*/
    table, th, td { border: 1px solid black; }
    tr.collapse   { visibility: collapse; }
</style>
</head>

<body>
<h4>这是一个可见标题</h4>
<h4 class="hidden">这是一个隐藏标题</h4>
<p>注意, 实例中的隐藏标题仍然占用空间。</p>
<p>------------------------------------------------------</p>
<h2>这是一个可见标题</h2>
<h2 class="hidden">这是一个隐藏标题</h2>
<p>注意, 实例中的隐藏标题不占用空间。</p>
<p>------------------------------------------------------</p>
<p>链接列表水平显示：</p>
<ul>
<li><a href="/html/" target="_blank"> HTML </a></li>
<li><a href="/css/" target="_blank"> CSS </a></li>
<li><a href="/js/" target="_blank"> JavaScript </a></li>
<li><a href="/xml/" target="_blank"> XML </a></li>
</ul>
<p>------------------------------------------------------</p>
<span> one-111 </span>
<span> two-222 </span>
<p>------------------------------------------------------</p>
<table>
    <tr>
      <th> 如何使用 </th>
      <th> 表的  </th>
    </tr>
    <tr>
      <td> collapse  </td>
      <td> 属性</td>
    </tr>
    <tr class="collapse">
      <td> Lois   </td>
      <td> Griffin</td>
    </tr>
</table>

</body>
</html>