CSS三大模块——盒模型、浮动、定位（重点）

最新推荐文章于 2023-09-21 14:19:19 发布

哈哈ha~

最新推荐文章于 2023-09-21 14:19:19 发布

阅读量915

点赞数 1

分类专栏：前端开发课程文章标签：前端 css css3 html5 html

本文链接：https://blog.csdn.net/qq_56668869/article/details/124228488

版权

前端开发课程专栏收录该内容

37 篇文章 1 订阅

订阅专栏

一、盒模型

1.基本概念：

所谓盒模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个装内容的容器。

每个矩形都由元素的内容 (content) 、内边距 (padding) 、边框 (border) 和外边距 (margin) 组成

2.盒子模型：

3.内边距（padding）

padding属性用于设置内边距指边框与内容之间的距离

padding-top: 上内边距

padding-right: 右内边距

padding-bottom: 下内边距

padding-left: 左内边距

padding: 上右下左内边距

注意：属性后面的数值可变，表示不同的含义。

值的个数	表达意思
1个值	四周内边距
2个值	上下、左右内边距
3个值	上、左右、下内边距
4个值	上、右、下、左内边距

4.边框（border）

边框就是元素最外层的包装 CSS边框属性允许指定一个元素边框的样式和颜色

语法：

border: border-width border-style border-color

border-width：用于指定边框的粗细

border-style：用于定义边框的样式

border-color：用于设置边框的颜色

设置内容	样式属性	常用属性值
上边框	border-top-style：样式 border-top-width：宽度 border-top-color：颜色 border-top：样式宽度颜色
右边框	border-right-style：样式 border-right-width：宽度 border-right-color：颜色 border-right：样式宽度颜色
下边框	border-bottom-style：样式 border-bottom-width：宽度 border-bottom-color：颜色 border-bottom：样式宽度颜色
左边框	border-left-style：样式 border-left-width：宽度 border-left-color：颜色 border-left：样式宽度颜色
样式综合样式	border-style：上右下左	none无（默认）、solid（单实线）、 dashed（虚线）、dotted（点线）、 double（双实线）
宽度综合样式	border-width：上右下左	像素值：px 使用关键字：thick medium thin
颜色综合样式	border-color：上右下左	关键字：white red ... 十六进制：#333333 RGB:rgb(r,g,b)、rgb(r%,g%,b%) transparent
边框综合样式	border：四边样式四边宽度四边颜色

注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式

表格的细线边框

border-collapse: collapse;    /*表示边框合并在一起 合并单元格的线*/

圆角边框 border-radius

border-top-left-radius: 左上角  
border-top-right-radius: 右上角
border-bottom-right-radius:  右下角
border-bottom-left-radius:  右下角

border-radius： 左上角  右上角  右下角  左下角;	  /*4个值*/
border-radius： 左上角  右上/左下  右下角;	   		/*3个值*/
border-radius： 左上/右下  右上/左下;			 /*2个值*/
border-radius： 四个圆角值相同;					  /*1个值*/

5.外边距（margin）

margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。

margin-top: 上外边距

margin-right: 右外边距

margin-bottom: 下外边距

margin-left: 左外边距

margin: 上右下左四周边距

注意：行内元素可以设置水平方向的内外边距，但不能设置垂直方向的内外边距。

(1)外边距实现盒子水平居中 margin:0 auto

必需条件：是块级元素且指定了宽度

margin:0 auto 盒子在父盒子水平居中上下外边距为0 auto水平方向居中平分剩余的宽度

如果只设置margin-left:auto; 会让子元素靠着父元素的右侧，因为父元素剩余空间都分给了左侧，而右侧的父元素剩余空间，分配为0 所以靠右

垂直方向不可以margin: auto 0; 因为在垂直方向上，块级元素不会自动扩充，它的外部尺寸没有自动充满父元素，也没有剩余空间可说。

(2)文字水平居中和盒子水平居中

盒子居中使用margin，给定左右边距为auto即可。
文字居中使用：text-align: center;
文字垂直居中：单行文本 line-height，多行文本padding

(3)外边距合并

同级：

