1.
表格的css属性:(以下的属性添加给table;)
1、设置单元格之间间距的属性:
border-spacing:value;
2、设置相邻单元格把边框是否合并:
border-collapse:;
collapse 合并
separate 不合并,默认值
注:当设置合并之后, border-spacing, empty-cells属性就失效了;
3、设置表格的列宽:
table-layout:;
auto:自动,列宽根据内容计算,默认值
fixed:固定列宽(平均分配父元素的宽)
4、隐藏无内容单元格:
empty-cells:;
show 显示 ,默认值
hide 隐藏
5、设置表格标题的显示位置:
caption-side:;
top 上 ,默认值
bottom 下
表格的css属性:(以下的属性添加给table;)
1、设置单元格之间间距的属性:
border-spacing:value;
2、设置相邻单元格把边框是否合并:
border-collapse:;
collapse 合并
separate 不合并,默认值
注:当设置合并之后, border-spacing, empty-cells属性就失效了;
3、设置表格的列宽:
table-layout:;
auto:自动,列宽根据内容计算,默认值
fixed:固定列宽(平均分配父元素的宽)
4、隐藏无内容单元格:
empty-cells:;
show 显示 ,默认值
hide 隐藏
5、设置表格标题的显示位置:
caption-side:;
top 上 ,默认值
bottom 下
2.设置鼠标指针形状的属性:
cursor:;
auto 自由显示,默认值
pointer 小手(常用)
move 移动图标
text 文字选择器
crosshair 十字架
wait 等待
自定义鼠标指针的形状:
语法:
cursor: url(images/arrow.ico),pointer;
注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。
建议:
1.图片地址最好绝对路径,相对路径也可以
2.图片大小最好是32*32的大小,要是比这个尺寸大在各个浏览器下面解析的大小不一样
3.图片格式为.ico 兼容性最好,还可是.cur,.ani格式;
3.
盒模型:
作用:盒模型是css布局的基石,它规定了元素之间的位置关系;
组成:内容区,填充区,边框区,外边距
内容区: 指显示内容的区域;
填充区: padding,显示在子元素和父元素之间的空白区;主要设置父子元素之间的位置关系;
边框区: border,显示在元素的边缘位置;可以实现一些修饰性的线条;
外边距: margin,显示在元素边框以外的空白区,主要设置同辈元素之间的位置关系;
4.盒模型的两种模式:
一、标准盒模型:
元素实际占有位置范围的计算:
content(width/height) + padding + border + margin
二、怪异盒模型:
元素实际占有位置范围的计算:
width/height(content+border+padding) + margin
已知的怪异盒模型的元素:
<table> ,<bottun> ,<input type="submit">
5.盒模型的转换:
box-sizing:;
content-box 规定元素显示为标准盒模型的模式
border-box 规定元素显示为怪异盒模型的模式
6.盒模型-padding 填充区:
作用: 控制父子元素之间的位置关系,或者空元素和内容之间的位置关系;
使用方法:
1、padding属性要添加给父元素;
2、padding值会把元素撑大,如果想保证原本的大小不变,需要在原有的宽高上,减掉相应的padding值;
3、padding不支持负值
4、padding属性对背景不产生影响;
5、如果该元素没有定义宽高,那么添加padding值之后就不用减值;
6、padding是显示在边框和内容区之间的空白;
padding属性写法:
设置单一方向:
padding-top:; 上面的填充值
padding-right:; 右
padding-bottom:; 下
padidng-left:; 左
复合式:
padding:值1; 上下左右
padding:值1 值2; 上下 左右
padding:值1 值2 值3; 上 左右 下
padding:值1 值2 值3 值4; 上 右 下 左
7.盒模型-border 边框区:
作用:添加边框和网页上的一些修饰性的线条或分割线的应用;
特点:
1、边框会把元素原有宽高撑大,如果保持原有的大小不变,需要在原有宽高上减掉相应的边框值;
2、边框显示在元素边缘的位置上;
边框属性的应用:
复合属性:
border:width color style;
复合属性设置单一方向边框的属性:
border-top:width color style;
border-right:width color style;
border-bottom:width color style;
border-left:width color style;
单独设置边框的属性的复合属性:
设置边框宽度:
border-width:value;
默认值是3px左右;
复合式:
border-width:值1; 上下左右边框宽度
border-width:值1 值2; 上下 左右
border-width:值1 值2 值3; 上 左右 下
border-width:值1 值2 值3 值4; 上 右 下 左
单独设置某一方向的边框宽度:
border-top-width:值;
border-right-width:值;
border-bottom-width:值;
border-left-width:值;
设置边框颜色:
border-color:colorValue;
默认颜色:黑色;
复合式:
border-color:值1; 上下左右边框颜色
border-color:值1 值2; 上下 左右
border-color:值1 值2 值3; 上 左右 下
border-color:值1 值2 值3 值4; 上 右 下 左
单独设置某一方向的边框宽度:
border-top-color:值;
border-right-color:值;
border-bottom-color:值;
border-left-color:值;
设置边框线型:(必须的)
border-style:;
none 没有边框,取消边框,默认值
solid 实线
dashed 虚线
dotted 点线
double 双线
...
复合式:
border-style:值1; 上下左右边框的形状
border-style:值1 值2; 上下 左右
border-style:值1 值2 值3; 上 左右 下
border-style:值1 值2 值3 值4; 上 右 下 左
单独设置某一方向的边框宽度:
border-top-style:值;
border-right-style:值;
border-bottom-style:值;
border-left-style:值;
8.
盒模型-margin 外边距(外边界):
作用:设置同辈元素之间的位置关系;
特点:margin是显示在元素边框以为的空白区;
注:margin是支持负值的;
margin属性的应用:
设置单一方向:
margin-top:; 上面的间距
margin-right:; 右
margin-bottom:; 下
margin-left:; 左
复合式:
margin:值1; 上下左右
margin:值1 值2; 上下 左右
margin:值1 值2 值3; 上 左右 下
margin:值1 值2 值3 值4; 上 右 下 左
margin: auto;
auto 表示自有显示,自动分配空余空间;
设置元素水平居中用的是: margin:0 auto;
设置文本在元素内水平居中:text-align:center;
9.
margin 的bug:
1、上下排列的元素之间的margin会重叠,以最大值显示;
2、margin-top 向父元素传递;父元素里的第一个子元素(并且这个子元素是块元素)设置margin-top时,会把margin值传递给父元素;
解决的方法:hack;
给父元素添加overflow:hidden; (推荐)
给父元素或者子元素添加浮动属性: float:left;
给父元素添加上边框;border-top:;
也可以不用margin ,给父元素加padding-top;