本文详细介绍了CSS中的盒子模型，包括其组成部分、元素分类、浮动布局和清除方式，重点讲述了弹性盒子布局（Flexbox），如flex-direction、flex-wrap等属性，并涉及到CSS3的过渡效果和transform，展示了一种从传统布局到现代布局的转换。
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:inline
6.浮动布局:
CSS 布局 - 浮动和清除
CSS float 属性规定元素如何浮动。
CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动
float 属性
float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。
float 属性可以设置以下值之一：
- left - 元素浮动到其容器的左侧
- right - 元素浮动在其容器的右侧
- none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
- inherit - 元素继承其父级的 float 值
浮动布局的时候，左浮动会造成后面元素的布局错乱的现象，如何解决这种现象？
使用clear属性
clear 属性
clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。
clear 属性可设置以下值之一：
- none - 允许两侧都有浮动元素。默认值
- left - 左侧不允许浮动元素
- right- 右侧不允许浮动元素
- both - 左侧或右侧均不允许浮动元素
- inherit - 元素继承其父级的 clear 值
7.定位布局:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性盒子</title>
<style type="text/css">
.main
{
width: 600px;
height: 600px;
border: 1px solid black;
margin: 200px;
position: relative;
}
.o{
width: 300px;
height: 300px;
border:1px solid black;
background-color: red;
position: absolute;
top: 100px;
right: 100px;
}
.t{
width: 300px;
height: 300px;
border: 1px solid black;
background-color: green;}
.s{
width: 300px;
height: 300px;
border: 1px solid black;
background-color: blue;}
</style>
</head>
<body>
<div class="main">
<div class="o">第一个</div>
<div class="t">第二个</div>
<div class="s">第三个</div>
</div>
</body>
</html>
8.其他属性：
8.1 overflow
例如：
<html>
<head>
<style type="text/css">
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll;
}
</style>
</head>
<body>
<div>
张旭大帅哥张旭大帅哥张旭大帅哥张旭大帅哥张旭大帅哥张旭大帅哥张旭大帅哥张旭大帅哥张旭大帅哥张旭大帅哥张旭大帅哥张旭大帅哥张旭大帅哥张旭大帅哥张旭大帅哥张旭大帅哥张旭大帅哥张旭大帅哥张旭大帅哥张旭大帅哥张旭大帅哥
</div>
</body>
</html>
8.2 zoom
zoom: 0.5;9.弹性盒子CSS Flexbox：
Flexbox 元素
如需开始使用 Flexbox 模型，您需要首先定义 Flex 容器。
|
flex-direction
|
指定了弹性盒子（弹性容器）中子元素的排列方式
|
| flew-wrap |
-
指定了弹性盒子（弹性容器）中子元素的换行方式
|
|
flex-flow
|
-flex-direction
和
flex-wrap
的简写
|
|
justify-content
|
修改了
flex-wrap
属性的行为，类似
align-items,
但不是设置子元素的对齐，
而是设置行对齐
|
|
align-items
|
设置了弹性盒子子元素在侧轴的（纵轴）的对齐方式
|
|
align-content
|
设置了弹性盒子子元素在主轴的（横轴）的对齐方式
|
9.1flex-direction
flex-direction:column 从上到下
flex-direction:column-reverse 从下到上
flex-direction:row 从左到右
flex-direction:row-reverse 从右到左
例（从下到上）：
.flex-container {
display: flex;
flex-direction: column-reverse;
}9.2 flex-wrap
属性规定是否应该对 flex 项目换行。
flex-wrap:wrap 必要时候换行
flex-wrap:nowrap 不换行（默认）
flex-wrap:wrap-reverse 以相反方向进行换行
例（必要时候换行）:
.flex-container {
display: flex;
flex-wrap: wrap;
}9.3flex-flow
flex-flow 属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性
例（设置从左到右，换行）:
.flex-container {
display: flex;
flex-flow: row wrap;
}9.4 justify-content
属性用于对齐 flex 项目
.flex-container{
display:flex;
justify-content:center;
}
9.5 align-items
属性用于垂直对齐 flex 项目
.flex-container{
display:flex;
height:300px;
align-items:center;
}
9.6 align-content
属性用于对齐弹性线
例如：显示弹性线之间有相同的间距
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
其他子元素的属性
例如： flex-grow 规定某个 子元素相对于其余子元素将增长多少
<div class="main">
<div style="flex-grow:1">1</div>
<div style="flex-grow:2">2</div>
<div style="flex-grow:4">4</div>
</div>
10.css3其他样式
10.1css变换样式
10.1.1 2d转换
matrix() 方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素。
参数如下：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
实例：
div {
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
10.1.2 3d转换
11. 过渡效果
- transition 简写属性，用于将四个过渡属性设置为单一属性。
- transition-delay 规定过渡效果的延迟（以秒计）
- transition-duration 规定过渡效果要持续多少秒或毫秒。
- transition-property 规定过渡效果所针对的 CSS 属性的名称。
- transition-timing-function 规定过渡效果的速度曲线。
-
如需创建过渡效果，必须明确三件事：您要添加效果的 CSS 属性 效果的持续时间触发的动作（ hover ）
11.1 transition改变若干属性值
下面的例子为 width 和 height 属性都添加了过渡效果，width 是 2 秒，height 是 4 秒：
div {
transition: width 2s, height 4s;
}
11.2 transition-delay 延迟过渡效果
transition-delay 属性规定过渡效果的延迟（以秒计）。
下例在启动之前有 1 秒的延迟：
div {
transition-delay: 1s;
}
11.3 transition-duration属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。
让过渡效果持续 5 秒：
div{
transition-duration:5s;
}
11.4 transition-property把鼠标指针放到 div 元素上，会产生带有平滑改变元素宽度的过渡效果：
规定过渡效果所针对的 CSS 属性的名称
div
{
transition-property:width;
}
11.5 transition-timing-function 规定过渡效果的速度曲线 、
div
{
transition-timing-function: linear;
}
扫一扫
1755
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
