javaWeb CSS

最新推荐文章于 2024-07-28 16:45:11 发布

陈弋辛

最新推荐文章于 2024-07-28 16:45:11 发布

阅读量939

点赞数

分类专栏： Java # JavaWeb 文章标签：大数据

本文链接：https://blog.csdn.net/weixin_65637841/article/details/125837088

版权

Java 同时被 2 个专栏收录

68 篇文章 2 订阅

订阅专栏

JavaWeb

20 篇文章 2 订阅

订阅专栏

1.CSS 介绍

CSS 是「层叠样式表单」。是用于 (增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

2. CSS 语法规则：

选择器：浏览器根据“选择器”决定受 CSS 样式影响的 HTML 元素（标签）

属性 (property) 是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并
由花括号包围，这样就组成了一个完整的样式声明（declaration），例如： p {color: blue}
多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的
最后可以不加分号 ( 但尽量在每条声明的末尾都加上分号 )

例如：
p{
color:red;
font-size:30px;
}
注：一般每行只描述一个属性
CSS 注释：/*注释内容*/

CSS 语法

CSS 语法由三部分构成：选择器、属性和值：
selector {property: value}
选择器 (selector) 通常是你希望定义的 HTML 元素或标签，属性 (property) 是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）：
body {color: blue}
上面这行代码的作用是将 body 元素内的文字颜色定义为蓝色。在上述例子中，body 是选择器，而包括在花括号内的的部分是声明。声明依次由两部分构成：属性和值，color 为属性，blue 为值。

值的不同写法和单位

除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000：
p { color: #ff0000; }
为了节约字节，我们可以使用 CSS 的缩写形式：
p { color: #f00; }
我们还可以通过两种方法是用 RGB 值：
p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }
请注意，当使用 RGB 百分比时，即使当值为0时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位。

记得写引号

提示：如果值为若干单词，则要给值加引号：
p {font-family: "sans serif";}
多重声明：

提示：如果要定义不止一个声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么的好处是，当你从现有的规则中增减声明时，会尽可能的减少出错的可能性。就像这样：
p {
text-align:center;color:red;
}	
你应该在每行只描述一个属性，以便使样式定义的可读性更强，就像这样：
p {
text-align: center;
color: black;
font-family: arial;
}
空格和大小写敏感

大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑：
body {
	color: #000;
	background: #fff;
	margin: 0;
	padding: 0;
	font-family: Georgia, Palatino, serif;
     }
是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。

3.CSS 和 HTML 的结合方式

3.1、内联样式

在标签的 style 属性上设置”key:value;”，修改标签样式。

内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：
        <p style="red: sienna; margin-left: 20px">
                This is a paragraph
        </p>

需求:分别定义两个 div、span 标签，分别修改每个标签的样式为：边框 1 个像素，实线，红色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1-内联样式</title>
</head>
<body>
    <!--
    需求 1：分别定义两个 div、span 标签，
    分别修改每个标签的样式为：边框 1 个像素，实线，红色。
    -->
    <div style="border:1px solid red">div标签1</div>
    <div style="border:1px solid red">div标签2</div>
    <span style="border:1px solid red">span标签1</span>
    <span style="border:1px solid red">span标签2</span>
</body>
</html>

缺点

        1.如果标签多了。样式多了。代码量非常庞大。

        2.可读性非常差。

        3.Css 代码没什么复用性可方言。

3.2 内部样式表

在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式。

格式如下：

xxx {

Key : value;

}

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在头部分定义内部样式表，就像这样:
<head>
<style type="text/css">  hr {color: red}
  p {margin-left: 20px}
  body {background-image: url("images/back40.gif")
}
</style></head>
style 标签专门用来定义 css 样式代码

需求 :分别定义两个 div、span 标签，分别修改每个标签的样式为：边框 1 个像素，实线，红色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2-内部样式表</title>
    <!--style 标签专门用来定义 css 样式代码-->
    <style type="text/css">
        /* 需求 :分别定义两个 div、span 标签，
        分别修改每个标签的样式为：边框 1 个像素，实线，红色。 */

        div{
            border:1px solid red;
        }/* 表示对div标签中添加样式：加1像素实线红色的边框 */
        span{
            border:1px solid red;
        }/* 表示对div标签中添加样式：加1像素实线红色的边框 */

    </style>
</head>
<body>
    <div>div标签1</div>
    <div>div标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>
</body>
</html>

缺点

1.只能在同一页面内复用代码，不能在多个页面中复用 css 代码。

2.维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了。

3.3 外部样式表(推荐，尽量都用此方式)

把 css 样式写成一个单独的 css 文件，再通过 link 标签引入即可复用。

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：
<head>
<linkrel="stylesheet" type="text/css" href="mystyle.css" /></head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
注意：不要在属性值与单位之间留有空格。

需求 :分别定义两个 div、span 标签，分别修改每个标签的样式为：边框 1 个像素，实线，红色。

1.css代码：

/* 需求 :分别定义两个 div、span 标签，
分别修改每个标签的样式为：边框 1 个像素，实线，红色。 */
div{
    border:1px solid red;
}
span{
    border:1px solid red;
}

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3-外部样式表</title>
    <!-- link 标签专门用来引入 css 样式代码 -->
    <link rel="stylesheet" href="css文件/1.css"/>
</head>
<body>
    <div>div标签1</div>
    <div>div标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>
</body>
</html>

3.4 多重样式

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

例如，外部样式表拥有针对 h3 选择器的三个属性：
h3{
  color: red;
  text-align:  left;  font-size:  8pt;  }
而内部样式表拥有针对 h3 选择器的两个属性：
h3 
{
 text-align: 
 right; 
 font-size: 
 20pt;
}
假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：
color: 
red; 
text-align: 
right; 
font-size: 
20pt;
即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。（可以理解为就近原则）

4.CSS选择器

4.1 标签名选择器

标签名选择器的格式是：

标签名{

属性：值;

}

标签名选择器，可以决定哪些标签被动的使用这个样式。

标签选择器

        通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

        标签名选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用标签名选择器，我们可以使 HTML 代码变得更加整洁。

        比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：
li strong {
    font-style: italic;
    font-weight: normal;
  }
请注意标记为 <strong> 的蓝色代码的上下文关系：
<p>
   <strong>
     我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用
   </strong>
</p>
<ol>
 <li>
  <strong>      我是斜体字。这是因为 strong 元素位于 li 元素内。  </strong>
 </li>  <li>我是正常的字体。</li>
</ol>
在上面的例子中，只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元素定义特别的 class 或 id，代码更加简洁。

再看看下面的 CSS 规则：
strong {
     color: red;
     }

h2 {
     color: red;
     }

h2 strong {
     color: blue;
     }
下面是它施加影响的 HTML：
<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

需求：在所有 div 标签上修改字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。

并且修改所有 span 标签的字体颜色为黄色，字体大小 20 个像素。边框为 5 像素蓝色虚线。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4-标签名选择器</title>
    <!--style 标签专门用来定义 css 样式代码-->
    <style type="text/css">
        /*
        需求 ：在所有 div 标签上修改字体颜色为蓝色，
              字体大小 30 个像素。边框为 1 像素黄色实线。
              并且修改所有 span 标签的字体颜色为黄色，
              字体大小 20 个像素。边框为 5 像素蓝色虚线。
        */
        /* 修改div中的样式 */
        div {
            font-size:30px;
            color:blue;
            border: 1px solid yellow;
        }
        /* 修改span中的样式 */
        span{
            color:yellow;
            font-size:20px;
            border:5px dashed blue;
        }

    </style>
</head>
<body>
    <div>div标签1</div>
    <div>div标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>
</body>
</html>

4.2 id选择器

id 选择器的格式是：

#id 属性值{

属性：值;

}

id 选择器，可以让我们通过 id 属性选择性的去使用这个样式。

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 "#" 来定义。

下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
#red{color:red;}#green{color:green;}
下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
注意：相同的id 属性值只能在每个 HTML 文档中出现一次。

需求：分别定义两个 div 标签

第一个 div 标签定义 id 为 id001 ，然后根据 id 属性定义 css 样式修改字体颜色为蓝色，

字体大小 30 个像素。边框为 1 像素黄色实线。

第二个 div 标签定义 id 为 id002 ，然后根据 id 属性定义 css 样式修改的字体颜色为红色，

字体大小 20 个像素。边框为 5 像素蓝色点线。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>5-id选择器</title>
    <style type="text/css">
        
        #id001 {
            color: blue;
            font-size:30px;
            border:1px yellow solid;
        }
        #id002{
            color: red;
            font-size:20px;
            border:5px dotted blue;
        }

    </style>
