css布局之盒模型
盒模型
导读
随着网络技术的不断发展，人们已经不再只关注网页的功能，还追求网页的性能和美观，于是css应运而生，一个完美的网页必然有一个完美的布局，而css盒模型是网页布局的基石，所以了解它对网页制作至关重要。
一、什么是盒模型？
一个经典的CSS盒子模型有四个属性：内容(content)、内边距(padding)、边框(border)、外边距(margin) 。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型，它规定了网页元素如何显示以及元素间相互关系，HTML的所有元素都可以看作是一个盒子。
二、属性与属性值
1、content（内容区）
| content | |
| content的用法： | |
| 1、内容区是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型 | |
| 2、内容区有三个属性，width、height 和overflow | |
| 3、width控制内容的宽度，height控制内容的高度，这两个属性的值的单位都是像素（px），而当内容偏多超出内容区大小时，可以使用overflow来控制溢出部分 | |
| overflow的用法： | |
| overflow：hidden；溢出部分将不可见 | |
| overflow：visible；溢出的内容信息可见，只是被呈现在盒子的外部 | |
| overflow：scroll；滚动条将被自动添加到盒子中，用户可以通过拉动滚动条显示内容信息 | |
| overflow：auto；将由浏览器决定如何处理溢出部分 | |
| overflow：inherit；规定应该从父元素继承overflow属性的值 |
比如我们规定一个宽300px、高200px的内容区：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
width: 300px;
height: 200px;
background: red ;
}
</style>
</head>
<body>
<div id="box">content</div>
</body>
</html>
效果图：
2、padding（内填充）
| padding | |
| padding的用法： | |
| padding是在盒子里面，在盒子与内容之间 ，是第二层 | |
| padding的作用：控制子元素在父元素里面的位置关系 | |
| padding会把盒子撑大，但padding不会对背景图的位置造成影响 | |
| 如果想让盒子保持原有的大小：在宽高基础上减掉。（ 如果一个元素是被内容撑开的，没有设置固定的宽高，padding直接撑开。不用减掉 ） | |
| 单一方向添加padding | |
| padding-top: 50px; 向上填充50px | |
| padding-bottom:50px; 向下填充 50px | |
| padding-left :50px ;向左填充50px | |
| padding-right: 50px;向右填充50px | |
| 复合写法： | |
| 一个值 | padding:30px; 四周 |
| 两个值 | padding:10px 30px; 上下 左右 |
| 三个值 | padding:10px 30px 50px 上 左右 下 |
| 四个值 | padding:10px 30px 50px 100px 上 右 下 左 |
现在我们想要把内容往右边走50px,给它加padding-left：50px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
width: 300px;
height: 200px;
background: red ;
padding-left: 50px;
}
</style>
</head>
<body>
<div id="box">content</div>
</body>
</html>
看看效果：内容往右走了，但盒子被撑宽了
3、border（边框）
| border | |
| border的用法： | |
| border默认在盒子宽高之外，外边距和内填充的中间，是第三层 | |
| border-style 属性是边框最重要的属性，如果没有指定边框样式，其他的边框属性都会被忽略，边框将不存在 | |
| border属性 | |
| border-width: 5px;边框大小为5px | |
| border-color:red; 颜色为红色 | |
| border-style边框类型（solid：实线；doshed：虚线； dotted：点状线； double：双线； none：没有线条；） | |
| 单一方向添加border | |
| border-left: 5px solid red; 大小为5px 实线 红色 | |
| border-right: 5px solid red; 大小为5px 实线 红色 | |
| border-top: 5px solid red; 大小为5px 实线 红色 | |
| border-bottom:5px solid red; 大小为5px 实线 红色 | |
| 复合写法： | |
| 一个值 | border-with/color/style:; 四周 |
| 两个值 | border-with/color/style:; 上下 左右 |
| 三个值 | border-with/color/style:; 上 左右 下 |
| 四个值 | border-with/color/style:; 上 右 下 左 |
| 利用border制作三角形： | |
| 1、 标签设置宽高为0 | |
| 2、统一设置四个方向透明边框 | |
| 3、调整某个方向边框可见色 | |
| 代码：border-top-color: transparent; |
再加一个蓝色边框，看看效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
width: 300px;
height: 200px;
background: red ;
padding-left: 50px;
border: blue solid 10px;
} </style>
</head>
<body>
<div id="box">content</div>
</html>
效果图：
4、margin（外边距）
| margin | |
| margin的用法 : | |
| margin在元素外围，不会撑大元素的大小，是盒子最外层 | |
| margin的作用：作用:控制元素与元素之间的间距 | |
| margin:0 auto;让当前元素在父元素里面左右居中 | |
| 单一方向添加margin | |
| margin-top: 50px; 向上填充50px | |
| margin-bottom:50px; 向下填充 50px | |
| margin-left :50px ;向左填充50px | |
| margin-right: 50px;向右填充50px | |
| 复合写法： | |
| 一个值 | margin:30px; 四周 |
| 两个值 | margin:10px 30px; 上下 左右 |
| 三个值 | margin:10px 30px 50px 上 左右 下 |
| 四个值 | margin:10px 30px 50px 100px 上 右 下 左 |
| 注意： | |
| 两个相邻元素上下的margin值 不会叠加 按照较大值设 | |
| 如果父元素和第一个子元素没有浮动的情况下，给第一个子元素添加margintop,会错误放在父元素上面 |
加上margin：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
width: 300px;
height: 200px;
background: red ;
padding-left: 50px;
border: blue solid 10px;
margin: 40px;
} </style>
</head>
<body>
<div id="box">content</div>
</html>
效果图：
三、盒模型的计算
宽度=margin-left+margin-right+border-left+border-right+padding-left+padding-right+width
高度=margin-top+margin-bottom+border-top+border-bottom+padding-top+padding-bottom+height
css布局之盒模型的更多相关文章
- 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）
CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...
- 浅谈css中的盒模型（框模型）
css中的盒模型是css的基础,盒模型的理解可以帮助我们进行对样式进行修改.废话不多说,进入正题: 在w3c中,CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边框.边框 和 外边 ...
- css高级选择器&盒模型
css高级选择器&盒模型 1.组合选择器 群组选择器 /* 每个选择器为可以为三种基础选择器的任意一个,用逗号隔开,控制多个*/ div,.div,#div{ color:red } 后代(子 ...
- 李洪强和你一起学习前端之(6)css行高,盒模型,外边距
李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...
- CSS学习笔记——盒模型，块级元素和行内元素的区别和特性
今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面 ...
- CSS中的盒模型
CSS的盒模型描述了一些长方形盒子,这些长方形盒子被用来表示文档树中的元素,并根据视觉格式化模型进行定位. 1. 盒子的尺寸 每个盒子都有一个content区域(比如文本.图片等)和可选的包围cont ...
- CSS布局(二) 盒子模型属性
盒子模型的属性 宽高width/height 在CSS中,可以对任何块级元素设置显式高度. 如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效果,就好像有额外的内边距一样: 如果指定高度小于 ...
- 前端笔记之移动端&响应式（中）视口&百分比布局&弹性盒模型&rem&fillpage
一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...
- {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index
03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...
随机推荐
- D2T1服务器需求——毒?瘤题（并不是
这题我第一眼居然差点错了\(OTZ\) 然后写了线段树,还写挂了-- 写好了\(query\)操作,发现似乎不需要区间查询,然后又删掉-- 看着这熟悉的操作,似乎在哪里见过-- 然后我莫名其妙把一个\ ...
- go例子(三) 使用context实现发牌手策略
使用context包实现发牌手策略, 发牌手策略:罗永浩在介绍TNT工作站时描述,将一个任务分发给多个处理者处理,谁先处理完使用谁的结果,取消其他的处理者的任务. 经典的例子:同时在百度.google ...
- vscode灰暗色主题和 左侧加图标 Spacegray VSCode vscode-icons
vscode灰暗色主题和 左侧加图标 Spacegray VSCode vscode-icons
- void指针和数组指针之间的转换
由于void* 可以被任何指针赋值,所以以void*作为函数参数可以使得接口更容易接受不同类型的参数,不过需要注意的时,实际操作时还需要利用强制类型转换,将指针转换为原类型,否则在内存上会有问题. 一 ...
- 网络安全从入门到精通（第一章-1）Web服务器通信原理
本文内容 IP地址 域名 端口 HTTP协议 从访客角度看网页浏览器流程 常见服务器系统 路径 Web容器 常见的Web容器 !!!多动手,多动手,只看只听是不行的!!! 1,IP地址:就是计算机在互 ...
- kubernetes 1.17.2结合ceph13.2.8 实现jenkins部署并用traefik2.1代理
注:关于ceph.kubernetes集群的部署在此不声明,相信搜到本篇博文,你一定对ceph.kubernetes的部署环节手刃有余. 注:本篇博文牵扯到的技术点有:ceph.kubernetes. ...
- 114 Flatten Binary Tree to Linked List [Python]
114 Flatten Binary Tree to Linked List Given a binary tree, flatten it to a linked list in-place. 将二 ...
- java基础-Map
简介 Map是一种接口,实现类有 hashMap SortedMap是继承自Map的接口,实现类为TreeMap,在内部会对Key进行排序 遍历Map 使用for each循环遍历Map实例的keyS ...
- 洛谷1265prim算法求最小生成树
题目链接:https://www.luogu.com.cn/problem/P1265 最小生成树的prim算法跟dijkstra算法非常像,就是将点分成两个集合,一个是已经在生成树中的点的集合,一个 ...
- CentOS7 如何安装JDK（以及卸载）
CentOS7 如何安装JDK(以及卸载) 1. 如何安装JDK? 购买云服务器后,会提供一个公网IP和内网IP,需要使用SSH工具连接到云服务器(推荐使用SecureCRT),随后就能在命令行中操作 ...