一，盒子模型

网页设计中常听的属性名:内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模式都具备这些属性。

这些属性我们可以用日常生活中的常见事物--盒子作一个比喻来理解，所以叫它盒子模式。

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

首先解释一下概念：红色部分是你的操作区域（比如说一个文本框）。蓝色部分应该是我们的网页。

边框：border所在的区域是边框线条，有点粗，像区域了，但是他是边框。

内容：是1050*26那里，那里是内容部分。

内边距:内容到边框的距离。

外边距：边框到蓝色框的距离。

*CSS选择器优先级：ID选择器 >类选择器>HTML标签选择器

*CSS核心内容：标准流，盒子模型，浮动，定位。

1.边框

简单格式：

border:1px solid #00F;（简写使这种格式，系统默认格式。）

1px：边框粗细为1像素

solid：线条样式

#00F：线条颜色

详细格式：

border-width: 1px;

border-color: #ff0000;

border-style: dotted;

二，内边距

简单

padding:5px,6px,7px,8px;（设置顺序是上，右，下，左，意思是上内边距为5，右内边距为6，以此类推）

详细

padding-top:5px;

padding-right:6px;

padding-bottom:7px;

padding-left:8px;

三，外边距

设置样式和内边距雷同。

四，相对定位和绝对定位

position:relative; /*相对定位*/

left:20px;

相对位移是在你其他盒子的基础上来进行定位的。

position:absolute;/*绝对定位*/

top:20px;/*移位*/

绝对位移是以整个伟业为基准来进行定位的。

牛腩知识小结-盒子模型相关推荐

CSS基本知识之盒子模型
CSS基本知识之盒子模型首先要知道什么是盒子模型? 所谓盒子模型:就是把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器.CSS 盒子模型本质上是一个盒子,封装周围的 HT ...
【web前端】CSS笔记小结盒子模型+PS基操+样例（Day 3+部分Day 4）
来源:黑马程序员pink老师前端入门教程目录 I. 盒子模型 Box Model ①网页布局的本质 ②组成部分 ❀图解 ❀边框 border ※ 组成 ※※ 样式 ※ 简写 ※练习 ※细线边框 ...
从CSS盒子模型说到offsetHeight、scrollHeight、clientHeight的区别
小结一下~ 前言 offsetHeight.scrollHeight.clientHeight这三个属性我们经常在开发中遇到,如果小伙伴们没有经常使用的话,很容易把这些属性搞混,今天就来理一理这三个属 ...
三、CSS重要的盒子模型知识总结（中篇）
@Author:Runsen CSS知识总结(上) 继续上篇文章,总结css 今天一篇全讲重要的盒子模型文章目录边框属性什么边框? 边框属性的格式连写(分别设置四条边的边框) 内边距什么是内 ...
超详细的css知识树状图~CSS选择器盒子模型、浮动、定位和装饰
前言学习任何新知识,最重要的永远都是搭建属于自己的知识框架,随后学习的细碎知识点往框架里面填入,最后形成一棵属于自己的知识大树.本系列的博客专注更新总结好的思维导图,希望可以帮助大家快速理清知识结构 ...
CSS 小结笔记之盒子模型
网页标签可以看成是一个个盒子,页面设计就像垒积木一样,在网页中将盒子摆好显示出来.在浏览器中可以很清楚的去看到一个标签的盒子,具体方法如下: 打开浏览器的开发人员工具,在Elements中选中一个标签 ...
CSS基础知识（颜色、伪类、盒子模型）
6.设置颜色单位 L 普通英文单词 {color : 属性值red;} 此方法简单,便捷.但设置的颜色在不同浏览器中,可能显示的颜色出现差异 * 三原色 - 红.绿.蓝 L 颜色的八进制方式 ...
css知识笔记（二）——盒子模型
盒子模型类比月饼:礼盒是最外层,里面的月饼(伍仁)是页面元素,比如一个div:"伍仁"本身是盒子的内容(可以是文字.图片.另一个标签元素),月饼和月饼盒之间的距离称为盒子模型的内 ...
CSS基础知识(表单标签、事件、CSS介绍、选择器、伪类选择器案例、样式、盒子模型、定位)...
一. 表单标签 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...

牛腩知识小结-盒子模型