</head>
<body>
    <div id="id001">div标签1</div>
    <div id="id002">div标签2</div>
</body>
</html>

4.3 class选择器（类选择器）

class 类型选择器的格式是：

.class 属性值{

属性：值;

}

class 类型选择器，可以通过 class 属性有效的选择性地去使用这个样式。

CSS 中，类选择器以一个点号显示：
.center{text-align: center}
在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。

在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。
<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p> 
注意：不要使用数字起始类名！它无法在 Mozilla 或 Firefox 中起作用。

class与id区别：相同的id值在整个html中唯一，而相同的class值可以是多个。

需求：

修改 class 属性值为 class01 的 span 或 div 标签，字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。

修改 class 属性值为 class02 的 div 标签，字体颜色为灰色，字体大小 26 个像素。边框为 1 像素红色实线。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6-class选择器</title>
    <style type="text/css">
        /*
        需求 ：
        修改 class 属性值为 class01 的 span 或 div 标签，
            字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。
        修改 class 属性值为 class02 的 div 标签，
            字体颜色为灰色，字体大小 26 个像素。边框为 1 像素红色实线。
         */
        .class01 {
            color: blue;
            font-size: 30px;
            border: 1px solid yellow;
        }
        .class02 {
            color:gray;
            font-size:26px;
            border:1px solid red;
        }

    </style>
