您的位置:首页 > 汽车 > 新车 > CSS知识点详解:div盒子模型

CSS知识点详解:div盒子模型

2025/3/4 11:28:55 来源:https://blog.csdn.net/qq_62859013/article/details/141294809  浏览:    关键词:CSS知识点详解:div盒子模型

盒子模型:

边框:

border-color:边框颜色

border-width:边框粗细

1.thin

2.medium

3.thick

4.像素值

border-width:5px ; 
border-width:20px 2px;
border-width:5px 1px 6px;
border-width:1px 3px 5px 2px;

这个简写属性需要按照顺时针方向(从上到右)提供四个值,分别对应上、右、下、左四个边的宽度。如果只提供了三个值,那么第四个值将默认与第一个值相同。

border-style:边框样式

1.none 无边框

2.hidden 无边框

3.dotted 边框以点状方式绘制,每个点之间有间隙。

4.dashed 边框以虚线方式绘制,每个短划线之间有间隙。

5.solid 边框以实线方式绘制,没有间隙。

6.double 边框以双线方式绘制,两条线之间有间隙

border简写:

同时设置边框的宽度,样式,颜色

宽度样式颜色的顺序来简写

border:1px solid #3a6587;

外边距:margin

margin-top:

margin-right:

margin-bottom:

margin-left:

margin:

网页居中对齐:margin:0px auto 必要条件:块元素,固定宽度

内边距:padding

padding-left:

padding-right:

padding-top:

padding-bottom:

padding:

padding:20px 5px 8px 10px ; 
padding:10px 5px; 
padding:30px 8px 10px ; 
padding:10px;

盒子模型的尺寸:

内容宽度+内边距+外边距=盒子模型总尺寸

box-sizing:让盒子内容装在盒子里

因为盒子

border-radius圆角边框:

顺时针,从左上开始

用来给div盒子增加圆形边框

值越大圆的半径越大

border-radius: 20px  10px  50px  30px;

用border-radius制作圆形:不会

注意:高度和宽度一样

div{width: 100px;height: 100px;border: 4px solid red;border-radius: 50%;}

border-radius制作特殊图形

制作这个时,需要一个宽是高两倍的矩形,然后把上面的两个角变成圆的

宽100px高50px,圆角50%

border-radius: 20px  10px  50px  30px;

同样的,这个是宽50高100,圆角50%

盒子阴影:box-shadow

box-shadow:inset  x-offset    y-offset  blur-radius  color;水平偏移量  垂直偏移量  模糊半径        颜色

阴影的水平偏移量为5像素,垂直偏移量为5像素,模糊半径为10像素,颜色为半透明的蓝色(使用RGBA表示法)。

.element {box-shadow: 5px 5px 10px rgba(0, 0, 255, 0.5);
}

向四周发散的阴影

box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0,0,0,0.2);

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com