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;

相关推荐
文军的烹饪实验室27 分钟前
ValueError: Circular reference detected
开发语言·前端·javascript
Martin -Tang1 小时前
vite和webpack的区别
前端·webpack·node.js·vite
迷途小码农零零发1 小时前
解锁微前端的优秀库
前端
王解2 小时前
webpack loader全解析,从入门到精通(10)
前端·webpack·node.js
我不当帕鲁谁当帕鲁2 小时前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段
前端·javascript·arcgis
那一抹阳光多灿烂3 小时前
工程化实战内功修炼测试题
前端·javascript
放逐者-保持本心,方可放逐3 小时前
微信小程序=》基础=》常见问题=》性能总结
前端·微信小程序·小程序·前端框架
毋若成5 小时前
前端三大组件之CSS,三大选择器,游戏网页仿写
前端·css
红中马喽6 小时前
JS学习日记(webAPI—DOM)
开发语言·前端·javascript·笔记·vscode·学习
Black蜡笔小新6 小时前
网页直播/点播播放器EasyPlayer.js播放器OffscreenCanvas这个特性是否需要特殊的环境和硬件支持
前端·javascript·html