盒模型浮动-CSDN博客

本文链接：https://blog.csdn.net/G111222y/article/details/132111663

盒模型和浮动

css盒模型
CSS 其他属性
CSS 浮动

css盒模型

在这里插入图片描述
CSS 盒模型规定了处理元素内容、内边距、边框和外边距的
方式。
最内部分是元素内容，直接包围内容的是内边距。内边距呈现
了元素的背景。内边距的边缘是边框。边框以外是外边距。

元素的尺寸:  height 设置元素的高度。属性值：auto：默认。/px、cm 等

单位定义高度。/百分比
width 设置元素的宽度属性值：auto：默认。/px、cm 等单
位定义高度。/百分比
max-height 设置元素的最大高度。属性值：auto：默认。/px、
cm 等单位定义高度。/百分比
max-width 设置元素的最大宽度。属性值：auto：默认。/px、
cm 等单位定义高度。/百分比
min-height 设置元素的最小高度。属性值：auto：默认。/px、
cm 等单位定义高度。/百分比
min-width 设置元素的最小宽度。属性值：auto：默认。/px、
cm 等单位定义高度。/百分比
当属性值用百分比时是相对于父元素的尺寸来说的。
最大最小宽高主要用于动态控制缩放等情况下，这里暂做了解

padding 属性：元素的内边距:

padding-top 属性设置元素的上内边距（空间）。
padding-right 属性设置元素右内边距（空白）。
padding-bottom 属性设置元素的下内边距（底部空白）。
padding-left 属性设置元素左内边距（空白）。
padding 属性接受长度值或百分比值，但不允许使用负值。
padding * 同时设定四个边距
padding ** 分别设定上下、左右边距
padding *** 分别设定上、左右、下边距
padding **** 分别设定上、右、下、左边距

border 属性：

元素的边框，是围绕元素内容和内边距的一条或多条线。
border 属性：
可以按顺序设置如下属性：
border-width
border-style
solid 定义实线。/dotted 定义点状边框/double
定义双线… o border-color
关于元素的边框后边课程还会详细讲解，暂时先简单了解

margin 属性：元素的外边距:

围绕在元素边框的空白区域是外边距。设置外边距会在元素外
创建额外的“空白”。
margin-top 属性设置元素的上外边距（空间）。
margin-right 属性设置元素外内边距（空白）。
margin-bottom 属性设置元素的下外边距（底部空白）。
margin-left 属性设置元素左外边距（空白）。
margin 属性接受长度值或百分比值，允许使用负值。
margin * 同时设定四个外边距
margin ** 分别设定上下、左右外边距
margin *** 分别设定上、左右、下外边距
margin **** 分别设定上、右、下、左外边距

外边距的合并：

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一
个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的
较外者。

两种盒子模型：

一种是 W3C 的标准盒子模型；一种是 IE 的盒子模型。
怪异盒模型 (ie 盒模型)
box-sizing 属性可以为三个值：content-box（default），
border-box，padding-box。
content-box，border 和 padding 不计算入 width 之内
border-box，border 和 padding 计算入 width 之内，其实就是怪
异模式了~inherit 使元素继承父元素的盒模型模式盒子模型与 DOCTYPE 那到底该用哪种模型呢？当然是
W3C 标准盒子模型了，W3C 标准盒子模型兼容所有浏览器。那该怎
么确定页面渲染是按照 W3C 标准盒子模型呢？只要在页面顶部加上
DOCTYPE 申明（申明说
明），浏
览器就会按照 W3C 标准渲染，如果不加 DOCTYPE 申明，浏览器会
按照本身默认标准去渲染页面，除 IE 外所有浏览器按照 W3C 标准盒
子模型渲染页面，至于 IE 吧，当然会按照 IE 盒子模型渲染页面了，
只要加上 DOCTYPE 强制 IE 采用标准盒子模型渲染页面。我们常见
的就是，它是指示 web浏览器关于页面使用 HTML5 版本进行编
写的

CSS 其他属性

opacity：透明度设定：

IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity
来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值
越小，越透明。
E8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能
够取的值从 0 到 100。值越小，越透明。对于滤镜本套课程
不作讲解。
opacity 与通过 rgba()设定透明度的区别：前者同时作用于元
素的标签内容，后者只是作用于元素本身

.鼠标的样式 cursor：

我们可以通过 cursor 属性改变浏览器默认的鼠标样式，可改变的样
式很多，这里仅仅列出几种相对常用的

hand 是手型
pointer 也是手型，推荐使用这种。
crosshair 是十字型
text 是移动到文本上的那种效果
wait 是等待的那种效果
default 是默认效果
e-resize 是向右的箭头
ne-resize 是向右上的箭头
n-resize 是向上的箭头
nw-resize 是向左上的箭头
w-resize 是向左的箭
sw-resize 是左下的箭头
s-resize 是向下的箭头
se-resize 是向右下的箭头
auto 是由系统自动给出效果

.溢出的处理：

overflow 如果内容溢出了元素内容区域，是否对内容的边
缘进行裁剪。
overflow-x 如果内容溢出了元素内容区域，是否对内容的
左/右边缘进行裁剪。
overflow-y 如果内容溢出了元素内容区域，是否对内容的
上/下边缘进行裁剪。
visible 不裁剪内容，可能会显示在内容框之外。
hidden 裁剪内容-不提供滚动机制。
scroll 裁剪内容-提供滚动机制。
auto 如果溢出框，则应该提供滚动机制。

rem:根元素字体的大小：

浏览器默认字体大小为 16px
em 是以父元素字体为基准的
rem 是以根元素字体大小为基准的

.display 属性常用属性值：

display 的属性值很多，有些目前支持度不好，有些会放到以后课程
或综合实例中讲解，这里介绍几种常用的情况。
none 此元素不会被显示。
block 此元素将显示为块级元素。特征：换行，可设置宽
高尺寸。
inline 行内元素，默认。特征:大小自适应；不换行。
inline-block 行内块元素。特征:可以设置大小，但是不可
以换行。
其他：
list-item/table/inline-table/table-cell/table-caption…

CSS 浮动

了解 CSS 浮动的概念：

使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以
左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边
缘。浮动属性：用 float 属性，它的属性值有两个，为 right
和 left 两个属性值。

使用浮动常出现的问题：

对附近的元素布局造成改变，使得布局混乱（覆盖）
因为元素脱离了文档流，会造成一种坍塌的现象。简单的说就
是原来的父元容器是被元素撑开的，当浮动之后，父容器的高
度就会坍塌。

清除浮动：

方式一：给前面一个父元素设置高度
缺点：元素容器不可以自适应高度
方式二：在浮动的元素后面加一个空元素，设置属性为 clear：
both。在浮动元素后面的元素设置 clear：both。
缺点：成本太高，添加了一个元素，难维护
clear 属性取值：
none:默认取值，按照浮动元素的排序规则（左浮动找左浮动，
右浮动找右浮动）
left：不要找前面的左浮动元素
right：不要找前面的右浮动元素
both：清除所有浮动元素
方式三：通过设置父容器 css 的样式： “overflow：hidden”
通过 overflow:hidden;来清除浮动，其实 overflow 无形中对
父容器高度进行了测量，是设置父容器高度的另一种方法。
方式四：after 伪类：对父元素的 after 伪类进行设置。
用伪元素选择器和内墙法结合使用来给元素清除浮动