前端重要盒子模型 浮动 定位 块级元素、行元素 7.9

1、块级元素的特点：

　　（1）块级元素里面的内容，或者背景图片，默认显示在块的左上角
　　（2）块级元素，默认情况下，单独占满一行。

　　常用的块级元素：div、p、h1-h6、hr、ul li、ol li、table、body...

 

2、浮动：float 

　　作用：通过漂浮，让块级元素实现并排

　　float:left 或 right

　　注意：如果div左边或者右边的块存在浮动，会对此div产生影响，此时需要清除左右方的浮动

　　清除浮动：clear:left（清除左边div的浮动）或right（清除右边div的浮动）或both（同时清除两侧的浮动）

　　简单说明：想排在一行就使用浮动（float:left） ，想提行就清除浮动（直接用 clear：both 即可，不用管左右）

 

3、盒子模型：

　　（1）border：边框
　　　　border-top：上边框
　　　　border-left：左边框
　　　　border-right：右边框
　　　　border-bottom：下边框

　　（2）padding：内边距（框内文字距离框线的间距）有3种写法

　　　　第一种：上下左右 padding:10px;
　　　　第二种：上下 左右 padding:10px 20px;
　　　　第三种：上 右 下 左 padding:10px 20px 10px 15px;

　　（3）margin：外边距（边框对边框外其他内容的间距）有3种写法

　　　　第一种：上下左右 margin:10px;
　　　　第二种：上下 左右 margin:10px 20px;
　　　　第三种：上 右 下 左 margin:10px 20px 10px 15px;

　　注意：在设定好宽度时，padding会把盒子撑开，此时可以通过减小width、height的值来保持盒子原大小

　　*{ padding,margin:0px;}：默认网页里所有的标签都内外间距为0

 

4、行内元素的特点：

　　（1）默认情况下，不受到height、width属性的影响

　　（2）不会占满一行

　　常用的行内元素：span（适用于一小节文字的样式设定）、a（链接）

　　【备注】 display:block;  将 行内元素 转成 块级元素 

 

5、绝对定位 & 相对定位：

　　（1）绝对定位：position:absolute;

　　　　当设置一个块级元素为绝对定位的时候，它就脱离了文档流，浮动就不会对它有影响

　　　　此时对它设置top、left、right、bottom，就是针对窗体的距离

　　（2）相对定位：position:relation;

　　　　当设置一个块级元素为相对定位的时候，它没有脱离文档流，浮动对它是有影响的

　　　　此时对它设置top、left、right、bottom，是针对上一级容器的距离

　　　　【注意】当相对定位的前面有块级元素占据位置时，则实际距离=设置距离+占位块级元素宽或高

【请大家多多实践，结合 浮动float、清除浮动 clear、绝对及相对定位】

转载于:https://www.cnblogs.com/marchtree/p/4637677.html