div盒子模型

来源：互联网发布：伪娘丁丁套淘宝编辑：程序博客网时间：2024/05/30 05:25

一、盒模型

1.定义：也称为盒子模型或者框模型，每一个封闭区域都可以把它看作一个盒子模型，依照盒子的属性来确定区域的样式。包括内容(content)、填充(padding)、边框(border)、边界(margin)等属性。如下图：

图中最内部的框是元素的实际内容，也就是内容框，紧挨着元素框外部的是内边距padding，其次是边框（border），然后最外层是外边距（margin），整个构成了框模型。通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。而外边距margin是透明的，不会遮挡周边的其他元素。

2.盒模型的区域划分

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

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

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

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

让边框显示不同的颜色：

<!DOCTYPEhtml>

<html>

<head>

.box{

width: 30px;

height: 30px;

background-color: aqua;

border: 50px solid green;

border-right-color: red;

border-left-color: green;

border-bottom-color: blueviolet;

border-top-color: blue;

}

</style>

</head>

<body>

<divclass="box"></div>

</body>

</html>

显示效果：

<!DOCTYPEhtml>

<html>

<head>

.box {

width: 0px;

height: 0px;

border: 50px solid orchid;

border-right-color: transparent;/*透明的*/

border-left-color: transparent;

border-bottom: none;

}

</style>

</head>

<body>

<divclass="box"></div>

</body>

</html>

显示效果：

3.给盒子设置大小内外边距和边框的时候注意点：

1）如果设置了边框或者内边距，一定要减小宽高

2）如果设置了边框，减小宽高

3）如果设置了内边距，减小宽度

塌陷现象：通过margin设置外边距的时候，如果重叠，则取大值

Margin和padding如何区别使用：兄弟元素用margin，父子元素用padding

注意点：

如果父子元素设置内边距，用margin来做，margintop是会存在问题

解决方式：1）给父盒子设置一个边框即可

2）添加overflow属性，值位hidden

二、块级元素(block)

先介绍一下文档流：每个页面的内容元素符合标准文档流的布局（从上往下、从左往右摆放元素）

1.块级元素的特性：(1)总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示，内部可以继续容纳其他元素;

(2)宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

2.元素包括： 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等

三、内联元素(inline)

1.特性：(1)默认和其他元素在同一行

(2)不遵循盒模型特性设置，宽高只和内容有关

2.元素包括：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

四、块级元素和内联元素相互转换

(1)块级元素->内联元素：增加css属性display:inline

(2)内联元素->块级元素：增加css属性 display:block

(3)既具有内联元素的性质又具有块级元素的性质：增加css属性display:inline-block。

五、脱标实现，浮动

1.定义：让标签脱离标准文档流的约束限制，独自进行定位设置

2.约束：一般脱标设置的都是块级元素（内联元素可以脱标，不常用）

3.实现方式：浮动、绝对定位、固定定位

4.浮动：给元素的float属性赋值后，标签会脱标，停留在浮动层；

浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去；

如果填充的元素为块级元素且发生了重叠，浮动元素覆盖块级元素；

如果之前是内联标签，浮动后，是可以设置宽高度（因为脱标了）。

所有脱标的元素，都符合盒模型的约束规则

阅读全文

0 0