html5盒子模型

1.边框的常用属性

border-color

|-------------------------|------------------------------------------------------------------------|---------------------------------------|
| 属性 | 说明 | 示例 |
| border-top-color | 上边框颜色 | border-top-color:#369; |
| border-right-color | 右边框颜色 | border-right-color:#369; |
| border-bottom-color | 下边框颜色 | border-bottom-color:#fae45b; |
| border-left-color | 左边框颜色 | **border-left-color:#efcd56; |
| border-color | 四个边框为同一颜色 | **border-color:#eeff34; |
| border-color | 上、下边框颜色
#369
左、右边框颜色
:****#000
| border-color:#369 #000; |
| border-color | 上边框颜色
:****#369
左、右边框颜色**:#000** 下边框颜色#f00** | border-color:#369 #000 #f00; |
| border-color | 上、右、下、左边框颜色
#369
#000#f00、****#00f** | border-color:#369 #000 #f00 #00f; |

border-width

|-------------------------|---------------------------------------------------------------------|-----------------------------------|
| 属性 | 说明 | 示例 |
| border-top-width | 上边框****粗细 | border-top-width:5px; |
| border-right-width | 右边框****粗细 | border-right-width:10px; |
| border-bottom-width | 下边框****粗细 | border-bottom-width:8px; |
| border-left-width | 左边框****粗细 | border-left-width:22px; |
| border-width | 四个边框****的粗细统一 | border-width:5px; |
| border-width | 上、下边框粗细:10px **左、右边框粗细:5px | border-width:10px 2px; |
| border-width | **上边框
粗细:5px **左、右边框粗细:1px **下边框粗细:6px | border-width:5px 1px 6px; |
| border-width | **上、右、下、左边框
**粗细:
1px 2px 5px 2px | border-width:1px 2px 5px 2px; |

border-style:

none

hidden

dotted

dashed:虚线边框

solid:实线边框

double

border:

border:1px solid #3a6587;

border:1px dashed red;

2.外边距margin

margin-top

margin-right

margin-bottom

margin-left

margin

网页居中对齐 margin:0px auto;

3.内边距padding

padding-left

padding-right

padding-top

padding-bottom

padding

4.box-sizing属性

content-box:盒子的实际宽度和高度仅应用于元素内容,不包括内边距和边框

border-box:盒子的实际高度和宽度包括元素内容、边框和内边距

box-sizing:content-box | border-box | inherit;

5.圆角边框

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

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

圆形

利用border-radius属性制作圆形的两个要点

元素的宽度和高度必须相同

圆角的半径为元素宽度的一半,或者直接设置圆角半径值为50%

半圆形

利用border-radius属性制作半圆形的两个要点

制作上半圆或下半圆时,元素的宽度是高度的2倍,而且圆角半径为元素的高度值。

制作左半圆或右半圆时,元素的高度是宽度的2倍,而且圆角半径为元素的宽度值

扇形

利用border-radius属性制作扇形遵循"三同,一不同"原则

"三同"是元素宽度、高度、圆角半径相同

"一不同"是圆角取值位置不同

7.盒子阴影

box-shadow:inset x-offset y-offset blur-radius color;

相关推荐
Codebee1 分钟前
使用Qoder 改造前端UI/UE升级改造实践:从传统界面到现代化体验的华丽蜕变
前端·人工智能
叫我詹躲躲5 分钟前
开发提速?Vue3模板隐藏技巧来了
前端·vue.js·ai编程
华仔啊5 分钟前
面试都被问懵了?CSS 的 flex:1 和 flex:auto 真不是一回事!90%的人都搞错了
前端·javascript
前端康师傅8 分钟前
JavaScript 函数详解
前端·javascript
金金金__10 分钟前
antd v5 support React is 16 ~ 18. see https://u.ant.design/v5-for-19 for...
前端
会豪11 分钟前
工业仿真(simulation)--前端(二)-资源管理器
前端
@小红花1 小时前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵1 小时前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
魔云连洲1 小时前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年1 小时前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css