likes
comments
collection
share

css盒子

作者站长头像
站长
· 阅读数 43
  1. border边框(border会影响实际的盒子的高度) border-style:solid(实线)/dotted border:1px solid red

border-collapse 将相邻边框合到一起

border-collapse: collapse;

2.padding内边距(会影响盒子的大小)

    /*上下左右都是5*/
    padding : 5px;
    /*上下是5,左右是10*/
    padding : 5px 10px;    
    /*上是5 左右是10 下是15*/
    padding : 5px 10px 15px;
    /*上右下左(顺时针)*/
    padding : 5px 10px 15px 20px;

3.margin 外边距(控制盒子和盒子的距离) margin的复合形式和padding是一样的

1.margin的典型应用(让块级盒子水平居中)
a.盒子必须指定宽度
b.将盒子的左右外边距设置为auto
写法:
margin:0 auto 
或者margin-left:auto;margin-right:auto
或者 margin:100px auto (上下设置一个高度)
 
2.让行内元素、行内块元素水平居中使用
text-align:center(加在父元素上即可)

3.外边距合并问题
嵌套块元素垂直外边距塌陷问题(div下还有一个div,给子div设置margin-top使作用到父div问题)
解决方案:
a.可以为父元素定义边框(border)
b.为父元素定义内边距(padding)
c.**为父元素定义 overflow:hidden**

4.清除内外边距(清除li,a标签的内外边距)
*{
    padding:0;
    margin:0;
}
注:行内元素(span,)尽量只设置左右内外边距(上下边距不起作用),转化成块级元素或者行内块元素就可以了

4.圆角边框

border-radius:10px;(半径为10的圆的弧形边框)

a.圆:
一个正方形div(100*100) 设置border-radius:50px/border-radius:50%(宽度的一半)
b.圆角矩形:
将border-radius设置为高度的一半
c.不同的圆角
border-radius:1px 2px 3px 4px(左上,右上,右下,左下 (顺时针))

5.盒子阴影

盒子阴影不占用空间    
box-shadow:10px 10px 10px -4px rgba(0,0,0,.3)
第一个参数:水平阴影位置(允许负值)
第二个参数:垂直阴影位置(允许负值)
第三个参数:模糊距离
第四个参数:阴影的尺寸
第五个参数:颜色

6.文字阴影

text-shadow:5px 5px 6px rgba(0,0,0,.3)