</head>
<body>
    <div class="class01">div标签1</div>
    <div class="class02">div标签2</div>
    <span class="class01">span标签1</span>
    <span>span标签2</span>
</body>
</html>

4.4 组合选择器

组合选择器的格式是：

选择器 1 ，选择器 2，选择器 n{

属性：值;

} /* 选择器之间有逗号为或关系，只有空格为且关系 */

组合选择器可以让多个选择器共用同一个 css 样式代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7-组合选择器</title>
    <style type="text/css">
        div{
            color:red;
        }
        div p,.class01{
            color:blue;
        }
    </style>
</head>
<body>
<div>
    <p id="id01">hello word</p>
    <span>hello word</span>
    <p>!!!</p>
    <span class="class01">你好，世界</span>
</div>
</body>
</html>

5.常用样式：

5.1 字体样式

CSS 字体属性

属性描述语法
font 简写属性。作用是把所有针对字体的属性设置在一个声明中。
font : font-style || font-variant || font-weight || font-size || line-height || font-family

font-family 设置字体系列。
font-family : 字体名称

font-size 设置字体的尺寸。
font-size :length

font-style 设置字体风格。
font-style : normal（默认，正常字体） | italic(斜体)

font-weight 设置字体的粗细。
font-weight : normal (400) | bold (700) | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

属性	描述	语法
font	简写属性。作用是把所有针对字体的属性设置在一个声明中。	font : font-style \|\| font-variant \|\| font-weight \|\| font-size \|\| line-height \|\| font-family
font-family	设置字体系列。	font-family : 字体名称
font-size	设置字体的尺寸。	font-size :length
font-style	设置字体风格。	font-style : normal（默认，正常字体） \| italic(斜体)
font-weight	设置字体的粗细。	font-weight : normal (400) \| bold (700) \| bolder \| lighter \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900

5.2 尺寸样式

属性描述语法
width 设置宽度 width:length
height 设置高度 height:length

属性	描述	语法
width	设置宽度	width:length
height	设置高度	height:length

5.3 文本样式

CSS 文本属性

属性描述语法
color 设置文本颜色 color:颜色名称
line-height 设置行高。 line-height:length
text-align 对齐元素中的文本。 text-align:left | center | right

属性	描述	语法
color	设置文本颜色	color:颜色名称
line-height	设置行高。	line-height:length
text-align	对齐元素中的文本。	text-align:left \| center \| right

5.4 背景属性

CSS 背景属性

