（三）CSS填充、分组和嵌套、尺寸、显示、定位、浮动、对齐元素、生成内容

CSS填充

左部填充

p.padding {padding-left:2cm;}
p.padding2 {padding-left:50%;}

填充

右部填充

p.padding {padding-right:2cm;}
p.padding2 {padding-right:50%;}

右填充

顶部填充

p.padding {padding-top:2cm;}
p.padding2 {padding-top:50%;}

image.png

底部填充

p.padding {padding-bottom:25px;}
p.padding2 {padding-bottom:50%;}

image.png

在一个声明中的所有填充属性

p.ex1 {padding:2cm;}
p.ex2 {padding:0.5cm 3cm;}

image.png

分组和嵌套

组选择器

每个选择器用逗号分隔。

h1,h2,p
{
    color:green;
}

image.png

嵌套选择器

它可能适用于选择器内部的选择器的样式。
在下面的例子设置了三个样式：
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;
}

image.png

CSS尺寸

使用像素值设置图像的高度和宽度

img.normal
{height:auto;}
img.big
{height:120px; width:120px}

image.png

使用百分比设置图像的高度和宽度

html {height:100%;}
body {height:100%;}
img.normal {height:auto;}
img.big {height:50%;width:50%}
img.small {height:10%;width:50%}

image.png

设置元素的最大高度和宽度

max-height:50px;

image.png

max-width:100px;

image.png

max-width:20%;

image.png

设置元素的最低高度和最小宽度

min-height:100px;

image.png

min-width:150px;

image.png

min-width:200%;

image.png

CSS显示

隐藏一个元素

h1.hidden {visibility:hidden;}

注意，隐藏元素仍占用空间

不显示一个元素

h1.hidden {display:none;}

注意，不显示元素不占用空间

显示一个元素的内联元素

p {display:inline;}

没有这行代码效果

image.png

有这行代码效果：

image.png

显示一个元素的块元素

span
{
    display:block;
}

没有这行代码效果：

image.png

有这行代码的效果图：

image.png

CSS定位

相对浏览器窗口的位置：position:fixed;
元素的相对定位：position:relative;
元素的绝对定位：position:absolute;

重叠的元素

img
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}

image.png

设置元素的形状

img 
{
    position:absolute;
    clip:rect(0px,60px,200px,0px);
}

image.png

使用滚动条来显示元素内溢出的内容

div.ex1 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: scroll;
}

div.ex2 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: hidden;
}

div.ex3 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: auto;
}

div.ex4 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: visible;
}

image.png

设置浏览器自动溢出处理

div 
{
    background-color:#00FFFF;
    width:150px;
    height:150px;
    overflow:auto;
}

image.png

更改光标

<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>

CSS浮动

img 
{
    float:right;
}

默认显示在文字的右边

img 
{
    float:right;
    border:1px dotted black;
    margin:0px 0px 15px 20px;
}

image.png

为图像添加边框和边距并浮动到段落的左侧

img 
{
    float:right;
    border:1px dotted black;
    margin:0px 0px 15px 20px;
}

image.png

标题和图像向右侧浮动

div
{
  float:right;
  width:120px;
  margin:0 0 15px 20px;
  padding:15px;
  border:1px solid black;
  text-align:center;
}

image.png

段落的第一个字浮动到左侧

<style>
span
{
    float:left;
    width:1.2em;
    font-size:400%;
    font-family:algerian,courier;
    line-height:80%;
}
</style>

image.png

使用float属性创建一个图片廊

<style>
.thumbnail 
{
    float:left;
    width:110px;
    height:90px;
    margin:5px;
}
</style>

image.png

开启float-clear属性

<style>
.thumbnail 
{
    float:left;
    width:110px;
    height:90px;
    margin:5px;
}
.text_line
{
    clear:both;
    margin-bottom:2px;
}
</style>

image.png

创建一个水平菜单

