第六章盒子模型

一、什么是盒子模型

在这里插入图片描述

二、边框

1.边框颜色border-color

在这里插入图片描述

/*定义块宽高10px,行内块元素*/
div{width: 10px;height: 10px;display: inline-block;border: 1px solid;}
/*上边框颜色*/
#main1{border-top-color:red ;}
/*下边框颜色*/
#main2{border-bottom-color:blue ;}
/*左边框颜色*/
#main3{border-left-color:green ;}
/*右边框颜色*/
#main4{border-right-color:yellow ;}
/*四个边框为同一个颜色*/
#main5{border-color: blanchedalmond;}
/*上下和左右边框颜色*/
#main6{border-color: red green;}
/*上、左右、下边框颜色*/
#main7{border-color: red green blue;}
/*上、下、左、右边框各个的颜色*/
#main8{border-color: red green blue yellow;}

在这里插入图片描述

2.边框粗细border-width
thin细的、medium中等的、thick厚的、像素值
border-top-width:5px; 顶部边框宽度
border-right-width:10px; 右边框宽度
border-bottom-width:8px; 底部边框宽度
border-left-width:22px; 左边框宽度
border-width:5px ; 四条边框宽度相同
border-width:20px 2px;上下和左右边框宽度
border-width:5px 1px 6px;
上、左右、下边框宽度
border-width:1px 3px 5px 2px;
上、下、左、右各个边框宽度
3.边框样式border-style
none默认值,不显示、hidden隐藏、
dotted点虚线、dashed虚线、solid实线、double双行线
border-top-style:solid;顶部边框实线
border-right-style:solid;右边框实线
border-bottom-style:solid; 底部边框实线
border-left-style:solid; 左边框实线
border-style:solid ; 四条边框样式相同
border-style:solid dotted;上下和左右边框样式
border-style:solid dotted dashed;上、左右、下边框样式
border-style:solid dotted dashed double;上、下、左、右各个边框样式
/*定义块宽高20px,行内块元素,边框宽度1像素,颜色红色*/
div{width: 20px;height: 20px;
display: inline-block;border-width: 1px ;border-color: red;}
/*上边框样式none不显示*/
#main1{border-top-style:none ;}
/*下边框样式hidden隐藏(不显示)*/
#main2{border-bottom-style:hidden ;}
/*边框样式实线soild*/
#main3{border-style:solid ;}
/*边框样式虚线dashed*/
#main4{border-style:dashed ;}
/*边框样式点虚线dotted*/
#main5{border-style: dotted;}
/*边框样式双实线double*/
#main6{border-style: double;}

在这里插入图片描述

4.border

border:不分顺序包括颜色,粗细,样式
必须有颜色和粗细,不然不能显示

三、外边距margin

1.方向
margin-top:1px      上外边距
margin-right:2px    右外边距
margin-bottom:2px   下外边距
margin-left:1px     左外边距
margin :3px 5px 7px 4px; 上、右、下、左外边距
margin :3px 5px;上下、左右外边距
margin :3px 5px 7px;上、左右、下外边距
margin :8px;上下左右外边距均为
2.网页居中

网页居中对齐的必要条件
①必须是块元素、②必须是固定宽度

margin:水平像素 auto;
四、内边距padding
padding-top:1px      上内边距
padding-right:2px    右内边距
padding-bottom:2px   下内边距
padding-left:1px     左内边距
padding :3px 5px 7px 4px;     上、右、下、左内边距
padding :3px 5px;上下、左右内边距
padding :3px 5px 7px;上、左右、下内边距
padding :8px; 上下左右内边距均为

五、盒子的尺寸

盒子模型总尺寸=border+padding+margin+内容宽度
左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距

六、拯救盒子模型box-sizing
box-sizing:content-box;默认值,盒子的总尺寸
width 与 height 只包括内容的宽和高,
不包括边框(border),内边距(padding),外边距(margin)。
内边距、边框和外边距都在这个盒子的外部
box-sizing: border-box; 
盒子的宽度或高度等于元素内容的宽度或高度
边框以内的宽度=设置的宽度,里面的内容紧贴紧,不考虑外边距
box-sizing:inherit;元素继承父元素的盒子模型模式
浏览器兼容性

在这里插入图片描述

七、圆角边框

1.语法
border-radius: 左上  右上  右下  左下;对角线组合
2.圆形

元素的宽度和高度必须相同
圆角的半径为元素宽度的一半,或者直接设置圆角半径值为50%
(只有正方形才能实现圆形)

3.半圆形

制作上半圆或下半圆时,元素的宽度是高度的2倍,而且圆角半径为元素的高度值
制作左半圆或右半圆时,元素的高度是宽度的2倍,而且圆角半径为元素的宽度值
(只有正方形才能实现半圆形)

4.扇形

“三同”是元素宽度、高度、圆角半径相同
“一不同”是圆角取值位置不同
(只有正方形才能实现扇形)

/*圆形占面还是正方形的站面*/
#main1{
width: 40px;
height: 40px;
border: 1px solid red;
border-radius: 50%;
}
/*上半圆,左上和右上为高度值*/
#main2{
width: 40px;
height: 20px;
border: 1px solid green;
border-radius: 20px 20px 0px 0px;
}
/*左半圆,左上和左下为宽度值*/
#main3{
width: 20px;
height: 40px;
border: 1px solid yellow;
border-radius: 20px 0px 0px 20px;
}
/*左上扇形,左上为宽度值,其余角不动*/
#main4{
width: 40px;
height: 40px;
border: 1px solid blue;
border-radius: 40px 0px 0px 0px;
}

在这里插入图片描述

八、盒子阴影

1.语法
内阴影
box-shadow:inset  x-offset  y-offset  blur-radius  color;
外阴影
box-shadow:  x-offset  y-offset  blur-radius  color;
inset:阴影类型内阴影
x-offset:X轴位移,指定阴影水平位移量
正值阴影在对象右边,负值阴影在对象左边
y-offset:Y轴位移,用来指定阴影垂直位移量
正值阴影在对象底部,负值阴影在对象顶部
blur-radius:阴影模糊半径阴影向外模糊的模糊范围
默认为0,只能是正值,值越大阴影边缘越模糊
color:阴影颜色,定义绘制阴影时所使用的颜色
/*设置行内块元素,右外边距,设置宽高像素,边框样式粗细颜色*/
div{display: inline-block;
margin-right: 50px;
width: 40px;
height: 40px;
border: 1px solid red;}
/*inset内阴影,一个盒子阴影*/
#main1{
box-shadow: inset orange 5px 5px 1px; 
}
/*不加inset外阴影,一个盒子阴影*/
#main2{
box-shadow:yellow  5px 5px 1px; 
}
/*一内一外盒子阴影*/
#main3{
box-shadow: inset blue 5px 5px 1px, green 5px 5px 1px; 
}

在这里插入图片描述

2.浏览器兼容

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值