CSS 盒子模型【快速掌握知识点】
2023-09-11 14:16:58 时间
目录
一、什么是盒子模型
css盒子模型又称为框模型,盒子的最内部是元素的实际内容即元素内容,紧挨着元素框外部的是内边距,其次是边框,然后最外层是外边距,这几部分共同组成了盒子模型。
二、边框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-coor | 四个边框为同一颜色 | border-color:#eeff34; |
上、下边框颜色:#369 左、右边框颜色:#000 | border-color:#369 #000; | |
上边框颜色:#369 左、右边框颜色:#000 下边框颜色:#f00 | border-color:#369 #000 #f00; | |
上、右、下、左边框颜色: #369、#000、#f00、#00f | border-color:#369 #000 #f00 #00f; |
三、边框粗细border-width
border-top-width:5px;
border-right-width:10px;
border-bottom-width:8px;
border-left-width:22px;
border-width:5px ;
border-width:20px 2px;
border-width:5px 1px 6px;
border-width:1px 3px 5px 2px;
四、边框样式border-style
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
border-style:solid ;
border-style:solid dotted;
border-style:solid dotted dashed;
border-style:solid dotted dashed double;
五、外边距margin
margin-top: 1 px
margin-right : 2 px
margin-bottom : 2 px
margin-left : 1 px
margin :3px 5px 7px 4px;
margin :3px 5px;
margin :3px 5px 7px;
margin :8px;
六、内边距padding
padding-left:10px;
padding-right: 5px;
padding-top: 20px;
padding-bottom:8px;
padding:20px 5px 8px 10px ;
padding:10px 5px;
padding:30px 8px 10px ;
padding:10px;
七、圆角边框
四个属性值按顺时针排列:
border-radius: 20px 10px 50px 30px;
八、圆形
利用border-radius属性制作圆形的两个要点,元素的宽度和高度必须相同,圆角的半径为元素宽度的一半,或者直接设置圆角半径值为50%。
div{
width: 100px;
height: 100px;
border: 4px solid red;
border-radius: 50%;
}
九、盒子阴影
box-shadow:inset x-offset y-offset blur-radius color;
相关文章
- python爬虫知识点总结(一)库的安装
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
- python遇到的知识点
- 【Css/Html】网页Css默认设计样式载入模板代码body.css
- 【CSS】 Css背景图片及背景渐变综合知识和技巧大全(代码实例)
- jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
- 盘点2021年全球AI芯片,详解“xPU”,请收下最新最全的知识点
- 1051 Pop Sequence (25 分)【难度: 中 / 知识点: 模拟 栈】
- 重温《单元测试的艺术》,总结常用知识点
- 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
- 3天学会css视频_PHP初级 CSS教程_CSS入门教程
- HTML 基础【快速掌握知识点】
- Jsp复习(详细的知识点)day01
- 6个冷门但实用的pandas知识点
- 关于 Android 渲染你应该了解的知识点
- JavaScript基础知识点串联——变量、数据、函数和数组
- 408 | 【2016年】计算机统考真题 自用回顾知识点整理
- CSS_css sprite原理优缺点及使用
- CSS阻塞渲染、怎么防止css阻塞
- Go Web开发知识点:TCP和UDP对比 网络攻击解释 阻塞调用和同步调用 http和https的区别 session和cookie
- 【MATLAB学习】小知识点(总结版)
- pandas_学习的时候总会忘了的知识点
- css陌生知识点
- 总结20个面试常见的HTML&CSS知识点