CSS盒模型、width、height、padding、border、margin(5)

一、CSS盒模型统计图解


CSS盒子模型(Box Model)又称框模型,包含了元素内容( content)、内边距( padding )边框(border)、外边距(margin)几个要素。margin是一个盒子距离其他盒子的长度。CSS定义的宽width和高height指的是填充以里的内容范围。

二、border边框可以设计粗细、样式、颜色

border-width(边框宽度):thin  medium thick  (最常用像素)px

四个值

border-width:1px 2px 3px 4px (上 右 下 左 顺时针)

三个值

border-width:1px 2px 3px (上 左右 下)

两个值

border-width:1px 2px (上下 左右)

border-style(边框样式):dashed(虚线) dotted(点线) solid(实线) double(双实线)

border-color(边框颜色):颜色设置为十六进制 别忘了# 例如:#cccccc

简写     boder:solid 2px pink;

dotted在ie6下,1px宽的dotted表现的和dashed是一样的,当宽度大于1px时候,表现正常。

在ie7下,当四条边宽度其他三条边是1px,另一个边宽度是其他像素时,表现也是和dashed一样。(正确:四条边都设成1px,或者其他都不是1px。)

border-top

border-right

border-button

border-left

三、padding内边距

定义:设置元素内容与边框之间的距离,可分为上、右、下、左(顺时针)

四个值

padding:1px 2px 3px 4px (上 右 下 左 顺时针)

三个值

padding:1px 2px 3px (上 左右 下)

两个值

padding:1px 2px (上下 左右)

控制单个边

padding-top

padding-right

padding-button

padding-left

©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值