CSS盒子模型与浮动定位
文章目录
-
-
- 一.CSS盒子模型
-
- 1.1 盒子模型的组成
- 1.2 边框（border）
- 1.3 内边距（padding）
- 1.4 外边距（margin）
-
- 1.4.1 设置盒子水平居中
- 1.4.2 外边距合并
-
- 1.4.2.1 相邻块元素垂直外边距的合并
- 1.4.2.2 嵌套块元素垂直外边距的塌陷
- 1.4.2.2 解决外边距塌陷的方法
- 1.4.3 补充
- 二.浮动
-
- 2.1 标准流
- 2.2 什么是浮动
- 2.3 浮动的特性
- 2.4 浮动布局注意点
- 2.4 清除浮动
-
- 2.4.1 为什么要清除浮动
- 2.4.2 清除浮动的方法
-
- 2.4.2.1 额外标签法
- 2.4.2.2 父级添加overflow
- 2.4.2.3 :after 伪元素法
- 2.4.2.4 双伪元素清除浮动
- 2.4.2.5 clear：both
- 2.5 案例：导航栏
- 三.定位
-
- 3.1 相对定位 relative
- 3.2 绝对定位 absolute
- 3.3 固定定位：fixed
- 3.4 粘性定位 sticky
- 3.5定位拓展
-
-
- 3.5.1 定位的叠放次序 z-index
- 3.5.2 绝对定位的盒子的居中
- 3.5.3 其他
-
- 五：补充：元素的显示和隐藏
-
- 5.1 display属性
- 5.2 visbility 可见性
- 5.3 总结
- 6.案例
-
页面布局要学习三大核心是：盒子模型, 浮动 和 定位.
一.CSS盒子模型
1.1 盒子模型的组成
盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：元素内容（content），内边距（padding），边框（border）和外边距（margin）
- 标准盒子模型
注:
一个元素所占据的总宽度=width+padding（左右）+border（左右）+margin（左右）
- IE盒模型
IE 盒模型也称为怪异盒模型，IE6 之前的浏览器默认采用怪异盒模型。在怪异模式下，一个块元素的总宽度= width + margin（左右）（即 width 已经包含了 padding 和 border）
注：：标准盒模型设置的宽度只包含内容区域；而 IE 盒模型设置的宽高包
含了内容区域+padding+border
在CSS 中可以设置 box-sizing 属性来规定使用哪种模型，属性值有两个。
（1）content-box：采用标准模式解析计算，也是默认模式。
（2）border-box：采用怪异模式解析计算
1.2 边框（border）
边框由三部分组成：边框粗细 边框样式 边框颜色
border : border-width || border-style || border-color
border-style的属性值
| 属性值 | 含义 |
|---|---|
| none | 没有边框即忽略所有边框的宽度（默认值） |
| solid | 边框为单实线(最为常用的） |
| dashed | 边框为虚线 |
| dotted | 边框为点线 |
单独设置一个边框
边框简写：
border:1px solid red;/*没有顺序*/
边框分开写法：
border-top:1px solid red;/*只设定上边框*/
border-color:red green blue yellow;/*分别设置四个边框的颜色*/
单独为一条边框设置颜色
border-top-color:red;/*设置上边框的颜色为红色*/
补充：表格细线边框
border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
border-collapse:collapse; /*表示相邻边框合并在一起*/
1.3 内边距（padding）
padding 属性用于设置内边距，即边框与内容之间的距离
padding 属性可以有一到四个值
| 值的个数 | 表达意思 |
|---|---|
| padding：5px | 1个值，代表上下左右都有5像素内边距 |
| padding：5px 10px | 2个值，代表上下内边距是5像素，左右内边距是10像素 |
| padding：5px 10px 20px | 3个值，代表上内边距是5像素，左右内边距是10像素，下内边距20像素 |
| padding：5px 10px 20px 30px | 4个值，代表上内边距是5像素，右内边距是10像素，下内边距20像素，左是30px 顺时针 |
还可以单独设置
padding-left:50px;
注：1）如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
2）如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小.
1.4 外边距（margin）
margin 属性用于设置外边距，即控制盒子和盒子之间的距离。
margin简写方式代表的意义跟padding一样，可参考padding
1.4.1 设置盒子水平居中
条件：
1）盒子必须指定宽度
2）盒子的左右边距都设置为auto
div{
width:100px;
height:100px;
margin:0 auto;/* 或margin：auto*/
注：以上方法只能让块级元素居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可
补充：使盒子居中的方法
1).text-align：center和padding结合（文字垂直居中）
2).text-align：center和line-height：等于盒子的高度（文字垂直居中）
3).除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中，先移动盒子宽度，高度的50%，再用transfrom：translate(-50%, -50%);（本身的）
4).margin:auto或margin：0px auto;
1.4.2 外边距合并
1.4.2.1 相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有
上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。
1.4.2.2 嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
1.4.2.2 解决外边距塌陷的方法
- 可以为父元素定义边border
- 给父元素定义内边距
- 为父元素添加overflow：hidden
- 加绝对定位
1.4.3 补充
1） 清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网
页元素的内外边距。
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
2）overflow：内容溢出控制
| 属性值 | 含义 |
|---|---|
| visible | 内容不会被修剪，会呈现在元素框之外 |
| auto | 根据内容多少选择显示滚动条，文字多的时候显示滚动条 |
| scroll | 无论文字多少，都会显示垂直和水平两个滚动条,scroll-y,只在垂直方向显示 |
| hidden | 超出区域的文字直接隐藏，无法看到 |
3）box-shadow：盒子阴影
box-shadow 是给元素周围添加阴影效果，该属性有六个属性值。
1）X 轴阴影距离：必写，可正可负，正值右移，负值左移。
2）Y 轴阴影距离：必写，可正可负，正值下移，负值上移。
3）阴影模糊半径：可写，只能为正，默认值为 0。数值越大，阴影越模糊。
4）阴影扩展半径：可写，可正可负，默认值为 0。数值增大，阴影扩大；数值减小，
阴影缩小。
5）阴影颜色：可写，默认为黑色。
6）内外阴影：可写，可选值：inset（内阴影），不选默认为外阴影
<style>
div {
width: 100px;
height: 100px;
margin-bottom: 20px;
background-color: aqua;
box-shadow: 5px 5px 20px yellow;
}
style>
<body>
<div>div>
body>
4）border-radius：边框圆角
border-radius:length;
border-radius:20px;
- 参数值可以为数值或百分比的形式
- 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
- 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
二.浮动
CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：
普通流（标准流/文档流）
浮动
定位
2.1 标准流
标准流：就是标签按照规定好默认方式排列
1）块级元素：独占一行，从上向下顺序排列
常用标签：
div、hr、p、h1~h6、ul、ol、dl、form、table
2）行内元素：按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。
常用标签：
span、a、i、em，img，input
2.2 什么是浮动
float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
选择器{float:属性值;}
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动（默认值） |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
2.3 浮动的特性
1）浮动元素会脱离标准流(脱标)：脱离标准普通流的控制（浮） 移动到指定位置（动）, （俗称脱标）
2）浮动的元素会一行内显示并且元素顶部对齐，而且浮动的元素会具有行内块元素的特性.
3）浮动的盒子不再保留原先的位置
1,2盒子都没加浮动
给1号盒子加浮动
注：1.如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
2.浮动的盒子中间是没有缝隙的，是紧挨着一起的，，如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐。
3，网页布局标准：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
2.4 浮动布局注意点
1.浮动和标准流的父盒子搭配
先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置
2.一个元素浮动了，理论上其余的兄弟元素也要浮动。
一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。
3.浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.
2.4 清除浮动
清除浮动的本质是清除浮动元素脱离标准流造成的影响
2.4.1 为什么要清除浮动
由于父级盒子很多情况下，不方便给高度， 但是子盒子浮动又不占位置，最后父级盒子高度将会塌陷为0，就会影响下面的标准流盒子（因为浮动元素不再占用原文的位置，所以他会对后面的元素排版产生影响）
2.4.2 清除浮动的方法
2.4.2.1 额外标签法
额外标签法会在浮动元素末尾添加一个空的标签（必须是块级元素）。例如
，或者其他标签如等）。
2.4.2.2 父级添加overflow
可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。
2.4.2.3 :after 伪元素法
是给父元素添加
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7 专有 */
*zoom: 1
}
2.4.2.4 双伪元素清除浮动
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
2.4.2.5 clear：both
在父元素中添加一个新的元素，为新元素设置 clear:both
<div class="outer">
<div class="div1">1div>
<div class="div2">2div>
<div class="div3">3div>
<div class="clear">div>
div>
.clear{
clear:both;
height: 0;
}
2.5 案例：导航栏
css
* {
margin: 0px;
padding: 0px;
}
header {
width: 100%;
height: 50px;
background-color: rgba(215, 242, 250, 0.452);
box-shadow: 0px 10px 0px rgba(215, 242, 250, 0.034);
}
nav {
width: 1200px;
height: 50px;
margin: auto;
/* background-color: aqua; */
}
div {
height: 50px;
float: left;
}
.image {
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
/* background-color: aquamarine; */
font-size: 30px;
}
a {
text-decoration: none;
color: black;
}
ul {
float: left;
margin-left: 100px;
}
li {
height: 50px;
float: left;
padding: 0px 20px;
list-style: none;
line-height: 50px;
}
li:nth-of-type(1) {
background-color: rgb(14, 187, 230);
}
li:not(.active):hover {
background-color: rgb(105, 173, 219);
}
.search {
height: 50px;
float: left;
margin-left: 100px;
line-height: 50px;
}
input {
width: 300px;
height: 30px;
outline: none;
}
html
三.定位
定位与浮动一样，都是改变元素在正常文档流中的位置，对网页内容进行重新排版。
position 定位属性可选的属性值有 4 个。
1）relative：相对定位
2）absolute：绝对定位
3）fixed:固定定位
4）static：没有定位，默认值
3.1 相对定位 relative
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的
选择器{
position:relative;
}
相对定位的特点：
1）相对于自己原来在文档流中的位置定位，当不指定 top、left 等定位值时，不会改变元素位置
2）原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
3.2 绝对定位 absolute
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的
选择器{
position:absolute;
}
绝对定位特点：
1） 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）
2）如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置
3）绝对定位不再占有原先的位置。（脱标）
补充：
子绝父相：子级是绝对定位的话，父级要用相对定位
① 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
② 父盒子需要加定位限制子盒子在父盒子内显示。
③ 父盒子布局时，需要占有位置，因此父亲只能是相对定位。
3.3 固定定位：fixed
固定定位是元素固定于浏览器可视区的位置。主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变。
选择器 { position: fixed; }
固定定位的特点：
1.是无论父元素是否定位，子元素如果采用固定定位，都将相对于浏览器左上角定位，且固定在指定位置，不随浏览器滚动条的滚动而滚动
2.固定定位不在占有原先的位置。
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。
3.4 粘性定位 sticky
粘性定位可以被认为是相对定位和固定定位的混合。 Sticky 粘性的
选择器 { position: sticky; top: 10px; }
粘性定位的特点：
- 以浏览器的可视窗口为参照点移动元素（固定定位特点）
- 粘性定位占有原先的位置（相对定位特点）
- 必须添加 top 、left、right、bottom 其中一个才有效（当滚动到top值时会固定住）
总结：
3.5定位拓展
3.5.1 定位的叠放次序 z-index
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴）
选择器 { z-index: 1; }
数值可以是正整数、负整数或 0, 默认是 auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上
数字后面不能加单位
只有定位的盒子才有 z-index 属性
3.5.2 绝对定位的盒子的居中
加了绝对定位的盒子不能通过 margin:0 auto 水平居中
position:abusolute;
left:50%
transform:translate(-50%,-50%)
3.5.3 其他
1.脱标（浮动，绝对定位，固定定位）的盒子不会触发外边距塌陷
2.绝对定位（固定定位）会完全压住盒子， 浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）但是绝对定位（固定定位） 会压住下面标准流所有的内容。
五：补充：元素的显示和隐藏
让一个元素在页面中隐藏或者显示出来
- display 显示隐藏
- visibility 显示隐藏
- overflow 溢出显示隐藏
5.1 display属性
display 属性用于设置一个元素应如何显示。
display: none ；隐藏对象（隐藏后不再占有原来的位置）
display：block ；除了转换为块级元素之外，同时还有显示元素的意思
5.2 visbility 可见性
visibility 属性用于指定一个元素应可见还是隐藏。
- visibility：visible ; 元素可视
- visibility：hidden; 元素隐藏
- visibility 隐藏元素后，继续占有原来的位置。
5.3 总结
- display 显示隐藏元素 但是不保留位置
- visibility 显示隐藏元素 但是保留原来的位置
- overflow 溢出显示隐藏 但是只是对于溢出的部分处分（盒子模型处有介绍）
6.案例
要求：当鼠标经过视频盒子时，出现遮罩
css
.box {
position: relative;
width: 300px;
height: 200px;
}
.box>img {
display: block;
position: absolute;
width: 300px;
height: 200px;
/* 浮动的盒子在shadow上面，降低层级，让shadow显示在上面 */
z-index: -1;
}
.shadow {
/* 隐藏 */
display: none;
width: 300px;
height: 200px;
background-color: rgba(0, 0, 0, 0.7);
overflow: hidden;
}
.shadow img {
display: block;
width: 20px;
height: 20px;
margin: auto;
margin-top: 90px;
}
.box:hover .shadow {
/* 显现 */
display: block;
}
html
<div class="box">
<img src="../img/qiji1.jpg" alt="">
<div class="shadow"><img src="../img/s.png" alt="">div>
div>
鼠标没有移上去
鼠标移上去
参考资料：黑马程序员pink老师前端入门教程