一 边框
border:各种属性;
border-width 定义边框粗细,单位为px
border-style 边框的样式
none 无边框
hidden 隐藏边框
dotted 实线框(正常平台上)
solid实线框
double (双线框)两条线及其距离的总和为设定的边框宽度
border-color 边框的颜色
属性为四个值 按上,右,下,左的顺序设定
属性为三个值 第一个为上,第二个设定左右,第三个设定下
属性为两个值 第一个上下,第二个左右
属性为一个值 包含所有边框
二 内边距(一般用来控制盒子边框与盒子内容之间的距离)
padding:属性;
后面可设定一至四个值,单位为px,表达效果同上(如果盒子本身有wideh,height属性,则会撑开盒子,否则不会改变盒子大小)
三 外边距(控制盒子之间的距离)
margin:各种属性;
其后可接left,right,top,bottom修改特定方向的距离
盒子水平居中
两个条件 1 盒子有宽度
2 盒子左右外边距设置为auto
三种写法 1 margin-left:auto; margin-right:auto;
2 margin:auto;
3 margin:0 auto;(最常用)
垂直块元素外边距塌陷问题
对于两个嵌套的块元素,父元素有上外边框的同时子元素也会有上外边距,此时父元素会塌陷
解决方法(给父元素添加)
1 定义上边框(为不影响效果可添加透明边框)
2 定义上内边框
3 添加overflow:hidden;
清楚内外边框(浏览器自带)
*{
padding:0;
margin:0;
}
四 圆角边框
border-radis:length;
radius(圆与边框交际形成的圆角效果)
属性
1 参数值可以为数值或百分比的形式
2 如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为50%
如果是个矩形,设置为高度的一半就可以4
4 该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角
分开写:border-top-left-radius、border-top-right-radius、border-bottom-right-radius和
border-bottom-left-radrùs
五 盒子阴影
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需,水平阴影的位置,允许负值。
v-shadow 必需,垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread可选。阴影的尺寸。
color可选。阴影的颜色。请参阅CSS颜色值。
inset可选。将外部阴影(outset)改为内部阴影.
注意:
1.默认的是外阴影(outset),但是不可以写这个单词,否则导致阴影无效
2.盒子阴影不占用空间,不会影响其他盒子排列。
六 文字阴影
6.文字阴影
text-shadow: h-shadow v-shadow blur color;
描述
h-shadow必需。水平阴影的位置。允许负值。
v-shadow必需。垂直阴影的位置。允许负值。
blur可选。模糊的距离。
color可选。阴影的颜色。参阅CSS 颜色值。