21 , CSS 构造模型

最新推荐文章于 2024-09-06 20:49:44 发布

原创最新推荐文章于 2024-09-06 20:49:44 发布 · 242 阅读

1 ·

CC 4.0 BY-SA版权

DIV+CSS 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了CSS中的div元素使用方法，包括添加div、子div及上下文选择器的应用；讲解了外边距与内边距的概念及其设置方式，特别是如何通过margin属性使元素居中；探讨了边框样式的多种类型及其宽度与颜色的设定；还涉及了相对定位与绝对定位的区别，以及浮动的基本用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

div
边距
边框
定位
浮动

1 21.1 div

部分(division)—

元素,经常以 div 形式引用—是 XHTML 元素,用于定义 XHTML 文

件中的区域.

1.添加 div

This is our content area.

给 div 添加一个 id

This is our content area.

#container {

Padding: 20px;

Border:1px solid #000;

Background:#ccc;

}

2.添加子 div

This is our content area.

I’m in a box!

I’m also in a box!

.box {

margin: 10px;

padding: 20px;

border:1px solid #000;

}

3.div 和上下文选择器

.box p {

Color: #333;

}

#container p {

Color: #333;

}

2 21.2 边距

外边距(margin)

外边距声明:

#container {

Margin:-top: 20px;

Margin-left: auto;

Margin-right: auto;

Margin-bottom; 20px;

Width: 300px;

Border: 1px solid #333;

Padding: #ccc;

}

#container {

Margin: 20px auto 1em auto; /上,右,下 , 左/

}

用 margin:auto 居中

Body {

Text-align: center;

}

#container {

Width: 400px;

Margin: 10px auto 10px auto;

Padding: 20px;

Background: #ccc;

Text-align: left;

}

5.内边距(padding)

#container {

Padding-top: 20px;

Padding-left: 10%;

Padding-right: 1em;

Padding-bottom: 0;

Background: #ccc;

}

6.外边距,内边距和主体

Body {

Margin: 0;

Padding: 0;

}

3 21.3 边框

Border-style (边框样式)

None(无边框),dotted(点线),dashed(虚线),

Solid(实现),double(双线),groove(凹槽),ridge(凸槽),

Inset(凹边),outset(凸边)

/上右下左/

Border-style: solid dotted inset outset;

Border-width(长度)

Border-top-width

Border-right-width

Border-bottom-width

Borer-left-width

Border-color

Border

Border-top

Border-right

Border-bottom

Border-left

Border(四周)Border-top(上)…

4 21.4 定位

P,h1 和 div 等成为块级元素.意思是这些元素显示为一块内容,即”块框”.与之相

反,strong 和 span 等元素称为行内元素,即”行内框”.更多内容 , 后章在述.

(1).相对定位

#myBox {

Position: relative;

Top: 20px;

Left: 20px;

}

(2).绝对定位

#myBox {

Position:absolute;

Top: 20px;

Left: 20px;

}

5 21.5 浮动

.news img {

Float: left;

}

.news p {

Float: right;

}

11构造模型上下文选择器

无标题文档

构造模型构造模型

构造模型2构造模型2

　　12构造模型边距无标题文档

构造模型构造模型

构造模型2构造模型2

　　13构造模型定位无标题文档

构造模型构造模型