盒子模型、层模型、浮动模型以及清除浮动流方法

盒子模型

组成成分：外边距（margin）、边框线（boder）、内边距（padding）、内容（content=height*width）

可视化部分高度=2*边框线+2*内边距+内容（高）

可视化部分高度=2*边框线+2*内边距+内容（宽）

用法：div{boder:边框线大小 线的类型 颜色}

 

 

div{

width:100px;

height:100px;

backgroud-color:red;

boder:10px solid black;

padding:10px:

margin:10px;

}

bfc块级格式化上下文（block format context）

margin塌陷解决方法

如何触发一个盒子的bfc

position：absolute

display：inline

float:left/right

overflow:hidden 溢出部分

 

层模型（定位）

例如：

div{

position:absolute/relative;

left:10px;

top:10px;

}

注：left从左至右定位

top从上至下定位

1.绝对定位(absolute)

定义：脱离原来位置定位

相对于有定位的父级进行定位，如果没有，那么相对于文档定位

2.相对定位(relative)

定义：保留原来位置定位

相对于自己进行定位来位置

3.固定定位（fixed）

定义：固定盒子位置，无论滚动条如何移动，都不会在屏幕中消失

 

注:父相子绝（父元素相对定位，子元素绝对定位）

 

浮动模型

1.将独占一行的元素按顺序进行排序（从左或者从右）浮动

2.在浮动的基础上可以进行外边框（margin）的设置

3.浮动元素产生浮动流，所有产生了浮动流的元素，块级元素看不到他们

4.产生了bfc的元素和文本类属性（inline）的元素以及文本都能看到浮动元素

注：无视行级元素或者块级元素

div{

float:left/right

}

清除浮动流(在最后一个浮动元素中添加p标签，添加clear选择器)：

.clearfix::after{
    content: "";
    display: block;
    clear: both;
}

父级包住浮动元素的方法

p{

clear：left/right/both

}

开发语法归类

1.行级元素(inline)

特点：内容决定元素所占位置，不可以通过CSS改变宽高

元素：span strong em a del....

 

2.块级元素(block)

特点：独占一行，可以通过CSS改变宽高

元素：div p ul li ol form address...

 

3.行级块元素(line-block)

元素：img

bug:多个image并列时，会存在空格现象，直接将多个img标签放在同一行即可

 

注：凡是带有inline属性的元素都带有文字特性

 

改变块级元素为行级元素：

div{

display:inline

}

 

开发思想归类

1.先写HTML文件，再写CSS文件

2.先写CSS文件，根据CSS文件写HTML（优先）

 

注：先看CSS库，再编写代码