【Web前端】落地成盒?达咩之——CSS盒子模型及属性
目录
前言
什么是盒子模型
- 盒子的组成
- 盒子的大小
盒子成分分析
1、外边距——margin
2、padding——内边距
3、border——边框
- border-style:边框样式
- border-wideth:边界宽度
- border-color:边界颜色
- border:边框
- border-radius:边框半径
4、content——内容区/网页元素
overflow-处理溢出
前言
ps:为节约阅读代码时间,本文将不展示头部(<head></head>)元素。
<style>div{width: 500px;height: 360px;background-color: rgb(128, 169, 82);text-align: center;line-height: 360px;font-size: 30px;}
</style>
<body><div>我是一个绿色滴div标签</div>
</body>
我们编写了一个div标签,目的是在网页上创建一个区域。让我们来看一下放大到200%的页面效果。
我们会发现,在页面的上方与左侧边缘存在一定空隙(类似word文档中的页边距),按照我们平常看到的页面布局与页面效果,这样空隙的存在确实有点尴尬。
究其原因,便引出本文的主题——CSS盒子模型。正因盒子模型的存在,才使得这一情况的出现。
什么是盒子模型
盒子模型,顾名思义,盒子就是用来装东西的,它装的东西就是HTML元素的内容。或者说,每一个可见的 HTML 元素都是一个盒子,下面所说的盒子都等同于 HTML 元素。这里盒子与现实中的盒子又有点不同,这里的盒子是二维的。
盒子的组成
盒子的大小
盒子的大小指的是盒子的宽度和高度,但并非width和height属性。因为一般情况下width
和height
属性只是设置content(内容)部分的宽和高。盒子真正的宽和高按下面公式计算:
盒子的宽度 | 内容宽度 + 左内边距 + 右内边距 + 左边框宽度 + 右边框宽度 + 左外边距 + 右外边距 |
---|---|
盒子的高度 | 内容高度 + 上内边距 + 下内边距 + 上边框宽度 + 下边框宽度 + 上外边距 + 下外边距 |
写代码,我们是专业的,那么就是说,用带属性的公式表示为:
盒子宽度 | width + padding-left + padding-right + border-left + border-right + margin-left + margin-right |
---|---|
盒子高度 | height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom |
盒子成分分析
1、外边距——margin
属性 | 含义 |
---|---|
margin | 同时设置四个外边距 |
margin-top | 上边距 |
margin-bottom
|
下边距 |
margin-left | 左边距 |
margin-right | 右边距 |
此外,margin(外边距)有支持同时设置多种边距的简写方式:
①同时设置四个方向的边距值相等(仅写一个值)
/*margin属性后只跟一个值,同时设置四条边的边距相等*/
margin: 10px;
/*下面样式与上面的样式等价*/
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
②同时设置上下边距 左右边距(写两个值)
/*margin属性后跟两个值,第一个值设置上下边距,第二个是设置左右边距*/
margin: 10px 20px;
/*下面样式与上面的样式等价*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
③同时设置上边距 左右边距 下边距(写三个值)
/*margin属性后跟三个值,第一个值设置上边距,第二个是设置左右边距,第三个值设置下边距*/
margin: 10px 20px 30px;
/*下面样式与上面的样式等价*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 20px;
④同时设置 上边距 右边距 下边距 左边距(写四个值,顺时针方向)
/*margin属性后跟四个值,第一个值设置上边距,第二个是设置右边距,第三个值设置下边距,
第四个值设置左边距*/
margin: 10px 20px 30px 40px;
/*下面样式与上面的样式等价*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 20px;
注意,当内层的标签宽度设置为100%(外层的100%)时设置外边距,只有左侧会出现边距,效果如下。
<style>.out{width: 500px;height: 360px;background-color: rgb(128, 169, 82);text-align: center;line-height: 360px;font-size: 30px;}.in{margin: 30px;width: 500px;height: 360px;background-color: rgb(46, 98, 128);text-align: center;line-height: 360px;font-size: 30px;}
</style>
<body><div class="out"><div class="in">我是一个小滴div标签</div></div>
</body>
这种情况我们可以不设置内层元素的宽度,通过设置内层元素的外边距得到我们想要的效果。
<style>.in{margin: 30px;background-color: rgb(46, 98, 128);text-align: center;line-height: 360px;font-size: 30px;}
</style>
但是我们发现这样的设置只改变了左右的边距,上下边距改变只能通过设置外层元素的内边距改变,下面我们来介绍内边距。
2、padding——内边距
padding表示盒子的内边距(填充)。
同样,padding也可以像margin一样有支持同时设置多种边距的简写方式:
①同时设置四个方向的边距值相等(仅写一个值)
②同时设置上下边距 左右边距(写两个值)
③同时设置上边距 左右边距 下边距(写三个值)
④同时设置 上边距 右边距 下边距 左边距(写四个值,顺时针方向)
(书写方式与margin相似)
刚刚提到仅通过设置外边距,不能使我们完全得到想要的效果,这时我们请来内边距的帮助。
<style>.out{width: 500px;height: 360px;padding: 30px;background-color: rgb(128, 169, 82);text-align: center;line-height: 360px;font-size: 30px;}.in{background-color: rgb(46, 98, 128);text-align: center;line-height: 360px;font-size: 30px;}
</style>
这样的效果就十分完美了,但是学过前端的朋友都知道,网页是很难调教的,如果你发现网页呈现出的边距十分奇怪,那有可能是你同时给外层元素设置了内边距,又给内层元素设置了外边距。面对只认得0,1编码的傻瓜计算机,我们唯有细心细心再细心方得成功!
那么现在,让我们去除掉那令人尴尬的白色空隙吧!其实,网页本身也是一个盒子,也具有内外边距的属性,所以在每一次进行代码编写之前,我们可以首先对页面中所有元素取消内外边距的设置,有需要时再通过更高级别的样式设置方式来进行设置。
by the way:
样式的优先级:行内样式>内部样式>外部样式(遵循就近原则)
选择器的优先级:id选择器(#id{})>类选择器(.类{})>标签选择器
下面来看通过*{}(有编程经验的小兄弟都知晓,*表示全部的意思)设置后,代码与页面效果:
<style>*{padding: 0;margin: 0;}div{width: 500px;height: 360px;background-color: rgb(128, 169, 82);text-align: center;line-height: 360px;font-size: 30px;}
</style>
<body><div>我是一个绿色滴div标签</div>
此外,设置padding和margin都有撑开盒子的可能,使得盒子变宽、变高,我们可以通过设置box-sizing:border-box设置不使盒子被撑开。
3、border——边框
border表示盒子的边界,它可以设置成可见的,样式多样的。我们可以使⽤ border-style 、 border-width和border-color 及它们的简写属性 border 来设置边框的样式。其中, border-style 属性是边框 最主要的属性,如果没有设置该属性的话,其他的边框属性也会被忽略。
border-style:边框样式
⽤来设置元素中边框的样式。
属性 | 说明 | 样式值 |
---|---|---|
border-top-style
|
上边框样式 |
none:⽆边框
solid:实线边框
dashed:虚线边框
dotted:点状边框
double:双线边框
hidden:与none相同,应⽤于解决边框冲突
|
border-bottom-style | 下边框样式 | |
border-right-style | 右边框样式 | |
border-left-style
|
左边框样式 | |
border-style
|
设置四个边框样式 |
border-wideth:边界宽度
⽤来设置元素中所有边框的宽度,或者单独为某个边框设置宽度。
属性
|
说明 | 宽度值 |
---|---|---|
border-top-width | 上边框宽度 |
thin:较细的边框
medium:中等宽度的边框
thick:较粗的边框
length:数值加单位的形式设置具体边框宽度,例如2px
|
border-bottom-
width
|
下边框宽度 | |
border-right-width | 右边框宽度 | |
border-left-width | 左边框宽度 | |
border-width | 设置四个边框宽度 |
border-color:边界颜色
⽤来设置元素中所有边框的颜⾊,或者单独为某个边框设置颜⾊。
属性
|
说明 | 颜⾊值 |
---|---|---|
border-top-color
|
上边框颜⾊ |
color_name:颜⾊名称,如red
hex_number:颜⾊的⼗六进制值,如
#FF0000
rgb_number:rgb()函数,如rgb(255,0,0)
|
border-bottom-color
|
下边框颜⾊ | |
border-right-color
|
右边框颜⾊ | |
border-left-color
|
左边框颜⾊ | |
border-color
|
设置四个边框颜⾊ |
<style>div{width: 200px;height: 200px;line-height: 200px;text-align: center;background-color: cadetblue;/* 虚线 */border-top-style: dashed;border-top-width: 15px;border-top-color: cornflowerblue;/* 双实线 */border-left-style: double;border-left-width: 10px;border-left-color: rgb(34, 66, 127);/* 小点点 */border-right-style: dotted ;border-right-width: 20px;border-right-color: rgb(15, 38, 82);/* 实线 */border-bottom-style: solid;border-bottom-width: 25px;border-bottom-color: rgb(7, 17, 36);}
</style>
<body> <div>这是一个简单的小标签</div>
</body>
我们发现,同时设置多个边框风格时,各个边框不会出现覆盖现象。
border:边框
border属性是上⾯介绍的 border-width、border-style、border-color 三种属性的简写,使⽤ border属性可以同时定义上述三个属性,语法格式如下:
border:border-width border-style border-color 其顺序无规定
border-radius:边框半径
这是一个简写属性,像上面提到过的margin、padding等一样,可以有一个、两个、三个或四个值进行设置。同样也可以对盒子的每一个角的半径进行单独设置。
属性 | 说明 |
---|---|
border-top-left-radius
|
左上角边框半径 |
border-top-right-radius
|
右上角边框半径 |
border-bottom-left-radius
|
左下角边框半径 |
border-bottom-left-radius
|
右下角边框半径 |
border-radius
|
同时设置四个角边框半径 |
- 边界半径可以使用 px、em 等长度单位,也可以使用百分数。
border-radius
值的个数以及每个值对应控制的位置:
一个值:设置四个角有相同的边界半径;
两个值:第一个值设置左上角和右下角,第二个值设置右上角和左下角;
三个值:第一个值设置左上角,第二个值设置右上角和左下角,第三个值设置右下角;
四个值:第一个值设置左上角,第二个值设置右上角,第三个值设置右下角,第四个之设置左下角。
仅增加一行代码的效果图(border-radius: 20px):
咳咳,使用百分比设置边框半径的效果会不太好看。
图片中是将四个边框半径同时设置为100%的效果,因为div标签的宽度与高度相等,隐层会呈现圆形,如果宽度与高度不相同时同样设置边框半径为100%,会呈现椭圆的形状。
4、content——内容区/网页元素
<style>div{background-color: rgb(216, 178, 95);width: 200px;height: 150px;}</style><body><div>现如今有的人喜欢走在路上,欣赏风景,有的人选择做高大上在奢侈品上停留,那么本创业项目就是了解到顾客的需求,从实际处罚考虑到顾客,从而满足顾客的需求和欲望。除了清新的环境之外,在本店还可以享受到免费的无线网络,可以看到近期的新闻报纸,还有顾客喜爱的各种杂志,还有让儿童欣喜的漫画,此外,还会给女士提供便利的发卡皮筋。</div></body>
我们发现,当内容信息过多,内容会超出内容区设置的范围。
overflow-处理溢出
属性 | 说明 |
---|---|
hidden
|
隐藏溢出的部分 |
visible | 显示溢出的部分(溢出部分显示在盒⼦外部) |
scroll | 为内容区添加⼀个滚动条,可以通过滑动滚动条来查看内容区的全部内容 |
auto | 由浏览器决定如何处理溢出部分(看他心情) |
- hidden
- visible
- scroll
【Web前端】落地成盒?达咩之——CSS盒子模型及属性相关推荐
- web前端——html基础笔记 NO.12{css布局模型(流动,浮动,层模型)}
css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又 ...
- css中 盒模型的属性包括(),css的盒子模型属性有哪些?css盒子模型相关属性的介绍...
本篇文章给大家带来的内容是关于css的盒子模型属性有哪些?css盒子模型相关属性的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1.盒子模型图 2.一个简单的盒子模型 box. ...
- html盒模型中border的写法,HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手...
很多小伙伴在前端学习的时候,发现盒子模型默认为正方形.如何把盒子变成想要的模型呢? 首先我们来看一下默认的情况---- .box{ width: 100px; height: 100px; backg ...
- 前端笔记 | CSS盒子模型
CSS盒子模型 一.盒子模型 1.1 网页布局的本质 1.2 盒子模型的组成 1.3 边框border 1.4 内边距padding 1.5 外边距margin 1.6 清除内外边距 二.特殊样式 2 ...
- 前端基础之CSS盒子模型
目录 长度单位 像素 百分比 em rem 颜色单位 RGB RGBA 文档流(normalflow) 盒子模型 内容区(content) 边框(border) 内边距(padding) 外边距(ma ...
- sessionstorage ie8下跨页面_前端页面布局困难?教你用盒子模型一招解决
CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个 ...
- 咸鱼前端—CSS盒子模型
咸鱼前端-CSS盒子模型 盒子模型 盒子边框(border) 圆角边框(CSS3) 内边距(padding) 外边距(margin) 盒子阴影 盒子模型 所谓盒子模型就是把HTML页面中的元素看作是一 ...
- css盒子模型有几种?以及盒模型设置?
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型. 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分. 盒子模型分为两种: 第 ...
- 放大招!!!落地成盒?教你开发自己的联网吃鸡游戏
<绝地求生大逃杀>(下称PUBG)这款游戏已经发布一年了,获取了不少赞誉和奖项.然而由于神仙泛滥,让我等本来就夕阳红枪法的玩家成盒概率大大上升.虽然有大牛开发了仿PUBG的练枪游戏,但这些 ...
最新文章
- 1月第1周要闻回顾:年末威胁上升的态势仍延续
- Mac OS 软件包管理器Homebrew
- 20159206《网络攻防实践》第五周学习总结
- SAP CRM product category search - hidden search attribute
- python opencv之 Hough圆变换
- PostgresSQL数据类型
- jquery时间倒计时
- ubuntu 18.04.1安装hadoop3.1.2
- python好用的内置库_python内置的高效好用各种库
- 【推荐】PHP各种开源网站系统、cms系统一览[持续更新]
- 【零基础】入门51单片机图文教程(Proteus+Keil)
- 深入理解PHP原理之PHP与WEB服务器交互
- python math 数学函数教程
- RNA 提取步骤(trizol)
- android源代码目录详解
- 宏的录制以及在Visual Basic中显示代码
- mysql 表锁 MDL锁 行锁
- 路缘石成型机工艺结构和使用标准解读
- 支付宝“锦鲤”原来是这么值钱,难怪“信小呆”说下半生不用工作了!
- springboot增加单元测试类
热门文章
- Html(快捷键!+Tab)
- 安卓 自定义吐司样式 ,适配Android Pie
- MFSK调制与相干解调-MATLAB基带仿真
- UserWarning: mkl-service package failed to import, therefore Intel(R) MKL in
- 我是如何使用树莓派击落劫持无人机
- 老子兵法—柔情似水篇
- 计算机考试试题的问题,与计算机等级考试试题有关的几个问题
- nginx使用以及配置
- 文笔极佳的郭靖夫妇悼文
- NUC970 裸机USBD驱动(第一章)