1. 元素尺寸:
width 宽度
height 高度
min-width 最小宽度
min-height 最小高度
max-width 最大宽度
max-height 最大高度
属性值均为:
auto 自适应
数字+px 指定长度
数字+% 相对于父控件的值
2. 元素内边距:
padding-top 顶部内边距
padding-bottom 底部内边距
padding-left 左侧内边距
padding-right 右侧内边距
padding 简写,设置四个内边距,(顺序为:上,左,下,右)
属性值均为:
数字+px 指定长度
数字+% 指定相对于父控件的百分比
3. 元素外边距:
margin-top 顶部外边距
margin-bottom 底部外边距
margin-left 左侧外边距
margin-right 右侧外边距
margin 简写,设置四个外边距,(顺序为:上,左,下,右)
属性值均为:
数字+px 指定长度
数字+% 指定相对于父控件的百分比
4. 溢出处理:
overflow-x 水平方向
overflow-y 竖直方向
overflow 简写,设置两个方向的处理方式(顺序为:水平,竖直)
属性值为:
auto 自动的处理溢出内容,产生了溢出则显示滚动条
hidden 产生溢出时自动隐藏掉溢出内容
scroll 不管是否溢出,均显示滚动条
visible 默认值不管是否溢出,均显示内容
5. 元素可见性:
visibility:
visible 默认值,元素在页面上可见
hidden 元素不可见,但会占用空间
collapse 如果是表格,则会元素不可见,同时隐藏表格的行和列;如果不是表格,效果和hidden一样
6. 元素盒类型:
分类:块级元素(区块),行内元素(内联),行内-块级元素(内联块)
1. 块级元素
所谓块级元素,就是能够设置元素尺寸、隔离其他元素功能的元素。比如:<div>、<p>等文档元素。
2. 行内元素
所谓行内元素,不能够设置元素尺寸,它只能自适应内容、无法隔离其他元素,其它元素会紧跟其后。比如:<span>、<b>等文本元素。
3. 行内- 块元素
所谓行内-块元素,可以设置元素尺寸,但无法隔离其他元素的元素。比如<img>。
display属性:
block 盒子为块级元素
inline 盒子为行内元素
inline-block 盒子为行内-块元素
none 盒子不可见,不占位
7. 元素的浮动:
float属性可以让元素进行漂浮起来,让开了原本占据的位置,使得后边的元素补上空缺的位置;
clear属性可以使得元素清除周边的浮动,固定的显示在某一位置,常配套使用。
float:
left 浮动元素靠左
right 浮动元素靠右
none 禁用浮动属性
clear:
none 允许两边都可浮动
left 禁止左边界浮动
right 禁止右边界浮动
both 禁止两边浮动