CSS盒子布局

最新推荐文章于 2024-03-25 21:49:11 发布

张九日。

最新推荐文章于 2024-03-25 21:49:11 发布

阅读量4.1k

点赞数 6

本文链接：https://blog.csdn.net/chengxuzx/article/details/117919651

版权

本文详细介绍了CSS中的盒子模型，包括其组成部分、元素分类、浮动布局和清除方式，重点讲述了弹性盒子布局（Flexbox），如flex-direction、flex-wrap等属性，并涉及到CSS3的过渡效果和transform，展示了一种从传统布局到现代布局的转换。

摘要由CSDN通过智能技术生成

1.盒子模型的含义：

在弹性盒子布局中，弹性容器(flex container)中的子元素可以以任意方向排布，也可以伸缩它们自身的尺寸，或者增大自身尺寸以填满未被使用的空间，或者缩小自身尺寸以避免超出父容器的尺寸范围。子元素横向或纵向对齐方式很容易被修改。嵌套的弹性盒子布局(水平内嵌套垂直，或垂直内嵌套水平)，可以用来创建两个维度上的布局。

2.盒子的组成：

盒子的组成由外边距margin，外边框border，内边距padding和内容content组成，其中margin，border，padding是css中的属性，可以通过控制css属性来控制盒子的大小。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>弹性盒子</title>
	<style type="text/css">
    .main
    {
    	display: flex;
    	flex-derection:row;
    	width: 300px;
    	height: 300px;
    	border: 1px solid black;
    }
      .o{
      	width: 300px;
      	height: 300px;
      	background-color: red;}
	</style>
</head>
<body>
	<div class="main">
		<div class="o">第一个</div>
	</div>
</body>
</html>

3.盒子真正的大小

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距

盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

4.盒子成分：

margin：

margin-top：上边距
margin-buttom：下边距
margin-left：左边距
margin-right：右边距

border：

border-top：上边界
border-bottom：下边界
border-left：左边界
border-right：右边界

border-width：边界宽度
border-style：边界样式
border-sytle属性可取值：

none：定义无边框。
hidden：与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted：定义点状边框。在大多数浏览器中呈现为实线。
dashed：定义虚线。在大多数浏览器中呈现为实线。
solid：定义实线。
double：定义双线。双线的宽度等于 border-width 的值。
groove：定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge：定义 3D 垄状边框。其效果取决于 border-color 的值。
inset：定义 3D inset 边框。其效果取决于 border-color 的值。
outset：定义 3D outset 边框。其效果取决于 border-color 的值。
inherit：规定应该从父元素继承边框样式。
border-color：边界颜色

padding：

padding-top：上部填充
padding-bottom：下部填充
padding-left：左部填充
padding-right：右部填充

5.css元素的分类

css元素分为块级元素和内联元素

块级元素（display:block)可以设置宽和高，独占一行

div p hn 等这些属于块级元素

以下是所有块级元素

address - 地址
blockquote - 块引用
center - 举中对齐块
dir - 目录列表
div - 常用块级容易，也是css layout的主要标签
dl - 定义列表
fieldset - form控制组
form - 交互表单
h1 - 大标题
h2 - 副标题
h3 - 3级标题
h4 - 4级标题
h5 - 5级标题
h6 - 6级标题
hr - 水平分隔线
isindex - input prompt
menu - 菜单列表
noframes - frames可选内容（对于不支持frame的浏览器显示此区块内容）
noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
ol - 排序列表
p - 段落
pre - 格式化文本
table - 表格
ul - 非排序列表

内联元素（display:inline）不可以设置宽和高，不换行

常用：span a

所有内联元素

a - 锚点
abbr - 缩写
acronym - 首字
b - 粗体（不推荐）
bdo - bidi override
big - 大字体
br - 换行
cite - 引用
code - 计算机代码（在引用源码的时候需要）
dfn - 定义字段
em - 强调
font - 字体设定（不推荐）
i - 斜体
img - 图片
input - 输入框
kbd - 定义键盘文本
label - 表格标签
q - 短引用
s - 中划线（不推荐）
samp - 定义范例计算机代码
select - 项目选择
small - 小字体文本
span - 常用内联容器，定义文本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
tt - 电传文本
u - 下划线
var - 定义变量

5.1块级元素和内联元素之间是可以相互转换,怎么转换？

通过 display 的取值

转块级：display:block
转内联：display:inline

注意：隐藏元素方式有三种

1.display:none-------- 隐

最低0.47元/天解锁文章

张九日。

关注

6
点赞
踩
32

收藏

觉得还不错? 一键收藏
0
评论
CSS盒子布局

1.盒子模型的含义：在弹性盒子布局中，弹性容器(flex container)中的子元素可以以任意方向排布，也可以伸缩它们自身的尺寸，或者增大自身尺寸以填满未被使用的空间，或者缩小自身尺寸以避免超出父容器的尺寸范围。子元素横向或纵向对齐方式很容易被修改。嵌套的弹性盒子布局(水平内嵌套垂直，或垂直内嵌套水平)，可以用来创建两个维度上的布局。2.盒子的组成：盒子的组成由外边距margin，外边框border，内边距padding和内容content组成，其中margin，border，padding
复制链接

扫一扫