CSS-- 盒子模型(Box Model)
简介:
CSS 盒子模型本质上是一个盒子, 对网页中绝大部分的 html 元素进行包装定位(外边距, 边框, 内边距以及实际内容)
但是并不是所有的 HTML 元素都可以看作是盒子模型, 例如图片 (img) 就不能看作是盒子模型, 因为 img 中只能放图片, 并不能添加其他的东西, 所以它属于文字流而盒子模型进行封装的元素大部分是文档流
盒子模型中主要的区域:
盒子模型中主要包含元素的宽, 高, 外边距, 边框, 内边距以及实际内容
Width: 主要区域的内容 (content) 的宽
Height: 主要区域的内容 (content) 的宽
Margen: 外边距即整个元素和其他元素的距离
Border: 元素的边框
Padding: 内边距即元素的边与内容的距离
Content: 内容也就是实际所看到的区域
下面的图片说明了盒子模型的区域:
下图为代码演示:
- #test{
- width: 100px;
- height: 100px;
- background-color: yellowgreen;
- margin: 10px;
- padding: 10px;
- border: 5px solid blue;
- }
盒子模型属性详解:
margen/padding: 外边距 / 内边距
只写 1 个值 : 表示四周的外边距都是一个值
写 2 个值: 第一个值表示上下, 第二个值表示左右
写 3 个值: 分别表示上, 右, 下的值, 左边的值默认等于右边
写 4 个值: 分别表示上, 右, 下, 左的值
auto: 放弃某个方向的主导权, 交由它的对方向主导
水平居中: margen:0 auto;
竖直居中: margen:auto 0;
全局居中: margen:auto;
boder : 边框 (宽度, 样式, 颜色) 实线: solid 虚线: dashed 样式可以省略, 但是原则上三个属性都要写, 三个属性的顺序可以随意颠倒, 没有先后要求
注意:
1. 盒子模型可以随意指定任意方向的相关属性值
2. 使用 padding 后会撑大 div 的可见区域, 所以使用时应注意 div 的实际大小
当父盒子包裹子盒子, 给子盒子添加 margen-top 时, 子盒子和夫盒子的上边线重合, 导致两个盒子同时下来
- <div id="d1">
- <div id="d2"></div>
- </div>
- #d1{
- width: 200px;
- height: 200px;
- background-color: yellowgreen;
- }
- #d2{
- width: 100px;
- height: 100px;
- background-color: deepskyblue;
- margin-top: 10px;
- }
解决办法
1 给父容器添加一定的 padding-top , 会给父容器添加不必要的 padding 区域, 不推荐
2 给父容器添加一定的上边框, 会导致父容器产生不必要的边框, 不推荐
3 给父容器或者子容器添加 float 属性不推荐
4 给任何一个容器添加一个属性: overflow:hidden 推荐使用
border 的补充:
border-radius: : 边框圆角
1. 共接收 8 个属性值, 分别表示: 左上, 右上, 右下, 左下 / 左上, 右上, 右下, 左下(X 轴 / Y 轴)
2. 省略 Y 轴默认与 X 轴相等如果 4 个角写不全, 默认对角相等
3. 只写一个值, 默认 8 个值均等
4.div 为正方形, 当圆角弧度大于等于其宽度的一半, 那么该 div 将显示为圆形
代码如下:
- #div1{
- background-image: url(img/cat.jpg);
- height: 200px;
- width: 200px;
- border: 5px solid #FF9E01;
- border-radius: 1030px;
- background-repeat: no-repeat;
- background-size: 200px 200px;
- margin: 10px 0px;
- }
- #div2{
- background-image: url(img/cat.jpg);
- height: 200px;
- width: 200px;
- border: 5px solid #FF9E01;
- border-radius: 60px 0px;
- background-repeat: no-repeat;
- background-size: 200px 200px;
- }
效果图:
border-image: : 为元素边框添加背景图片
第一个属性: 图片的 url 地址
第二个属性: 为切线的大小( 写法: 第一个值 / 第二个值)
第一个值是切的图片宽度: 上右下左, 通过四条切线分为九宫格, 四个角分别对应边框的四个角, 四个角不会平铺拉伸(不能带单位)
第二个值是边框的宽度: 上右下左, 边框的四条边框可以自行设置平铺拉伸(必须带单位)
第三个属性: 四个角除外的图片属性拉伸: stretch, 铺满: round, 平铺: repeat
例如: border-image:{url(img/QQ 图片 20180312161643.png 27/27px repeat;}
例子:
- #image{
- width: 200px;
- height: 200px;
- /*background-color: #Fd9d07;*/
- border-image: url(img/QQ 图片 20180312161643.png)
- 27/27px
- repeat;
- }
盒子阴影 ----box-shadow:
共接收 6 个属性值, 并用空格分隔
水平阴影距离, 可正可负右正左负(必填)
垂直阴影距离, 可正可负下正上负(必填)
阴影模糊半径, 只能为整数, 默认为 0, 数值越大, 阴影越模糊
阴影拓展半径, 可正可负, 默认为 0, 数值增大, 阴影扩大, 数值减小, 阴影缩小
阴影颜色, 默认为黑色
内外阴影, 默认为外阴影, inset 表示内阴影
例子:
- #shadow{
- width: 200px;
- height: 200px;
- background-color: #F1B15A;
- box-shadow: 0px 0px 10px 0px red inset;
- }
外围线 ---- outline:
在元素的边框以外, 不占据任何空间, 但有可能会覆盖四周的内容, 写法上与 border 一致
下面来介绍 CSS 属性中比较重要的属性 -- 浮动(float):
浮动 --float
规律 1: 标准流模型中的块级盒子, 默认宽度是 100%; 而浮动的块级盒子, 宽度不会自动伸展, 而是由内容 (文字 padding) 撑开浮动后的行级元素会变成块级元素, 可以设置宽度高度等属性值
规律 2: 当一个盒子浮动后, 标准流中的其他未浮动盒子将视浮动盒子不存在而占据浮动盒子(浮动盒子的背景会覆盖掉与之大小相同区域的未浮动盒子的背景), 但是未浮动盒子中的文字内容, 将会受到浮动盒子宽度的影响(浮动盒子不能盖住未浮动盒子的文字内容), 也就是浮动可以打破文档流, 但是不能打破文字流
规律 3: 可以使用 clear 属性使未浮动的盒子不受浮动盒子的影响
clear: 清除其他元素浮动对自身造成的影响
可选值: left(清除左浮动) right(清除左浮动) both(清除两个方向浮动)
规律 4: 如果父盒子没有指定高度, 而父盒子中的所有子盒子全部浮动, 将导致父盒子的高度塌陷, 也就是高度无法被子盒子撑开而变为 0
解决子盒子浮动父盒子塌陷的问题:
1. 给父盒子添加 overflow:hidden 属性[常用]
2. 让父盒子也浮动(前提是父盒子的宽度为 100%)
3. 在父容器的最后添加一个高度为 0 的空 div 并且添加 clear:both 属性
4. 使用伪对象选择器::after 生成一个空的元素
- #div4::after{
- display: block;
- content: "";
- height: 0px;
- clear: both;}
盒模型分类:
CSS3 的 box-sizing:Content-box: 标准盒模型(W3C 盒子) 设置的宽和高就是本身内容区域的宽和高, 也就是 content 区域, padding,border 等都不算在内, 添加 padding,border 后可是区域会变大
Border-box: 怪异盒模型(IE 盒子) 设置的宽和高是可视化区域的所有的长度(content+padding+border), 其中包含了 padding,border 等如果添加了 padding 和 border 后, content 区域会被亚索, 可视区域不会变大
手动改变盒子模型:
- #div{
- box-sizing: border-box;
- }
定位 ---position:
[相对定位]:
1 使用 position:relative 设置成相对定位
2 使用 top/right/bottom/left 设置定位的位置
3 定位机制:
1. 相对定位是相对自己原来所属位置进行定位
2. 相对定位不会释放掉原来自己所属的位置, 也不会影响其他元素
3. 如果 left/right 同时存在, left 生效 top/bottom 同时存在, top 生效
4 关于 Z 轴的重叠次序:
1. 定位元素, 默认的 Z 轴高于普通文档流和浮动元素
2. 同为定位元素, 后来者居上
3. 可以使用 z-index 调整上下层关系(只能使用在定位元素)
[绝对定位]:
1 使用 position:absolute 设置成绝对定位
2 定位机制:
1. 相对与第一个有定位的父元素进行定位(第一个使用定位)
2. 如果元素没有已定位的祖先元素, 那么它的位置相对于浏览器左上角定位
3 绝对定位文档流会彻底删除, 原空间被释放
[固定定位]:
1 使用 position:fixed 设置成固定定位是一种特殊的绝对定位
2 元素的位置相对于浏览器窗口左上角定位即使窗口是滚动的它也不会移动
3 固定定位使元素的位置与文档流无关, 因此不占据空间
4 固定定位的元素和其他元素重叠
[Z-index]
1. 使用 z-index 可以调整层叠顺序数值越大, 层叠越往上; z-index 数值相等, 后来者居上
2. z-index 只能作用于定位元素
3. 元素的 z-index 属性要考虑父容器的 z-index 约束
如果父容器设置了 z-index, 那么子容器不能脱离父容器的约束, 而必须与父容器处同一级
如果父容器没有设置 z-index, 或者设置了 z-index:auto 则子元素不受父容器约束
4. z-index:0 与 z-index:auto 区别:
z-index:auto 和 z-index:0 处于同一层, 且 z-index:auto 是默认值
z-index:auto 不约束子元素; z-index:0 约束子元素
裁切 --- clip:
1clip 属性只能用于裁切图片, 显示图片的指定区域
2clip 属性只能作用于 absolute 和 fixed 定位的元素上
3 属性值只接受一个 rect 函数, 函数传入四个值, 分别表示上右下左
[注意]: 与其他的上右下左不同, 上下为从原图的上方到想要区域的顶部和底部的距离, 左右为从原图的左边到想要区域的左端和右端的距离
负边距应用:
设置元素在父容器中水平垂直居中, 也可以增加元素的宽度
1 设置子元素为定位元素
2 给子元素添加属性:
- left: 50%;
- top: 50%;
- margin-left: -(width/2)px;
- margin-top: -(height/2)px;
来源: https://www.cnblogs.com/JiangLai/p/8595309.html