AI智能
改变未来

CSS第三天——border、padding、margin与出现的问题、水平居中、插入图片背景图片、css准备工作、圆角、盒子与文字阴影


盒子

内容、边框、内边距、外边距

边框 border

宽度:  border-width
样式:  border-style:solid  实线
           :dashed 虚线
           :dotted  点线
颜色:  border-color

综合:  border:宽  样式  颜色

取消边框:border:none / 0
不同方向:border-left / right / top / bottom
细线表格(合并边框):
     border-collapse:collapse

内边距 padding

拉开 内容到盒子边缘 的距离
不同方向:   padding-left / right / top / bottom
取值个数相同: 四个方向取值一样    1
        上下  左右      2
        上  左右  下    3
        上 右 下 左     4
 注:加多少 减多少

外边距 margin

盒子与盒子之间的距离
不同方向:  margin-left / right / top / bottom
取值个数相同: 四个方向取值一样    1
        上下  左右      2
        上  左右  下    3
        上 右 下 左     4

注: 行内元素的内外边距、垂直无效,水平有效

水平居中

margin:0  auto
    上下
    块级盒子居中,必须有固定的宽度
text-align:center
    盒子里面文字、行内、行内块居中

插入图片 和 背景图片 的区别

插入图片: 内容,占位,移动用内外边距
背景图片: 装饰小图标,不占位,移动用position定位

CSS准备工作

清空默认样式:

* {margin:0;padding:0;}

清除li的默认样式:

li {list-style:none;}

清除超链接a的默认样式:

a {text-decoration:none;}

处理图片底部留白:

img {vertical-align:middle;}

让em不倾斜:

em {font-style:normal;}

外边距对盒子影响

1、并列垂直外边距合并
  上盒子,下外边距  下盒子,上外边距  只显示大的那个
  只设置一个即可
2、父子级:子级设上外边距,父级也跟掉下来
解决:父级 设   border-top:1px solid transparent
   父级   padding-top:1px    有高度减1px
   父级   overflow:hidden
   浮动,绝对、相对定位

圆角 border-radius

border-radius    一般在5—20之间
正圆:    正方形    50%
胶囊:    长方形    高度的一半
取值个数相同: 四个方向取值一样    1
        上下  左右      2
        上  左右  下    3
        上 右 下 左     4
        
        上  右
          □(四边形)
        左  下

盒子阴影 box-shadow

box-shadow:水平 垂直 模糊距离 阴影大小 颜色 内 / 外阴影
                         inset

文字阴影 text-shadow

text-shadow:水平 垂直 模糊距离 阴影大小 颜色 内 / 外阴影
                         inset

注:阴影可以设多个,之间用逗号隔开

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » CSS第三天——border、padding、margin与出现的问题、水平居中、插入图片背景图片、css准备工作、圆角、盒子与文字阴影