属性描述语法
background-color 设置元素的背景颜色。 background-color：颜色名称

属性	描述	语法
background-color	设置元素的背景颜色。	background-color：颜色名称

5.5 边框样式

CSS 边框属性

属性描述语法
border 简写属性，用于把针对四个边的属性设置在一个声明。
border : border-width || border-style || border-color

border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-style : none（默认，无边框） | hidden（隐藏边框） | dotted（点线） | dashed（虚线） | solid（实线） | double（双实线）

border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 border-width:length
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。 border-color:颜色名称
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 设置元素的上边框的宽度。同上

属性	描述	语法
border	简写属性，用于把针对四个边的属性设置在一个声明。	border : border-width \|\| border-style \|\| border-color
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。	border-style : none（默认，无边框） \| hidden（隐藏边框） \| dotted（点线） \| dashed（虚线） \| solid（实线） \| double（双实线）
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。	border-width:length
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。	border-color:颜色名称
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	设置元素的上边框的宽度。	同上

5.6 外边距样式

CSS 外边距属性

属性描述语法
margin 简写属性。在一个声明中设置所有外边距属性。
margin:length

        如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。

        如果只提供一个，将用于全部的四边。

        如果提供两个，第一个用于上－下，第二个用于左－右。

        如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。

margin-bottom 设置元素的下外边距。 margin-bottom:length
margin-left 设置元素的左外边距。 margin-left:length
margin-right 设置元素的右外边距。 margin-right:length
margin-top 设置元素的上外边距。 margin-top:length

属性	描述	语法
margin	简写属性。在一个声明中设置所有外边距属性。	margin:length 如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
margin-bottom	设置元素的下外边距。	margin-bottom:length
margin-left	设置元素的左外边距。	margin-left:length
margin-right	设置元素的右外边距。	margin-right:length
margin-top	设置元素的上外边距。	margin-top:length

5.7 内边距样式

CSS 内边距属性

属性描述语法
padding 简写属性。作用是在一个声明中设置元素的所内边距属性。
padding：length

        如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。

        如果只提供一个，将用于全部的四边。

        如果提供两个，第一个用于上－下，第二个用于左－右。

        如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。

padding-bottom 设置元素的下内边距。 padding -bottom:length
padding-left 设置元素的左内边距。 padding -left:length
padding-right 设置元素的右内边距。 padding -right:length
padding-top 设置元素的上内边距。 padding -top:length

属性	描述	语法
padding	简写属性。作用是在一个声明中设置元素的所内边距属性。	padding：length 如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
padding-bottom	设置元素的下内边距。	padding -bottom:length
padding-left	设置元素的左内边距。	padding -left:length
padding-right	设置元素的右内边距。	padding -right:length
padding-top	设置元素的上内边距。	padding -top:length

注意：IE浏览器：对象实际尺寸 = width
chrome浏览器：对象实际尺寸= width+左右border-width+padding

5.8 表格样式

CSS Table 属性

属性描述语法
border-collapse 设置是否把表格边框合并为单一的边框。
border-collapse : separate（默认，边框独立） | collapse（边框合并）

border-spacing 设置分隔单元格边框的距离。（仅用于 "separated borders" 模型） border-spacing：length

属性	描述	语法
border-collapse	设置是否把表格边框合并为单一的边框。	border-collapse : separate（默认，边框独立） \| collapse（边框合并）
border-spacing	设置分隔单元格边框的距离。（仅用于 "separated borders" 模型）	border-spacing：length

5.9 定位样式

属性描述语法
float 定义元素在哪个方向浮动。（一般用于相对位置时）
float : none | left | right

position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
position : static(默认，无特殊定位) | absolute （

将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。
）| relative（

对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置
）

bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 bottom ：length
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 left：length
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 right：length
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 top：length

6.案例

6.1 盒子模型

6.1.1 方式1

css代码：

