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 ...
随机推荐
- C++ 选择排序的理解
#include<stdio.h> #include <iostream> using namespace std; void swap(int *a, int *b) //元 ...
- Ubuntu18.04 从头开始编译 Android Native WebRTC
本文详细记录Mac下使用PD虚拟机安装ubuntu18.4桌面版,编译Android Native WebRTC的过程. 注意如果仅仅是使用WebRTC没必要手动编译源码,直接用官方提供的预编译包即可 ...
- Flask-Sockets实时的监控画面
Ajax轮询是通过特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器.这种简单粗暴模式有一个明显的缺点,就是浏览器需要不断的向服务器发出请求,H ...
- 【Weiss】【第03章】练习3.20：中缀表达式转后缀表达式
[练习3.20] a.编写一个程序将中缀表达式转换为后缀表达式,该中缀表达式含括号及四则运算. b.把幂操作符添加到你的指令系统中去. c.编写一个程序将后缀表达式转化为中缀表达式. Answer: ...
- Python+Appium实现自动化测试
一.环境准备 1.脚本语言:Python3.x IDE:安装Pycharm 2.安装Java JDK .Android SDK 3.adb环境,path添加E:\Software\Android ...
- iOS开发:十六进制颜色转UIColor
Objective-C UIColor * __nullable UIColorFromHexValue(NSUInteger hexValue) { CGFloat red = (hexValue ...
- Unity 游戏框架搭建 2019 (九~十二) 第一章小结&第二章简介&第八个示例
第一章小结 为了强化教程的重点,会在合适的时候进行总结与快速复习. 第二章 简介 在第一章我们做了知识库的准备,从而让我们更高效地收集示例. 在第二章,我们就用准备好的导出工具试着收集几个示例,这些示 ...
- 在一台Linux服务器上安装多个MySQL实例（一）--使用mysqld_multi方式
(一)MySQL多实例概述 实例是进程与内存的一个概述,所谓MySQL多实例,就是在服务器上启动多个相同的MySQL进程,运行在不同的端口(如3306,3307,3308),通过不同的端口对外提供服务 ...
- Reverse Subarray To Maximize Array Value
2020-02-03 20:43:46 问题描述: 问题求解: public boolean canTransform(String start, String end) { int n = star ...
- 【opencv系列04】OpenCV4.X图形绘制
一. 基本图形绘制 1. 基本函数与参数 cv2.line(): 线 cv2.circle(): 圆 cv2.rectangle(): 矩形 cv2.ellipse(): 椭圆 cv2.putText ...