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;

相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子1 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina1 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路2 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui