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 ...
随机推荐
- python虚拟环境安装使用
# 安装 pip install virtualenv pip install virtualenvwrapper-win # win环境下 liunx下不需要-win #创建一个文件夹并cd进去mk ...
- 简单配置Vue路由
简单配置Vue路由 1. 创建一个单文件组件Test.vue <template> <div>Test</div> </template> <s ...
- Vue2.0 【第二季】第1节 Vue.directive自定义指令
目录 Vue2.0 [第二季]第1节 Vue.directive自定义指令 一.什么是全局API? 二. Vue.directive自定义指令 三.自定义指令中传递的三个参数 四.自定义指令的生命周期 ...
- ES6： let 与 const
ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const. let 声明的变量只在 let 命令所在的代码块内有效. const 声明一个只读的常量,一旦声明 ...
- 前端基础面试题（js部分）
前端基础面试题(JS部分) 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String值类 ...
- go源码分析(三) 使用go http包开发web时遇到的坑之卸载插件，重启插件管理，仍然可以访问已经卸载的插件
问题描述: web页面下发重启指令后,对卸载插件的处理不完整(虽然列表已经没有插件描述,但是在HandleFunc的路由列表中依然存在) 我们需要清空路由列表map 路由列表结构见代码: net/ht ...
- 基于Python3 + appium的Ui自动化测试框架
UiAutoTest 一.概要 数据驱动的Ui自动化框架 二.环境要求 框架基于Python3 + unittest + appium 运行电脑需配置adb.aapt的环境变量,build_tools ...
- ubuntu 16.04服务器安装apache2 + php + mysql
具体操作 第一步:安装mysql apt-get install mysql-server mysql-client 第二步:安装apache2 apt-get install apache2 第三步 ...
- window 查看端口 杀端口
最近写项目,总是出现端口被占用的问题,原来傻傻的把电脑重启一下,终于有一天受不了了,想要想办法解决.刚开始从网上找了好多教程,发现不行.开始自己尝试,终于,成功的将占用端口的进程杀掉.在此记录下过程( ...
- win7 win10 更换电脑盘符的图标
效果如下 第一步 -> 1.把文件全放到盘符住目录 2.如果需要更换图标 (文件最好是ICO后缀的) 打开 Autorun 文件并编辑 第二步 -> 重启电脑就完了 下载连接 已经放到码 ...