body{
    /* 让body与页面边界间距为0 */
    margin:0;
    padding:0;
}
div{
    /* 让所有div对其父对象绝对移动*/
    position:absolute;
}
#div1{
    width:400px;
    height:400px;
    background-color:greenyellow;
}
#div2 {
    width:200px;
    height:200px;
    background-color:orange;

    /* 让div2相对与div1居中*/
    margin-top:100px;
    margin-left:100px;
    /*margin:100px;*/

}
#div3 {
    width:100px;
    height:100px;
    background-color:deepskyblue;

    /* 让div3相对与div2居中*/
    margin-top:50px;
    margin-left:50px;
}

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>8-盒子模型</title>
    <link rel="stylesheet" href="css文件/2.盒子模型1.css"/>
</head>
<body>
    <div id="div1">
        <div id="div2">
            <div id="div3">&nbsp;</div>
        </div>
    </div>
</body>
</html>

6.1.2 方式2

css代码：

body{
    /* 让body与页面边界间距为0 */
    margin:0;
    padding:0;
}
div{
    /* 让所有div对其父对象绝对移动*/
    position:absolute;
}
#div1{
    width:400px;
    height:400px;
    background-color:greenyellow;
}
#div2 {
    width: 100px;
    height: 100px;
    background-color: orange;

    /* 让div2相对与div1居中*/
    margin-top: 100px;
    margin-left: 100px;
    /*margin:100px;*/

    /* 对div2内部进行填充，使div3相对于div2居中 */
    padding:50px;

}
#div3 {
    width:100px;
    height:100px;
    background-color:deepskyblue;
}

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>8-盒子模型</title>
    <link rel="stylesheet" href="css文件/3.盒子模型2.css"/>
</head>
<body>
    <div id="div1">
        <div id="div2">
            <div id="div3">&nbsp;</div>
        </div>
    </div>
</body>
</html>

注意：IE浏览器：对象实际尺寸 = width
chrome浏览器：对象实际尺寸= width+左右border-width+padding

这里使用的是 chrome浏览器：所以div2宽高都只能设置为100px,剩下长度用padding撑大

6.2 水果库存静态页面

需求：制作如下图布局：

css代码：

body{
    margin:0;
    padding:0;
    background:#808080;
}
#div{
    position: relative;
    float:left;
    /*对所有的div进行左浮动*/
}

#div_container{
    width:80%;
    height:550px;
    border:1px blue solid;
    background-color:honeydew;
    margin-left:10%;
}
#div_table{
    width:60%;
    margin-left:20%;
    margin-top:120px;
}
#tab_fruit{
    width:100%;
    line-height:28px;
}
#tab_fruit,#tab_fruit tr,#tab_fruit th,#tab_fruit td{
    border:1px solid gray;
    border-collapse: collapse;
    text-align:center;
    font-size:16px;
    font-family:"宋体";
}
.class01{
    width:20%;
}
.class02{
    width:24px;
    height:24px;
}

html：代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>9-水果库存静态页面</title>
    <link rel="stylesheet" href="css文件/4.水果库存静态页面.css"/>
</head>
<body>
<div id="div_container">
    <div id="div_table">
        <table id="tab_fruit">
            <tr>
                <th class="class01">名称</th>
                <th class="class01">单价</th>
                <th class="class01">数量</th>
                <th class="class01">小计</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>苹果</td>
                <td>5</td>
                <td>20</td>
                <td>100</td>
                <td><img src="imgs/del.jpg" class="class02"/></td>
            </tr>
            <tr>
                <td>西瓜</td>
                <td>3</td>
                <td>20</td>
                <td>60</td>
                <td><img src="imgs/del.jpg" class="class02"/></td>
            </tr>
            <tr>
                <td>菠萝</td>
                <td>4</td>
                <td>45</td>
                <td>100</td>
                <td ><img src="imgs/del.jpg" class="class02"/></td>
            </tr>
            <tr>
                <td>榴莲</td>
                <td>3</td>
                <td>30</td>
                <td>90</td>
                <td><img src="imgs/del.jpg" class="class02"/></td>
            </tr>
            <tr>
                <td>总计</td>
                <td colspan="4">350</td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

陈弋辛

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
javaWeb CSS

CSS 是「层叠样式表单」。是用于 (增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS 语法CSS 语法由三部分构成：选择器、属性和值：selector {property: value}选择器 (selector) 通常是你希望定义的 HTML 元素或标签，属性 (property) 是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）：body {color: blue}...
复制链接

扫一扫

专栏目录