CSS学习篇核心之——盒子模型
概述
关于CSS的一些基础知识我们在前面文章中已经有所了解,这篇文章我们主要来学习下CSS中的核心知识盒子模型的知识。
盒子模型
元素框的最内部分是实际的内容(element),直接包围内容的是内边距(padding),内边距呈现了元素的背景,内边距的边缘是边框(border),外边距(margin)默认是透明的,因此不会遮挡其后的任何元素,对于这个图边框外的部分就是margin,边框内内容外地部分就是padding。
在CSS中我们一般习惯性的将外边距和内边距设置为0,即
* { margin: 0; padding: 0; }
element元素
在CSS中,width和height是element区域的宽度和高度,对padding、border、margin增加尺寸不会影响element的宽度和高度,只会增加整个框的尺寸。
下面我们看个例子:假设框的每个边上有 10个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素,就需要将内容的宽度设置为 70 像素
#box { width: 70px; margin: 10px; padding: 5px; }
这样的话对于element、padding、border、margin的尺寸就更加的一目了然了,这里需要注意下的是,padding、border、margin即可以应用于一个元素的所有边,也可以应用于单独的边,还有一点就是,margin可以是负值。
内边距(Padding)
元素的内边距是再边框和内容区之间,padding属性设置用长度值或者百分比值,但不允许用负值。关于用百分比的话,有一点需要注意是,即上下内边距的百分数会相对于父元素宽度设置,而不是相对于高度。
对于padding的设置,可以设置它的上下左右这四个边距。
h1 { padding-top: 10px; padding-right: 0.25em; padding-bottom: 2ex; padding-left: 20%; }
h1 {padding: 10px0.25em 2ex 20%;}
上述这两种方法实现的效果是一致地,如果我们的四个边距是一样的话可以用下面这句话。
h1 {padding: 10px;}
边框(border)
元素的边框(border)是围绕元素内容和内边距的一条或多条线,可以规定元素边框的样式、宽度和颜色,这样可以创建出效果更佳出色的边框。
样式
样式是边框的最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。
border可以先设置样式,设置样式的顺序为op-right-bottom-left,设置样式的属性为border-style;
如果想设置单边样式则为:
border-top-style
border-right-style
border-bottom-style
border-left-style
宽度
边框宽度属性设置用border-width设置;
如果想单独设置各边的宽度则用:
border-top-width
border-right-width
border-bottom-width
border-left-width
对于同一个边框宽度我们可是用三种方式来设置如下,效果是一样的。
p { border-style: solid; border-top-width: 15px; border-right-width: 5px; border-bottom-width: 15px; border-left-width: 5px; }
p {border-style:solid; border-width: 15px 5px 15px 5px;}
p {border-style:solid; border-width: 15px 5px;}
颜色
设置边框颜色的原理与设置设置边框宽度的原理是相同的,设置颜色用border-color;
如果设置个边宽度则用:
border-top-color
border-right-color
border-bottom-color
border-left-color
外边距(margin)
margin围绕在元素边框外地空白区域就是margin,设置margin会在元素外创建额外的“空白”,margin属性接收任何长度单位、百分数值甚至负值。
在这里先讲解一个值复制的规则,就是如果缺少左外边距的值,则使用右外边距的值;如果缺少下外边距的值,则使用上外边距的值;如果缺少右外边距的值,则使用上外边距的值。
换句话说,如果为外边距指定了 3个值,则第 4 个值(即左外边距)会从第 2 个值(右外边距)复制得到。如果给定了两个值,第 4 个值会从第 2 个值复制得到,第 3 个值(下外边距)会从第1 个值(上外边距)复制得到。最后一个情况,如果只给定一个值,那么其他 3 个外边距都由这个值(上外边距)复制得到。
如果我们想设置单边外边距属性,可以用下面的属性
margin-top
margin-right
margin-bottom
margin-left
下面这两种方式效果是一致地
h2 { margin-top: 20px; margin-right: 30px; margin-bottom: 30px; margin-left: 20px; }
p {margin: 20px 30px30px 20px;}
总之
在这里我也是简单将盒子模型的基础知识进行了基础的总结,这些知识只有我们经常用,慢慢的轻车熟路了,对于盒子模型的知识的讲解我可能有太不全面的地方,也请大家多多指正。
相关文章
- C++学习笔记——常量定义
- Bootstrap3.0学习第九轮(CSS补充)
- 前端学习 -- Html&Css -- ie6 png 背景问题
- 前端学习 -- Html&Css -- 表格
- 前端学习 -- Css -- 兄弟元素选择器
- 前端学习 --Css -- 子元素的伪类
- [CSS] Use CSS Variables Almost like Boolean Values with Calc (maintainable css)
- 《从零开始学Swift》学习笔记(Day 65)——Cocoa Touch设计模式及应用之选择器
- 《从零开始学Swift》学习笔记(Day 64)——Cocoa Touch设计模式及应用之目标与动作
- 前端学习 -- Html&Css -- 框架集
- 前端学习 -- Html&Css -- 相对定位 绝对定位 固定定位
- 前端学习 -- Css -- 文档流
- 前端学习 -- Css -- 字体的几个属性学习
- 前端学习 -- Css -- 字体分类
- 前端学习 -- Css -- 兄弟元素选择器
- 前端学习 --Css -- 子元素的伪类
- [CSS] Use CSS Variables Almost like Boolean Values with Calc (maintainable css)
- Opencv学习笔记 OpenCv4.5.0 + VS2019 创建c++测试项目
- Python视觉深度学习系列教程 第二卷 第4章 微调网络
- C# 指针学习笔记之指针类型
- CV之OD之YOLO:将yolo的.weights文件转换为tensorflow、keras等深度学习框架模型所需的.h5文件的图文教程(源代码来自YOLO)
- TF学习——TF之Tensorboard:Tensorflow之Tensorboard可视化简介、入门、使用方法之详细攻略
- Python每日一练(机器学习篇)——第44天:机器学习
- Python零基础—网络爬虫入门,附学习路线+笔记+视频教程
- Python Flask框架学习14:Flask 会话
- GitHub创建项目入门学习
- Spring学习总结(五)——Spring整合MyBatis(Maven+MySQL)一
- css+html菜单适应性学习的宽度
- Android开源项目SlidingMenu的学习笔记(一)
- 学习算法笔记(12)
- 如何从零开始学习DIV+CSS
- RL之SARSA:利用强化学习之SARSA实现走迷宫—训练智能体走到迷宫(复杂陷阱迷宫)的宝藏位置
- 学习C++:C++进阶(六)如何在C++代码中调用python类,实例化python中类的对象,如何将conda中的深度学习环境导入C++项目中