CSS中的表格属性(二)

1、border-collapse:设置表格的边框是否为单一边框
值:
separate:默认值,表示边框分开
collapse:表示单一边框
2、border-spacing:表示边框之间的距离(px)
值:
1、一个值:水平和垂直
2、两个值:第一个表示水平,第二个表示垂直
3、边框必须为separate
3、caption-side:表示标题的位置(相对位置,相对表格主体)
值:
top:默认值,表示在表格的上部
bottom:表示在表格的底部
4、vertical-align:设置文本的垂直方向的对齐方式
值:
middle:默认值,表示垂直方向上居中
top: 上部对齐
bottom: 低端对齐

注意:
1、水平:text-align: left right center
2、垂直:
1、vertical-align:只应用于行内元素和表格 使用的地方只是表格中
2、line-height:行高   受字体大小的影响

3、行内元素会自动忽略掉宽度,高度设置
2、盒子模型
浏览器会把任何的元素都当做一个盒子,任何的标签都是装有内容的盒子,包括我们的文本
1、宽度:width: px 50% 
注意:当使用百分比的时候,针对的是他的父元素
2、高度:height: px 50%
3、border:表示的就是边框(宽度、高度、边框、内边距,外边距)
1、border-style:边框的样式
值:
none,不显示 默认值
solid,实线
dashed,虚线
double,双线
dotted,点线
border-left-style:左边的边框样式
border-right-style:右边的边框样式
border-top-style:上边的边框样式
border-bottom-style:下边的边框样式
简写:
border-style:
1个值:上右下左
2个值:上下-》左右
3个值:上-》右左-》下
4个值:上-》右-》下-》左
2、border-width:边框的宽度
值:px

border-top-width:上边框的宽度
border-right-width:右边框的宽度
border-bottom-width:下边框的宽度
border-left-width:左边框的宽度
简写:
border-width:
1个值:上右下左
2个值:上下-》左右
3个值:上-》右左-》下
4个值:上-》右-》下-》左
3、border-color:边框的颜色(默认黑色)
border-top-color:上边框的颜色
border-right-color:右边框的颜色
border-bottom-color:下边框的颜色
border-left-color:左边框的颜色
简写:
border-color:
1个值:上右下左
2个值:上下-》左右
3个值:上-》右左-》下
4个值:上-》右-》下-》左

总的简写:
border:边框的宽度(border-width)  边框的样式(border-style)  边框的颜色(border-color)

4、border-radius:边框的圆角
值:
1个值:四个角
2个值:左上、右下-》右上、左下
3个值:左上-》右上、左下-》右下
4个值:左上-》右上-》右下-》左下
注意:
1、如果是整圆,必须宽高相等,正方形
2、如果想做半圆,宽高必须存在2倍关系,高=2X宽  宽=2X高
4、padding:内边距 元素和边框之间的距离
值:
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距

简写:
padding:
1个值:上右下左
2个值:上下-》左右
3个值:上-》右左-》下
4个值:上-》右-》下-》左
5、margin:外边距
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:左外边距

简写:
margin:
1个值:上右下左
2个值:上下-》左右
3个值:上-》右左-》下
4个值:上-》右-》下-》左

你可能感兴趣的:(html+Css前端)