盒子模型

简介: 盒子模型

1.边框

image.png

2.边框粗细

thin:默认边框厚度1px

medium:默认边框厚度3px

thick:默认边框厚度5px

border-style

image.png

3.边框样式

dashed:虚线ditted:点状虚线none:无轮廓。当定义了该值时,border-color将被忽略,border-width计算值为0,除非边框轮廓应border-image。hidden:隐藏边框。dotted:点状轮廓。dashed:虚线轮廓。solid:实线轮廓double:双线轮廓。两条单线与其间隔的和等于指定的border-width值groove:3D凹槽轮廓。ridge:3D凸槽轮廓。inset:3D凹边轮廓。outset:3D凸边轮廓

image.png

4.border简写:同时设置边框的颜色、粗细和样式

image.png

5.外边距

image.png

6.外边距的妙用

image.png

7.内边距

image.png

8.盒子模型的尺寸

image.png

9.box-sizing

image.png

image.png

9.圆角边框

image.png

10. 使用border-radius制作特殊图形

圆形:

image.png

半圆形:

image.png

扇形:

image.png


相关文章
|
2月前
|
前端开发 容器
给 CSS 盒子模型添加边框时,需要注意什么?
在给CSS盒子模型添加边框时,需要注意边框的宽度、样式和颜色,以及它如何影响盒子的总尺寸和布局。边框会增加盒子的总宽度和高度,可能需要调整其他属性以保持布局的完整性。
|
3月前
|
前端开发
前端基础(八)_盒子模型(标准盒子模型和怪异盒子模型)
本文介绍了CSS盒子模型的基本概念,包括内容、内边距、边框和外边距的属性,以及标准盒子模型和怪异盒子模型的区别和转换方法。
64 1
前端基础(八)_盒子模型(标准盒子模型和怪异盒子模型)
|
3月前
|
容器
认识盒子模型
认识盒子模型。
55 2
|
6月前
|
前端开发
CSS基础-盒模型:边框、内边距、外边距
【6月更文挑战第8天】Web设计中的盒模型由内容区域、内边距、边框和外边距组成,是理解页面布局的关键。内容区域包含实际内容,内边距提供间隔,边框定义元素边界,外边距控制元素间距。常见易错点包括边框宽度计算、外边距折叠和盒模型理解不透彻。通过实践和媒体查询可解决响应式设计挑战,`border-radius`可能导致圆角问题。理解盒模型并灵活应用能创建多样化布局。
112 6
|
7月前
|
前端开发
盒子模型练习
盒子模型练习
29 0
|
7月前
|
前端开发
说说你对盒子模型的理解
该文介绍了CSS中的盒子模型,包括W3C标准盒子模型和IE怪异盒子模型。在标准模型中,元素宽度不包含padding和border,总宽度=width+padding+border+margin。而在IE怪异模型中,width和height包含padding和border,总宽度和高度仅加margin。CSS的box-sizing属性用于控制元素的盒模型,content-box遵循标准模型,border-box则类似IE模型。
|
6月前
|
前端开发
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
55 0
|
6月前
|
前端开发 容器
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影(一)
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影一
86 0
|
前端开发 开发者
标准盒子模型,与怪异盒子模型详解
标准盒子模型,与怪异盒子模型详解
192 0