CSS3-使用盒模型
<!-- 为元素应用内边距 -->
<!-- padding-top: -->
<!-- padding-bottom: -->
<!-- padding-left: -->
<!-- padding-right: -->
<!-- padding: 顶 右 底 左 -->
<style type = "text/css">
table {
padding-top: 0.2em;
padding-left: 0.2em;
padding-bottom: 0.5em;
padding-right: 0.2em;
}
</style>
<style type = "text/css">
p {
padding: 0.2em 0.5em 0.5em 0.2em;
}
</style>
<!-- 为元素应用外边距 -->
<!-- margin-top: -->
<!-- margin-bottom: -->
<!-- margin-left: -->
<!-- margin-right: -->
<!-- margin: -->
<style type = "text/css">
p {
margin: 0.2em 0.5em;
}
</style>
<!-- 控制元素的尺寸 -->
<!-- width height 宽度,高度 -->
<!--min-width min-height 最小可接受宽度,高度 -->
<!-- max-width max-height 最大可接受宽度,高度 -->
<!-- box-sizing 设置尺寸调整应用到元素盒子的哪一部分 -->
<!-- 可用属性: content-box, padding-box, border-box, margin-box -->
<style type = "text/css">
p {
box-sizing: border-box;
width: 50%;
}
</style>
<!-- 设置一定尺寸的盒子 -->
<!-- 设置最小和最大尺寸 -->
<style type = "text/css">
p {
box-sizing: border-box;
width: 50%;
min-width: 100px;
max-width: 200px;
}
</style>
<!-- 处理溢出内容 -->
<!-- overflow-x overflow-y overflow -->
<!-- 可用属性: -->
<!-- auto 浏览器自动处理溢出内容 -->
<!-- hidden 溢出内容直接减掉 -->
<!-- no-content 内容溢出就移除所有内容 -->
<!-- no-display 内容溢出就隐藏所有内容 -->
<!-- scroll 内容溢出添加滚动条 -->
<!-- visible 默认值,溢出直接显示 -->
<style type = "text/css">
p {
overflow: scroll;
}
</style>
<!-- 控制元素的可见性 -->
<!-- visibility -->
<!-- 可用属性: -->
<!-- collapse 元素不可见,且在页面布局中不占空间 -->
<!-- hidden 元素不可见,但在页面布局中占据空间 -->
<!-- visible 默认值,元素可见 -->
<style type = "text/css">
p {
visibility: hidden;
}
</style>
<!-- collapse值只能应用到表相关属性 -->
<!-- 设置元素的盒类型 -->
<!-- display -->
属性值:
inline 行内元素;
block 块级元素;
inline-block 行内块级元素;
list-item 列表项;
run-in 插入元素;
compact 块或标记盒;
flexbox
tabke
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
ruby
ruby-base
ruby-text
ruby-base-group
ruby-text-group
none 元素不可见,且在页面布局中不占空间;
<!-- 创建浮动盒 -->
<!-- float: -->
<!-- 浮动盒会将元素的左边界或者右边界移动到包含块或另一个浮动盒的边界 -->
<!-- 可用属性: -->
<!-- left 左边挨着包含块的左边界,或另一个浮动盒的右边界 -->
<!-- right -->
<!-- none 元素位置固定 -->
<style type = "text/css">
p {
float: left;
}
</style>
<!-- 阻止浮动元素堆叠 -->
<!-- clear -->
<!-- 可用属性 -->
<!-- left 元素的左边界不能挨着另外一个元素 -->
<!-- right -->
<!-- both 元素的左右边界都不能挨着浮动元素 -->
<!-- none 元素的左右边界都可以挨着浮动元素 -->
<style type = "text/css">
p {
float: left;
}
p.cleard{
clear: left;
}
</style>