上下相邻的两个块元素上面的元素有margin-bottom 下面的元素有margin-top

则他们之间的垂直距离不是margin-bottom与margin-top之和，而是取两者中的较大者

嵌套：

两个块级元素嵌套如果内部的块设置有margin-top属性且父元素没有下边解决方法所述的特征那么内部块的margin-top属性会绑架父元素（即将margin-top传递凌驾给了父元素）

只有子盒子的margin-top才会传递给父元素其他方向不会

解决方案：

设置父元素或者自身的display:inline-block; （BFC规范）

设置父元素的border:1px solid #fff;(>0) ；或者border-top(一定要包含border-top方向) 此方法如果不想影响元素高度加上box-sizing:border-box;

设置父元素的padding:1px;(>0); 或者padding-top(一定要包含padding-top方向) 此方法如果不想影响元素高度加上box-sizeing:border-box;

给父元素设置overflow:hidden; （BFC规范）

给父元素或者自身设置position:absolute;（BFC规范）

设置父元素非空，填充一定的内容。（在父元素与当前子元素之间加点具有高度的元素或内容分开父元素与当前子元素）

6.盒子阴影（border-shadow）

语法：

box-shadow: 水平位置  垂直位置  模糊距离  阴影尺寸扩大/缩小阴影  阴影颜色  内/外阴影;

值	描述
h-shadow	必需水平阴影的位置允许负值
v-shadow	必需垂直阴影的位置允许负值
blur	可选模糊距离
spread	可选阴影的尺寸
color	可选阴影的颜色
inset	可选将外部阴影（outset）改为内部阴影

1、阴影效果：

h-shadow：正值时，阴影往右，负值阴影往左
v-shadow：正值时，阴影往下，负值阴影往上

2、模糊距离：值越大，阴影越模糊

3、阴影尺寸：阴影外延出去的长度，类似于border 不同于border，box-shadow并不占据空间

4、内部阴影：inset 外部阴影是默认的不能写

二、浮动（float）

1.文档流

文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中

元素在文档流中的特点：

块元素：

块元素在文档流中会独占一行

块级子元素在父元素中从上到下排列

行内元素：

行内元素在文档流中只占自身的大小

行内子元素在父级元素中从左到右排列

2.基本概念

元素的浮动指设置了浮动属性的元素会脱离标准普通流的控制

语法：

选择器 {
    float: 属性值;
}

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	默认不浮动

3.特性

特性：

1.会脱离标准文档流

2.会影响其他元素的显示方式

其他元素会当做浮动元素不存在

行内元素设置了浮动之后会被当做inline-block元素解析可设置宽高

3.块级元素设置了浮动后宽度没有默认宽度不会再是父元素100% 必须手动设置

4.如果所在父元素还有空间的话同层级浮动的元素会彼此相邻

5.所有元素都只能在父盒子内浮动不能超出

4.清除浮动

同层级：清除其他浮动元素带给自己的影响

clear:left 清除前面的左浮动元素带来的影响
clear:right 清除前面的右浮动元素带来的影响
clear:both 清除前面左右所有浮动元素带来的影响

嵌套：

给父元素加height ——不推荐会导致布局不是很灵活

BFC布局:

(1) overflow:hidden 当子盒子高度需要超出父元素高度时，会受到影响

(2)display:inline-block 会影响到后面的布局

(3)在父元素的浮动子元素后面加个空div标签设置清除浮动

.empty{ clear:both;}

(4)给父元素设置伪元素空的div加强版 ——最佳

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

三、定位（position）

1.基本概念

元素的定位属性主要包括边偏移和定位模式两部分

边偏移

边偏移属性	描述
top	顶部偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

定位模式

语法：

选择器 {
    position:  属性值;
}

属性值	描述
static	默认值，自动定位
fixed	固定定位，相对于浏览器窗口是固定位置
relative	相对位置，相对于其原文档流的位置进行定
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位

2.静态定位static

和标准文档流表现的形式一样
静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。
所谓静态位置就是各个元素在HTML文档流中默认的位置。
在静态定位状态下，无法通过偏移属性（top、bottom、left、right）来改变元素的位置。
一般用来清除定位，比如一个原来有定位的盒子，不写定位了，就可以加static

