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;

相关推荐
旧曲重听11 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿1 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉1 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽1 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课1 小时前
React useEffect 详解与运用
前端·react.js
我想说一句1 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee1231 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为
小鱼小鱼干1 小时前
【Tauri】Tauri中Channel的使用
前端
拾光拾趣录1 小时前
CSS全面指南:从基础布局到高级技巧与实践
前端·css
南屿im1 小时前
基于 Promise 封装 Ajax 请求:从 XMLHttpRequest 到现代化异步处理
前端·javascript