<style>
ul
{
    float:left;
    width:100%;
    padding:0;
    margin:0;
    list-style-type:none;
}
a
{
    float:left;
    width:6em;
    text-decoration:none;
    color:white;
    background-color:purple;
    padding:0.2em 0.6em;
    border-right:1px solid white;
}
a:hover {background-color:#ff3300;}
li {display:inline;}
</style>
</head>

<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>

image.png

创建一个没有表格的网页

<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
* {
    box-sizing: border-box;
}
body {
    margin: 0;
}
.header {
    background-color: #2196F3;
    color: white;
    text-align: center;
    padding: 15px;
}
.footer {
    background-color: #444;
    color: white;
    padding: 15px;
}
.topmenu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #777;
}
.topmenu li {
    float: left;
}
.topmenu li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}
.topmenu li a:hover {
    background-color: #222;
}
.topmenu li a.active {
    color: white;
    background-color: #4CAF50;
}
.column {
    float: left;
    padding: 15px;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.sidemenu {
    width: 25%;
}
.content {
    width: 75%;
}
.sidemenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.sidemenu li a {
    margin-bottom: 4px;
    display: block;
    padding: 8px;
    background-color: #eee;
    text-decoration: none;
    color: #666;
}
.sidemenu li a:hover {
    background-color: #555;
    color: white;
}
.sidemenu li a.active {
    background-color: #008CBA;
    color: white;
}
</style>
</head>
<body>

<ul class="topmenu">
  <li><a href="#home" class="active">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系我们</a></li>
  <li><a href="#about">关于我们</a></li>
</ul>

<div class="clearfix">
  <div class="column sidemenu">
    <ul>
      <li><a href="#flight">The Flight</a></li>
      <li><a href="#city" class="active">The City</a></li>
      <li><a href="#island">The Island</a></li>
      <li><a href="#food">The Food</a></li>
      <li><a href="#people">The People</a></li>
      <li><a href="#history">The History</a></li>
      <li><a href="#oceans">The Oceans</a></li>
    </ul>
  </div>

  <div class="column content">
    <div class="header">
      <h1>The City</h1>
    </div>
    <h1>Chania</h1>
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
    <p>You will learn more about responsive web pages in a later chapter.</p>
  </div>
</div>

<div class="footer">
  <p>底部文本</p>
</div>

</body>
</html>

image.png

CSS对齐元素

使用margen的中间调整

<style>
.center {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}
</style>

image.png

左右位置对齐

<style>
.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}
</style>

image.png

左右对齐浮动

<style>
.right {
    float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}
</style>

image.png

CSS生成的内容

把括号内的URL用content属性插入到每个链接后面

<!DOCTYPE html>
<html>
<head>
<style>
a:after {content: " (" attr(href) ")";}
</style>
</head>

<body>
<p><a href="//www.runoob.com">菜鸟教程</a> - 免费的编程学习网站。</p>
<p><b>注意:</b>仅当 !DOCTYPE已经定义 IE8支持 content属性</p>
</body>
</html>

章节和分节的编号

<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body {counter-reset:section;}
h1 {counter-reset:subsection;}
h1:before
{
    counter-increment:section;
    content:"Section " counter(section) ". ";
}
h2:before 
{
    counter-increment:subsection;
    content:counter(section) "." counter(subsection) " ";
}
</style>
</head>

<body>

<p><b>注意:</b> 仅当 !DOCTYPE已经定义 IE8支持 这个属性.</p>

<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>

<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML tutorials</h1>
<h2>XML</h2>
<h2>XSL</h2>

</body>
</html>

image.png

🌹（三）CSS所有属性总结（详细实例版）

（三）CSS填充、分组和嵌套、尺寸、显示、定位、浮动、对齐元素、生成内容

CSS填充

左部填充

右部填充

顶部填充

底部填充

在一个声明中的所有填充属性

分组和嵌套

组选择器

嵌套选择器

CSS尺寸

使用像素值设置图像的高度和宽度

使用百分比设置图像的高度和宽度

设置元素的最大高度和宽度

设置元素的最低高度和最小宽度

CSS显示

隐藏一个元素

不显示一个元素

显示一个元素的内联元素

显示一个元素的块元素

CSS定位

重叠的元素

设置元素的形状

使用滚动条来显示元素内溢出的内容

设置浏览器自动溢出处理

更改光标

CSS浮动

为图像添加边框和边距并浮动到段落的左侧

标题和图像向右侧浮动

段落的第一个字浮动到左侧

使用float属性创建一个图片廊

开启float-clear属性

创建一个水平菜单

创建一个没有表格的网页

CSS对齐元素

使用margen的中间调整

左右位置对齐

左右对齐浮动

CSS生成的内容

把括号内的URL用content属性插入到每个链接后面

章节和分节的编号