前端之CSS——盒子模型和浮动
1、CSS盒子模型
HTML文档中的每一个元素都被描绘成矩形盒子，这些矩形盒子经过一个模型来描述其占用空间，这个模型称为盒子模型。css
盒子模型经过四个边界来描述：margin（外边距），border（边框），padding（内填充），content（内容区域），如图所示：html
须要注意：浏览器的调试窗口一般会有类似的模型可供开发调试使用。前端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 200px; height: 200px; padding: 20px; /*border: 10px solid red;*/ /*margin: 300px;*/ } </style> </head> <body> <!--盒模型：在网页中基本上都会显示一些方方正正的盒子，这种盒子就被称为盒模型 重要的属性：width,height,padding,border,margin width:指的是内容的宽度，而不是整个盒子真实的宽度 height:指的是内容的高度，而不是整个盒子真实的高度 作一个402*402的盒子，你应该如何去设计 --> <div> 中共党媒《人民日报》海外版公众号「侠客岛」日前评论称，随著「断交」的骨牌效应愈来愈明显，你们都在猜，下一个跟台「断交 」的会是谁。然而与其猜谜语，不如务实点，其实「一中原则」正是台湾「断交潮」背后隐藏的密码。只要有心，原本不难发现，可有人就是装做「视而不见」。 </div> </body> </html>
一、content（内容区域）
盒子的内容，显示文本和图像。CSS中的width和height属性直接做用的区域。python
width：指的是内容的宽度，而不是整个盒子真实的宽度。linux
height：指的是内容的高度，而不是整个盒子真实的高度。web
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒模型的计算</title> <style type="text/css"> /* 作一个402*402的盒子，你应该如何去设计 */ /*div{*/ /*width: 400px;*/ /*height: 400px;*/ /*border: 1px solid red;*/ /*}*/ /*div{*/ /*width: 200px;*/ /*height: 200px;*/ /*border: 1px solid red;*/ /*padding: 100px;*/ /*}*/ div{ width: 0; height: 0; border: 1px solid red; padding: 200px; } </style> </head> <body> <!--若是想保证盒子的真实宽度，加width应该减padding 减width应该加padding--> <div> 内容 </div> </body> </html>
二、padding（内填充）
padding即内边距，padding的区域是有背景颜色的。且背景颜色和内容区域的颜色一致。segmentfault
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>padding</title> <style type="text/css"> .box{ width: 300px; height: 300px; padding: 20px; background-color: red; } </style> </head> <body> <!-- padding：就是内边距，padding的区域是有背景颜色的。且背景颜色和内容区域颜色同样。 也就是说background-color这个属性将填充全部的border内容之内的区域。 --> <div class="box"> 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 </div> </body> </html>
能够看到背景颜色设置后，padding区域的颜色和内容区域的颜色都是红色。浏览器
也就是说，background-color这个属性将填充全部的border内容之内的区域。前端工程师
内边距的距离：边框到内容之间的距离。ide
注意：
1.padding有四个方向，因此可以分别描述四个方向的padding。
2.padding描述方法分两种：（1）小属性；（2）综合属性（空格隔开）
小属性设置——控制每一个方向的宽度
/* 小属性设置 控制每一个方向上的宽度*/ padding-top: 30px; padding-right: 30px; padding-left: 30px; padding-bottom: 30px;
综合属性设置——用空格隔开，顺时针方向设置
/* 综合属性，用空格隔开 顺时针方向 上右下左*/ padding: 20px 30px 40px 50px;
当不设置四个值的时候状况以下：
/*只设置了三个值：上 左右 下*/ padding: 20px 30px 40px; /*只设置两个值：上下 左右*/ padding: 35px 45px; /*只设置一个值：上下左右*/ padding: 20px;
特别须要注意，当设置的是三个值的时候，第二个值设置的是左右两边的内边距。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>padding</title> <style type="text/css"> .box{ width: 300px; height: 300px; /*padding: 20px;*/ background-color: red; /*border: 3px solid yellow;*/ /* 小属性设置 控制每一个方向上的宽度*/ padding-top: 30px; padding-right: 30px; padding-left: 30px; padding-bottom: 30px; /* 综合属性，用空格隔开 顺时针方向 上右下左*/ /*padding: 20px 30px 40px 50px;*/ /*只设置了三个值：上 左右 下*/ /*padding: 20px 30px 40px;*/ /*只设置两个值：上下 左右*/ padding: 35px 45px; /*只设置一个值：上下左右*/ padding: 20px; } </style> </head> <body> <!-- padding：就是内边距，padding的区域是有背景颜色的。且背景颜色和内容区域颜色同样。 也就是说background-color这个属性将填充全部的border内容之内的区域。 内边距的距离：边框到内容之间的距离。 padding有四个方向，因此说咱们能分别描述4个方向的padding。 方法有两种：一、写小属性 二、写综合属性 用空格隔开 --> <div class="box"> 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 </div> </body> </html>
注意：padding不支持负值
扩展：一些标签默认是有padding的（e.g. ul）
在一般作站中，每每须要清除默认的padding，margin
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签的默认padding</title> <style type="text/css"> *{ padding: 0; margin: 0; } </style> </head> <body> <ul> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> </body> </html>
可是*效率不高，因此要使用并集选择器来选中页面中应有的标签。已经有人将清除默认样式表的代码写好了。（css-reset 代码）
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
关于padding清除具体示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签的默认padding</title> <style type="text/css"> *{ padding: 0; margin: 0; } </style> </head> <body> <!-- 好比说一般作站的时候，要清除默认的padding,margin *效率不高，因此要使用并集选择器来选中页面中应有的标签。 （不用背，由于有人已经给我们写好了这些清除默认的样式表） body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; } --> <ul> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> </body> </html>
三、border（边框）
border是边框的意思，边框有三要素：粗细、线性、颜色。
值 | 描述
none | 无边框
dotted | 点状虚线边框
dashed | 矩形虚线边框
solid | 实线边框
三要素的特性：
border: 5px solid blue;
1.若是颜色不写（blue），默认是黑色；
2.若是粗细不写（5px），默认是不显示的。
3.若是只写了线性样式（solid），默认上右下左3px的宽度，默认是黑色。
注意：设置border样式有两种方法：按照三要素、按照方向。
1.以三要素设置border样式
/*按照3要素*/ border-width: 5px; border-style: solid; border-color: red;
三要素还能够像padding那样的综合属性顺时针设置
/*3要素进阶*/ border-width: 5px 10px; /* 上下：5px 左右：10px */ border-style: solid dotted double dashed; /* 顺时针：上:实线边框 右:点状虚线 下:双线 左:矩状虚线 */ border-color: red green yellow; /*上:红 左右:绿 下:黄*/
2.按照方向设置border样式
/*按照方向去分*/ /*上*/ border-top-width: 10px; border-top-color: red; border-top-style: solid; /*右*/ border-right-width: 10px; border-right-color: red; border-right-style: solid; /*下*/ border-bottom-width: 10px; border-bottom-color: red; border-bottom-style: solid; /*左*/ border-left-width: 10px; border-left-color: red; border-left-style: solid;
上面的写法很是繁琐，还有相似下面的简单写法：
border-left: 10px solid red;
3.设置border的样式为空
/*清除border*/ border: none; /*设置一边的border没有样式*/ border-right: none; border-top: 0;
小练习：使用border制做小三角。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> <!--小三角箭头指向上方--> div{ width: 0; height: 0; border-bottom: 20px solid red; border-left: 20px solid transparent; /* 透明 */ border-right: 20px solid transparent; } </style> </head> <body> <div> </div> </body> </html>
注意：用transparent把border设置为透明色，用border边角实现了小三角。
四、margin（外边距）
margin： 外边距，指的是元素与元素之间的距离。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{ width:300px; height: 300px; border: 1px solid red; background-color: green; /*margin:20px;*/ margin-top: 30px; margin-left: 50px; margin-bottom: 100px; } p{ border: 1px solid green; } </style> </head> <body> <!--margin：外边距 指得是距离--> <div></div> <p>我是一个p标签</p> </body> </html>
margin特性：
1）margin 的4个方向
2）margin会改变实际大小，背景色不会渲染到margin区域 这个区域会以空白显示，可是也属于盒子的一部分
3)margin是添自身的,若是哪一个想要改变本身的位置，就给谁添加margin html的部分标签自带margin padding p body ul
margin垂直方向塌陷问题及解决：
当两个兄弟盒子设置垂直方向的margin时，以较大的margin值为准，这种现象称为“塌陷”。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin的塌陷</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box1{ width: 300px; height: 200px; background-color: red; margin-bottom: 20px; } .box2{ width: 400px; height: 300px; background-color: green; margin-top: 50px; } </style> </head> <body> <div class="father"> <!--当给两个兄弟盒子设置垂直方向上的margin， 那么以较大的为准，咱们称这种现象叫塌陷 --> <div class="box1"></div> <div class="box2"></div> </div> </body> </html>
box1的margin-bottom：20px，box2的magin-top：50px;在浏览器上，上下盒子的实际距离是50px。
浮动的盒子垂直方向不会塌陷，能够解决margin塌陷问题.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin的塌陷</title> <style type="text/css"> *{ padding: 0; margin: 0; } .father{ width: 400px; overflow: hidden; border: 1px solid green; } .box1{ width: 300px; height: 200px; background-color: red; margin-bottom: 20px; float: left; } .box2{ width: 400px; height: 300px; background-color: green; margin-top: 50px; float: left; } </style> </head> <body> <div class="father"> <!--当给两个兄弟盒子设置垂直方向上的margin， 那么以较大的为准，咱们称这种现象叫塌陷 浮动的盒子垂直方向不塌陷 --> <div class="box1"></div> <div class="box2"></div> </div> </body> </html>
须要注意的是，水平方向上标准流的盒子margin是不会塌陷的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin的塌陷</title> <style type="text/css"> *{ padding: 0; margin: 0; } .father{ width: 400px; overflow: hidden; border: 1px solid green; } .box1{ width: 300px; height: 200px; background-color: red; margin-bottom: 20px; float: left; } .box2{ width: 400px; height: 300px; background-color: green; margin-top: 50px; float: left; } span{ background-color: red; } span.a{ margin-right: 20px; } span.b{ margin-left: 20px; } </style> </head> <body> <div class="father"> <!--当给两个兄弟盒子设置垂直方向上的margin， 那么以较大的为准，咱们称这种现象叫塌陷 浮动的盒子垂直方向不塌陷 --> <div class="box1"></div> <div class="box2"></div> </div> <span class="a">内容</span> <span class="b">内容</span> </body> </html>
水平居中盒子介绍（margin:0 auto）
要将标准流下的盒子水平居中须要用到以下属性：
/*水平居中盒子*/ margin: 0 auto; /*水平居中另外一种表示*/ margin-left: auto; margin-right: auto;
注意：
1.使用margin: 0 auto; 水平居中盒子，必需要有width，并且是必需要有明确的width。
2.只有标准流下的盒子才能使用margin: 0 auto; 这个属性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin:0 auto</title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ width: 780px; height: 50px; background-color: red; /*水平居中盒子*/ margin: 0 auto; /*水平居中另外一种表示*/ /*margin-left: auto;*/ /*margin-right: auto;*/ /*文字居中的属性*/ text-align: center; float: left; } </style> </head> <body> <div> <!-- 1.使用margin:0 auto; 水平居中盒子，必需要有width，并且是必需要有明确的width。 文字水平居中使用text-align:center 2.只有标准流下的盒子才能使用margin：0 auto;这个属性。 当一个盒子浮动了，固定定位，绝对定位了，margin:0 auto;就不能用了 3.margin:0 auto;是居中盒子而不是居中文本，文字水平居中使用test-align; --> 文字 </div> </body> </html>
当一个盒子浮动了，固定定位，绝对定位了，margin: 0 auto; 就不能用了
3.margin: 0 auto; 是居中盒子而不是居中文本，文字水平居中使用test-align:center;
/*文字居中的属性*/ text-align: center;
2、标准文档流
一、什么是标准文档流？
宏观得讲，咱们的web页面和ps等设计软件有本质的区别。
web网页的制做是一个"流"的概念,从上而下，像"织毛衣"；而设计软件，想往哪里画东西，就去哪里画。
二、标准文档流下的微观现象
1.空白折叠现象:多个空格和换行在网页上只显示为一个空格（ ）
2.高矮不齐，底边对齐:一行中多个元素大小不相同，但都会保证底边是对齐的。
3.自动换行，一行写不满，换行写。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> span{ font-size: 25px; } </style> </head> <body> <!--什么是标准文档流 宏观得讲，咱们的web页面和ps等设计软件有本质的区别。 web网页的制做是一个"流"的概念,从上而下，像"织毛衣" 而设计软件，想往哪里画东西，就去哪里画。 标准文档流下有哪些微观现象？ 1.空白折叠现象:多个空格和换行在网页上只显示为一个空格（ ） 2.高矮不齐，底边对齐:一行中多个元素大小不相同，但都会保证底边是对齐的。 3.自动换行，一行写不满，换行写。 --> <div> 文字 文字文字文字文字<span>姚明</span>文字文字文字文字文字文字 <img src="./images/homesmall.png" alt=""> <img src="./images/homesmall2.png" alt=""> </div> </body> </html>
3、块级元素、行内元素和行内块级元素转换关系
在HTML中有关于标签元素的分类：块级元素、行内元素和行内块级元素
在css选择器内，能够经过display属性对块级元素、行内元素、行内块元素进行转换，从而调整显示效果。
display的功能：1.控制HTML元素的显示和隐藏 2.块级元素与行内元素的转换。
一、display:inline 转化为行内元素
<style type="text/css"> .box1{ display: inline; /* 经过inline将块级元素转化为行内元素 */ width: 200px; height: 40px; border: 1px solid red; } <body> <div class="box1">内容</div> <div class="box1">内容</div> </body>
上述代码中，经过display:inline将div这种块级元素转化为了行内元素，div内的内容在一行内显示。
二、display:block 转化为块级元素
<style type="text/css"> span{ background-color: yellow; width: 100px; /* 给行内元素设置高度宽度是不起做用的 */ height: 40px; display: block; /* block将行内元素转化为块级元素 */ } <body> <span>alex</span> <span>alex</span> </body>
上述代码中，<span>是行内元素，行内元素的特色就是元素的高度、宽度及边距不可设置，display:block转化为块级元素后，span内的内容分行显示，且高度、宽度设置生效。
三、display：inline-block 转化为行内块级元素
<style type="text/css"> .box1{ display: inline-block; /* 经过inline-block将块级元素转化为行内块级元素 */ width: 200px; height: 40px; border: 1px solid red; } </style> <body> <div class="box1">内容</div> <div class="box1">内容</div> <div class="box2">内容</div> </body>
上述代码，把<div>这个块级元素转化为了行内块级元素。box1的元素都在一行上；元素的高度、宽度等均可设置。
四、display:none 隐藏当前的标签
img{ width: 300px; height: 300px; display:none; /* 隐藏当前的标签 不占位置 */ }
display：none隐藏标签不占位置。在此须要注意和visibility:hidden进行区分。
img{ /* 行内块级元素，能够设置高度和宽度，也都在一行内展现 */ width: 300px; height: 300px; /*display: none; /* 隐藏当前的标签 不占位置 */ */ visibility:hidden; /* 隐藏当前的标签 占位置 */ }
转化关系代码示例以下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>块级和行内元素</title> <style type="text/css"> .box1{ display: inline; /* 经过inline将块级元素转化为行内元素 */ width: 200px; height: 40px; border: 1px solid red; } .box2{ margin-top: 20px; width: 200px; height: 40px; border: 1px solid green; } span{ background-color: yellow; width: 100px; /* 给行内元素设置高度宽度是不起做用的 */ height: 40px; display: block; /* block将行内元素转化为块级元素 */ } img{ /* 行内块级元素，能够设置高度和宽度，也都在一行内展现 */ width: 300px; height: 300px; display: none; /* 隐藏当前的标签 不占位置 */ visibility:hidden; /* 隐藏当前的标签 占位置 */ } .box1{ display: inline-block; /* 经过inline-block将块级元素转化为行内块级元素 */ width: 200px; height: 40px; border: 1px solid red; } </style> </head> <body> <div class="box1">内容</div> <div class="box1">内容</div> <div class="box2">内容</div> <span>alex</span> <span>alex</span> <!--form表单中input textarea select都是行内块级元素--> <img src="./images/homesmall.png" alt=""> <img src="./images/homesmall2.png" alt=""> </body> </html>
须要注意：form表单中input textarea select都是行内块级元素。
<a>、<span>都是转换特别频繁的标签。
4、浮动（float）
回顾以前的知识：
1.block元素一般被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素能够设置width、height、margin、padding属性；
2.inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效。
3.常见的块级元素有 div、form、table、p、pre、h1～h五、dl、ol、ul 等。
常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等。
4.所谓的文档流，指的是元素排版布局过程当中，元素会自动从左往右，从上往下的流式排列。
一、浮动是什么？
脱离文档流，也就是将元素从普通的布局排版中拿走，其余盒子在定位的时候，会当作脱离文档流的元素不存在而进行定位。
二、浮动的影响和效果？
浮动可使得元素按指定方向排列，直到遇到父元素的边界或另外一个浮动元素中止。
效果：两个元素并排，且两个元素都可以设置宽度和高度。以下：float:left; float:right;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box1{ width: 300px; height: 300px; background-color: red; float:left } .box2{ width: 400px; height: 400px; background-color: green; float:right; } </style> </head> <body> <!-- 浮动是css里面布局最多的一个属性 效果：两个元素并排了，而且两个元素都可以设置宽度和高度。 浮动想学好：必定要知道它的四个特性 1.浮动的元素脱标 2.浮动的元素互相贴靠 3.浮动的元素有"字围"效果 4.紧凑的效果 --> <div class="box1"></div> <div class="box2"></div> </body> </html>
三、浮动的四个特性
文档流：可见元素在文档中排列位置，元素排版布局过程当中，元素会自动从左往右，从上往下的流式排列。
1.浮动会使元素脱离文档流
2.浮动会使元素提高层级
3.浮动可使块元素在一行排列，不设置宽高的时候，可使元素适应内容
4.浮动可使行内元素支持宽高
特性一：浮动元素脱标（脱离文档流）
脱标——脱离标准文档流。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动元素脱标</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box1{ width: 200px; height: 200px; background-color: red; float:left; } .box2{ width: 400px; height: 400px; background-color: yellow; } </style> </head> <body> <!-- 脱标：脱离了标准文档流。 小红的盒子浮动了，脱离了标准流，此时小黄这个给盒子就是标准文档流中第一个盒子。因此 就渲染到了的左上方。浮动元素"飘起来了"。 --> <div class="box1">小红</div> <div class="box2">小黄</div> </body> </html>
小红的盒子浮动了，脱离了标准流，此时小黄这个给盒子就是标准文档流中第一个盒子。因此就渲染到了的左上方。浮动元素"飘起来了"。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动元素脱标</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box1{ width: 200px; height: 200px; background-color: red; } .box2{ width: 400px; height: 400px; background-color: yellow; } span{ background-color: green; float: left; /* 靠边 */ width: 300px; /* 浮动使得行内元素支持宽高 */ height: 50px; } </style> </head> <body> <!-- 脱标：脱离了标准文档流。 小红的盒子浮动了，脱离了标准流，此时小黄这个给盒子就是标准文档流中第一个盒子。因此 就渲染到了的左上方。浮动元素飘起来了。 --> <div class="box1">小红</div> <div class="box2">小黄</div> <!-- span标签不须要转成块级元素，也可以设置宽高。 全部的标签一旦设置浮动，可以并排，都不区分行内、块状元素。 --> <span>span标签</span> <span>span标签</span> </body> </html>
在上例看到，设置脱标float:left后，<span>标签不须要转成块级元素，也可以设置宽高。
注意：全部标签一旦设置浮动，就可以并排；且都不区分行内、块状元素，可以设置宽高。
特性二：浮动元素互相贴靠
float属性值：
1、left：左浮动 左侧为起始，从左向右排列 2、right：右浮动 右侧为起始，从右向左排列 三、none ：不浮动，默认不浮动
左浮动实现贴边验证示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动元素互相贴靠</title> <style type="text/css"> span{ background-color: red; float: left; /* 左浮动实现贴边 */ } </style> </head> <body> <span>文字</span> <span>文字</span> </body> </html>
上例代码中，<span>是行内元素，这两个文字显示在同一行，可是文字间会有间隙。设置浮动后元素牢牢贴靠。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动元素互相贴靠</title> <style type="text/css"> .box1{ width: 100px; height: 400px; background-color: red; float: left; } .box2{ width: 150px; height: 200px; background-color: yellow; float: left; } .box3{ width: 300px; height: 300px; background-color: green; float: left; } </style> </head> <body> <!-- 若是父元素有足够的空间，那么三哥紧靠着二哥，二哥紧靠着一哥，一哥靠着边。 若是没有足够的空间，那么就会靠着一哥，若是没有足够的空间靠着1哥，它会本身往边靠。 --> <div class="box1">一哥</div> <div class="box2">二哥</div> <div class="box3">三哥</div> </body> </html>
若是父元素有足够的空间，那么三哥紧靠着二哥，二哥紧靠着一哥，一哥靠着边。
若是没有足够的空间（缩小浏览器），那么就会靠着一哥；若是没有足够的空间靠着1哥，它会本身往边靠。
特性三：浮动元素字围效果
字围效果：当div浮动，p不浮动；div挡住了p，div的层级提升，可是p中的文字不会被遮盖，此时就造成了字围效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动自围</title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ float: left; } p{ background-color: #666666; } </style> </head> <body> <!--所谓字围效果： 当div浮动，p不浮动 div挡住了p，div的层级提升，可是p中的文字不会被遮盖，此时就造成了字围效果。 关于浮动咱们强调一点，浮动这个元素，咱们初期必定要遵循一个原则： 永远不是一个盒子单独浮动，要浮动就要一块儿浮动。 --> <div> <img src="./images/homesmall.png" alt=""> </div> <p> 123过程很跌宕，火箭很遗憾，争议很激烈。但最后，一个系列赛仍是返璞归真， 就是杜兰特是这个系列赛里最高级别的天赋，西部就这一张猫。无论裁判给 不给，无论谁防，他能隔着人扔进去。打牌就这么残酷，你有2，他有猫。 不用再纠结那27个连续三分不进。人在逆境里，只能相信本身一直相信的东西 和最常 使用的方式，只能使用能使用的方式。 没有保罗的中距离，没辙了。就像好多人昨天说凯尔特人干吗投那么多三分， 由于骑士夹击内线了啊，你就是拿他给你的，你拿不到，没有办法。 </p> </body> </html>
关于浮动强调一点：
浮动元素，咱们初期必定要遵循一个原则——永远不是一个盒子单独浮动，要浮动就要一块儿浮动。
特性四：浮动元素紧凑（收缩）效果
所谓收缩：一个浮动元素若是没有设置width，那么自动收缩为文字的宽度（这点和行内元素很像）。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动紧凑</title> <style type="text/css"> div{ float: left; background-color: red; } </style> </head> <body> <!--所谓收缩：一个浮动元素，若是没有设置width,那么自动收缩为文字的宽度 （这点和行内元素很像） --> <!--块状元素--> <div> alex </div> </body> </html>
能够看到<div>这个块级元素，浮动后，背景颜色和文字宽度一致。
到目前为止，咱们了解了浮动的四个特性：
1.浮动的元素脱标；2.浮动的元素互相贴靠；3.浮动的元素有“字围”效果；4.收缩的效果。
若是想制做整个网页，就是经过浮动来实现并排。
5、清除浮动（float）
浮动产生的问题：
父元素不设置高度，子元素设置浮动以后，不会撑开父元素的高度,那么此时父盒子没有高度了。若是在次父盒子下面还有一个标准流的盒子，那么就会影响页面的布局。因此咱们要解决浮动带来的页面布局错乱问题------清除浮动。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>清除浮动</title> <style type="text/css"> *{ padding: 0; margin: 0; } .father{ width: 1126px; /*子元素浮动，父盒子通常不设置高度*/ /*height: 300px;*/ } .box1{ width: 200px; height: 500px; float: left; background-color: red; } .box2{ width: 300px; height: 200px; float: left; background-color: green; } .box3{ width: 400px; height: 100px; float: left; background-color: blue; } .father2{ /*出现这种问题，咱们要清除浮动带来的影响*/ width: 1126px; height: 600px; background-color: purple; } </style> </head> <body> <div class="father"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> <div class="father2"></div> </body> </html>
因为子元素浮动，父元素通常不设置浮动，所以次级父元素father2就顶上来了，致使了页面布局错乱。
一、清除浮动——给父盒子设置高度
给父盒子设置高度，能解决浮动问题，但这种方式不灵活。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ width: 400px; /*给父盒子设置高度，能解决浮动问题，但这种方式不灵活，若是哪天公司产品忽然要改，要求父盒子高度变大， 并且不止一个地方，那么前端工程师不可能去找源码去手动修改 */ /*固定导航栏*/ height: 40px; } ul{ list-style: none; /* 去除ul默认样式 */ } div ul li{ float: left; width: 100px; height: 40px; background-color: red; } .box{ width: 200px; height: 100px; background-color: yellow; } </style> </head> <body> <div> <ul> <li>python</li> <li>web</li> <li>linux</li> </ul> </div> <div class="box"> </div> </body> </html>
在上例中，给父盒子<div>或<ul>设置高度确实能够解决浮动问题。但这种方式不灵活，若是哪天公司产品忽然要改，要求父盒子高度变大，并且不止一个地方，那么前端工程师不可能去找源码去手动修改。
二、清除浮动——内墙法（clear: both）
在浮动元素最后加一个空的块元素，且块元素不浮动，设置其属性为clear：both，以此来清除别人对个人浮动影响。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ width: 400px; } ul{ list-style: none; /* 去除ul默认样式 */ } div ul li{ float: left; width: 100px; height: 40px; background-color: red; } .box{ width: 200px; height: 100px; background-color: yellow; } .clear{ clear: both; } </style> </head> <body> <div> <ul> <li>python</li> <li>web</li> <li>linux</li> <!--给浮动元素最后面加一个空的div，而且该元素不浮动， 而后设置clear: both 清除别人对个人浮动影响--> <div class="clear"></div> <!--内墙法--> <!--问题：平白无故加了一个div元素，结构冗余--> </ul> </div> <div class="box"> </div> </body> </html>
该方法平白无故添加了一个div元素，结构冗余，所以这个方法并不经常使用。
三、清除浮动——伪元素清除法（经常使用）
在浮动元素的父级块内设置浮动清除类。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪元素清除法（经常使用）</title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ width: 400px; } ul{ list-style: none; /* 去除ul默认样式 */ } div ul li{ float: left; width: 100px; height: 40px; background-color: red; } .box{ width: 200px; height: 100px; background-color: yellow; } /*伪元素选择器——在...以后添加内容*/ .clearfix:after{ /*必需要写下面这三句话*/ /*content: '';*/ /*clear: both;*/ /*display: block;*/ /*新浪网清除浮动伪元素方法*/ content: '.'; /* content设置'.'内容后会占用一行内容区域 */ clear: both; display: block; visibility: hidden; /* 隐藏content内容"." */ height: 0; /* 将div.clearfix内容的高度设没 */ } </style> </head> <body> <div class="clearfix"> <ul> <li>python</li> <li>web</li> <li>linux</li> </div> <div class="box"> </div> </body> </html>
注意在这里使用的是伪元素选择器：.clearfix:after在...以后添加内容。清除浮动下面这三句是重点：
.clearfix:after{ /*必需要写下面这三句话*/ content: ''; clear: both; display: block; }
学习分析新浪网清除浮动的伪元素写法：(最终写法，也是最经常使用的消除方法)
.clearfix:after{ /*新浪网清除浮动伪元素方法*/ content: '.'; /* content设置'.'内容后会占用一行内容区域 */ clear: both; display: block; visibility: hidden; /* 隐藏content内容"." */ height: 0; /* 将div.clea */ }
四、清除浮动——overflow:hidden
这是一种很是方便的方法，给浮动元素的父盒子添加overflow:hidden属性。
.box{ width: 400px; overflow: hidden; }
能够看到写法很是简单，给父盒子添加属性便可。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>overflow:hidden</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{ width: 400px; overflow: hidden; } ul{ list-style: none; /* 去除ul默认样式 */ } .box ul li{ float: left; width: 100px; height: 40px; background-color: red; } .box2{ width: 200px; height: 100px; background-color: yellow; } </style> </head> <body> <div class="box"> <ul> <li>python</li> <li>web</li> <li>linux</li> </ul> </div> <div class="box2"> </div> </body> </html>
五、overflow介绍
overflow属性规定当内容溢出元素框时发生的事情。
这个属性定义溢出元素内容区的内容会如何处理。若是值为 scroll，不管是否须要，用户代理都会提供一种滚动机制。所以，有可能即便元素框中能够放下全部内容也会出现滚动条。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>overflow</title> <style type="text/css"> div{ width: 300px; height: 300px; border: 1px solid red; overflow: scroll; /* 内容变多时出现滚动条 */ } </style> </head> <body> <div> 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 </div> </body> </html>
visible：默认值。内容不会被修剪，会呈如今元素框以外。
hidden：内容会被修剪，而且其他内容是不可见的。
scroll：内容会被修剪，可是浏览器会显示滚动条以便查看其他的内容。
auto：若是内容被修剪，则浏览器会显示滚动条以便查看其他的内容。
inherit：规定应该从父元素继承 overflow 属性的值。
6、父子盒子的位置调整
父子两个盒子，子盒子在父盒子内，若是想自由调整子盒子在父盒子里的位置。要善于使用父盒子padding设置，而不是使用子盒子的margin。
一、设置子盒子的margin来调制盒子位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ padding: 0; margin: 0; } .father{ width: 300px; height: 300px; background-color: blue; /*border: 1px solid red;*/ } .xiongda{ width: 100px; height: 100px; background-color: orange; margin-left: 30px; margin-top: 30px; } </style> </head> <body> <!--由于父亲没有border,那么儿子margin实际上踹的是"流"，踹的是行 因此父亲一块儿掉下来了 --> <div class="father"> <div class="xiongda"> </div> </div> </body> </html>
由于父亲没有border,那么儿子margin实际上踹的是"流"，踹的是行；因此父亲一块儿掉下来了。
在给父盒子设置border后，掉下来的问题解决，能够用margin正常调整位置。
二、设置父盒子padding来调制子盒子的位置
一样是使用上面的代码，对父盒子的样式进行修改：
.father{ width: 270px; height: 270px; background-color: blue; padding-top: 30px; padding-left: 30px; /*border: 1px solid red;*/ }
注意：经过设置padding-top和padding-left来移动盒子位置时，要注意在width和height上减去相应的值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ padding: 0; margin: 0; } .father{ width: 270px; height: 270px; background-color: blue; padding-top: 30px; padding-left: 30px; /*border: 1px solid red;*/ } .xiongda{ width: 100px; height: 100px; background-color: orange; /*margin-left: 30px;*/ /*margin-top: 30px;*/ } </style> </head> <body> <!--由于父亲没有border,那么儿子margin实际上踹的是"流"，踹的是行 因此父亲一块儿掉下来了 --> <div class="father"> <div class="xiongda"> </div> </div> </body> </html>
相关文章
- 1. 前端之CSS——盒子模型和浮动
- 2. web前端css之盒子模型，浮动，定位
- 3. CSS之盒子模型的浮动
- 4. CSS盒子模型和浮动
- 5. 前端 CSS 盒子模型
- 6. 【前端】CSS盒子模型
- 7. Web前端学习笔记——CSS盒子模型、浮动
- 8. 前端系列之CSS（盒子模型）
- 9. CSS之——盒子模型、盒子的定位与浮动
- 10. CSS 盒子模型、RestCSS、浮动、定位
- 更多相关文章...
- • ionic 浮动框 - ionic 教程
- • W3C CSS 活动 - W3C 教程
- • 委托模式
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 安装cuda+cuDNN
- 2. GitHub的使用说明
- 3. phpDocumentor使用教程【安装PHPDocumentor】
- 4. yarn run build报错Component is not found in path “npm/taro-ui/dist/weapp/components/rate/index“
- 5. 精讲Haproxy搭建Web集群
- 6. 安全测试基础之MySQL
- 7. C/C++编程笔记：C语言中的复杂声明分析，用实例带你完全读懂
- 8. Python3教程(1)----搭建Python环境
- 9. 李宏毅机器学习课程笔记2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里云ECS配置速记
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 前端之CSS——盒子模型和浮动
- 2. web前端css之盒子模型，浮动，定位
- 3. CSS之盒子模型的浮动
- 4. CSS盒子模型和浮动
- 5. 前端 CSS 盒子模型
- 6. 【前端】CSS盒子模型
- 7. Web前端学习笔记——CSS盒子模型、浮动
- 8. 前端系列之CSS（盒子模型）
- 9. CSS之——盒子模型、盒子的定位与浮动
- 10. CSS 盒子模型、RestCSS、浮动、定位