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 ...
随机推荐
- Openwrt 路由器上 安装 svn server
Openwrt 上也可以搭建 svn 服务了,这样就不用开着 ubuntu 了,省电. 在后台打开 ssh 服务,或者使用 telnet 服务,使用 putty 登录路由器. 如下图所示,这里刷的是 ...
- Effective Go中文版（更新中）
原文链接:https://golang.org/doc/effective_go.html Introduction Go是一种新兴的编程语言.虽然它借鉴了现有语言的思想,但它具有不同寻常的特性,使得 ...
- 阿里云centos安装oracle
目录 阿里云centos安装oracle 阿里云默认没有swap分区,oracle安装需要 安装Oracle所需的依赖包 创建用户和组 关闭SELINUX(阿里云缺省关闭) 开始安装 使用" ...
- D2T1服务器需求——毒?瘤题（并不是
这题我第一眼居然差点错了\(OTZ\) 然后写了线段树,还写挂了-- 写好了\(query\)操作,发现似乎不需要区间查询,然后又删掉-- 看着这熟悉的操作,似乎在哪里见过-- 然后我莫名其妙把一个\ ...
- asp.net里获取或设置textarea/asp:Textbox/dropdownlist/CheckBox 的值
1. textarea .asp:label 和 tasp:extbox 的text文本值: <textarea id="txt_remark" runat=" ...
- Nacos作为微服务注册中心，爱不释手的感觉
我觉得Nacos用起来还不错 在使用SpringCloud做分布式微服务架构时,注册中心是必不可少的一个组件.目前可以用的主要有:Eureka.Consul.Zookeeper.今天,我们就来说一下A ...
- hdu1908 逆序对
题目链接:https://www.luogu.com.cn/problem/P1908 这个题不要以为拿到手就可以树状数组秒,本题的数据范围是1e9显然简单的树状数组是空间不够的,点个数有5e5,所以 ...
- 两片74门实现的双边沿D触发器
最近一个项目需要时钟上升沿和下降沿都可以触发的D触发器,但并没有找到符合要求的商品IC.也去看了一些文献,但都是给的示意图然后用分立元件实现的(应该是准备做成IC).这里给出一种最少2个IC就能搭出来 ...
- CF33C Wonderful Randomized Sum 题解
原题链接 简要题意: 你可以无限次的把该数组的一个前缀和后缀 \(\times -1\),问最终的最大序列和. 这题盲目WA了数次才知道本质 这题89个数据吊打std CF真好啊,发现一个错后面就不测 ...
- 计网-ping服务命令与ICMP协议
目录 一.IP协议的助手 —— ICMP 协议(网络层协议) 二.ping —— 查询报文类型的使用 三.traceroute —— 差错报文类型的使用 参考:从Wireshark抓包软件角度理解PI ...