3.固定定位fixed

默认宽度不再是父元素100% 需指定宽度
特性：

相对于body进行定位（不写上偏移量默认）
相对于浏览器窗口进行定位（写偏移量）

4.相对定位relative

默认宽度依旧是父元素100%
特性：

相对于元素本身的位置进行定位
不完全脱离标准文档流覆盖在其他盒子之上其他盒子依旧认为它在保留它的空间

5.绝对定位absolute

不设置宽度就没有宽度
特性：

完全脱离文档流不占据位置其他元素会占据此空间
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块

父级没有定位 子元素以浏览器为基准点对齐

父级有定位 子元素以父元素为基准点对齐

子绝父相 子级是绝对定位的话，父级要用相对定位

6.叠放次序z-index

当多个元素同时设置定位时，定位元素之间有可能发生重叠
要想调整重叠定位元素的堆叠顺序，可以对定位元素使用z-index层叠等级属性，其取值可为正整数、负整数、0.
注意：定位元素才有z-index

同级:

不加z-index 后来者居上
加z-index 值越大越在上面如果值相等还是后来者居上

嵌套:

不加z-index 默认子元素在上
只给子元素加z-index值<0 可实现父元素为上
如果给父元素也添加z-index 父元素无论怎样子元素都将在父元素上

嵌套+同层级

如果父元素有其他兄弟元素如果两者都没加z-index 后来者居上
两者父元素都没加z-index 若某一子元素z-index值大那么该子元素将显示在上方如果值相同则后来者居上
如果父级都加了z-index 那么在进行比较时只比较父元素z-index值值越大则父元素连同里面的子元素越靠上如果值相等后来者居上

注意：

数字后面不能加单位。

只有相对定位、绝对定位、固定定位有此属性，其余标准流、浮动、静态定位都无此属性。

flex盒子的子元素也可以设置z-index属性(后面了解)

7.绝对定位的盒子水平/垂直居中

1、通过绝对定位和 margin：auto来实现

2、首先left 50% 父盒子一半的大小然后走自己外边距负的一半值就可以了 margin-left=-半值

3、定位和 transform

8. 粘性定位（了解）

粘性定位可以被认为是相对定位和固定定位的混合

元素在跨越特定阈值前为相对定位之后为固定定位

例如：

#one { position: sticky; top: 10px; }

/* 在 viewport视口滚动到元素top距离小于10px之前元素为相对定位
   之后元素将固定在与顶部距离10px的位置 直到viewport视口回滚到阈值以下*/

粘性定位常用于定位字母列表的头部元素：

标示 B 部分开始的头部元素在滚动 A 部分时始终处于 A 的下方

开始滚动 B 部分时，B 的头部会固定在屏幕顶部

直到所有 B 的项均完成滚动后才被 C 的头部替代

*注：须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

特性（坑）：

sticky不会触发BFC
z-index无效，
当父元素的height：100%时，页面滑动到一定高度之后sticky属性会失效。
父元素不能有overflow:hidden或者overflow:auto属性。
父元素高度不能低于sticky高度
必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
sticky元素仅在其父元素内生效

四、布局中的对齐方式

1.vatical-align

值	描述
baseline	默认。同行元素基线对齐。
sub	元素的基线向下移。移动的距离未明确规定，具体由不同浏览器自行决定
super	元素的基线向上移。移动的距离未明确规定，具体由不同浏览器自行决定
top	元素的顶部(包含该元素的外边距margin-top padding-top)与父元素顶部对齐 (元素顶部与父元素中最高元素的顶部对齐) 元素顶部与父元素内容区域顶部对齐
text-top	把元素的顶端包含该元素的外边距margin-top)与父元素字体的顶端对齐
middle	行内元素的中线与行框的中线对齐
bottom	元素的底部与父元素底部对齐 (元素底部与父元素中最低元素的底部对齐)
text-bottom	把元素的底端(margin-bottom, padding-bottom)与父元素字体的底端对齐。
length	是正值基线就向上移动，如果是负值基线向下移动。
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。