框模型/ 盒模型/盒子模型

水平布局

元素在其父元素中的水平方向位置由margin-left、border-left、padding-left、width、padding-right、border-right、margin-right
共同决定
一个元素在其父元素中，水平布局必须满足：上述七个值的和=其父元素内容区的宽度
（1）若相加结果不成立，成为过度约束，则，等式会自动调整
（2）若七个值中没有为auto的情况，则，浏览器会自动调整margin-right使得等式成立
七个值中可设置为auto的有：width、margin-left、margin-right
（1）当有某一个值为auto，则会自动调整为auto的那个值使得等式成立
（2）若width=auto和某一个外边距=auto，则，宽度调整到最大，设置auto的外边距为0
（3）若width=auto和两个外边距都=auto，则，宽度调整到最大，设置auto的两个外边距都为0
（4）若width=固定值且两个外边距都=auto，则，将两外边距设置为相同的值
（ 通常使用该方式使得某元素在其父元素中水平居中）
水平居中举例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>关于盒子的水平布局</title><style>.boxOne{width: 600px;height: 200px;border:10px inset cadetblue;}.inner{width: 200px;height: 200px;background-color: lightblue;margin: 0 auto;}</style>
</head>
<body><div class="boxOne"><div class="inner"></div></div></body>
</html>

效果

若子元素width大于父元素width

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>关于盒子的水平布局</title><style>.boxOne{width: 600px;height: 200px;border:10px inset pink;}.inner{width: 800px;height: 200px;background-color: darksalmon;}</style>
</head>
<body><div class="boxOne"><div class="inner"></div></div></body>
</html>

效果

垂直布局

默认情况下，父元素的高度被内容撑开
子元素大小超过父元素高度时，子元素会从父元素中溢出
使用overflow属性：设置父元素如何处理子元素的溢出
（1）visible默认值：子元素溢出，超出部分仍显示
（2）hidden：子元素被裁减，超出部分不会显示

（3）auto：根据需要生成滚动条（横向或纵向）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>关于盒子的垂直布局</title><style>.boxOne{width: 200px;height: 150px;background-color: darksalmon;overflow:auto;}</style>
</head>
<body><div class="boxOne">我的少年们，别因他人沉沦享乐而感到迷茫，别为如今的潦倒而感到沮丧。
你夜以继日的努力、克制欲望的自律、孑然独行的从容，都正在带你去向更广阔的未来。
朱颜易辞镜，千金会散尽，唯有千万个日夜汇聚的思想才是这个世上最锐不可当的锋芒。
你不能就这样败在这里。  </div></body>
</html>

效果图

【前端-CSS】盒子模型-水平方向、垂直方向的布局相关推荐

咸鱼前端—CSS盒子模型
咸鱼前端-CSS盒子模型盒子模型盒子边框(border) 圆角边框(CSS3) 内边距(padding) 外边距(margin) 盒子阴影盒子模型所谓盒子模型就是把HTML页面中的元素看作是一 ...
css盒模型中子元素垂直方向上总高度与父元素height的关系
我们都知道,css和模型中,子元素水平方向的7属性(margin-left, border-left, padding-left, width, padding-right, border-right ...
CSS盒子模型和水平、竖直方向的布局
一.块元素.行内元素和行内块元素行内元素特征: (1)设置宽高无效 (2)对margin仅设置左右方向有效,上下无效:padding设置上下左右都有效,即会撑大空间 (3)不会自动进行换行块状元素 ...
CSS——盒子模型以及盒子的水平、垂直布局
文章目录前言一.什么是文档流二.盒子模型三.盒子的水平布局四.盒子的垂直布局五.盒子的垂直外边距重叠总结前言本文主要介绍CSS中的盒子模型,以及盒子的水平与垂直布局等相关知识点,感兴 ...
前端基础之CSS盒子模型
目录长度单位像素百分比 em rem 颜色单位 RGB RGBA 文档流(normalflow) 盒子模型内容区(content) 边框(border) 内边距(padding) 外边距(ma ...
前端笔记 | CSS盒子模型
CSS盒子模型一.盒子模型 1.1 网页布局的本质 1.2 盒子模型的组成 1.3 边框border 1.4 内边距padding 1.5 外边距margin 1.6 清除内外边距二.特殊样式 2 ...
【Web前端】落地成盒？达咩之——CSS盒子模型及属性
目录前言什么是盒子模型盒子的组成盒子的大小盒子成分分析 1.外边距--margin 2.padding--内边距 3.border--边框 border-style:边框样式 border- ...
Android RecyclerViewSwipeDismiss：水平、垂直方向的拖曳删除item
Android RecyclerViewSwipeDismiss:水平.垂直方向的拖曳删除item RecyclerViewSwipeDismiss是一种支持RecyclerView的水平.垂直 ...
Web前端基础知识：CSS盒子模型、绝对定位和相对定位
一:CSS盒子模型 CSS盒子模型概念:CSS盒子模型包含了内容(content).内边距(padding).边框(border).外边距(margin).宽度(width).高度(height)几个 ...

【前端-CSS】盒子模型-水平方向、垂直方向的布局

框模型/ 盒模型/盒子模型

水平布局

垂直布局

【前端-CSS】盒子模型-水平方向、垂直方向的布局相关推荐

最新文章

热门文章