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