CSS基础（三）——盒子模型

盒子模型：所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间，一般来说这些被占据的空间都要比单纯的内容要大。如何让元素进行位置的调整，其实就是通过调整盒子的边框和距离等参数来调整盒子的位置

盒子包括：content（内容）、border（边框）、padding（间隙）、margin（间隔）。

盒子模型的高度=content+padding+border+margin

1.border：一般用于分离元素，border的外围即为元素的最外围，因此计算元素的宽和高的时候就要将border纳入

属性（有三个）：color（他的设置方法与文字的属性完全一样），width（border的粗细程度thin、medium、thick、<length>），style（样式）。

style属性：none、hidden、dotted、dashed、solid、double、groove、ridge、inset和outset。其中none和hidden都是不显示border，二者的效果相同，只是运用在表格中是，hidden可以解决边框的冲突问题。

2.padding：用于控制content与border之间的距离，在浏览器中使用width或height属性指定了父块的宽或高，由于width和height的值中包含padding，那么content就会受到padding的挤压。（top、right、bottom、left）

3.margin：指的是元素与元素间的距离，用于控制块与块之间的距离。

（1）行内元素之间的margin = margin-right + margin-left

（2）块级元素之间的margin = 两者中较大者

（3）父子关系（一个div在另一个div内部）：子块的margin将以父块的content为参考

元素的定位

元素在网页中都必须有自己合理的位置，才能搭建出整个页面的结构。css定位的几种原理方法（position、float、z-index）

1.float定位：是css排版中非常的重要，属性float的值很简单，可以设置为left、right、none。当我们设置了向左向右浮动的时候，元素会向其父元素的左侧或右侧靠近。

2.position定位：指定块的位置，即块相对于父块的位置和相对于它自身应该在的位置，它的属性值有（static、absolute、relative、fixed）。

3.z-index属性：用于调整定位时重叠块的上下位置，与它的名称一样，想象页面为x-y轴，垂直于页面的方向为z轴，z-index值大的页面位于其值小的上方。它的属性值为整数，可以是负数也可以是正数。

CSS基础（三）——盒子模型相关推荐

CSS基础、盒子模型、选择器与权重
CSS基础.选择器与权重.盒子模型一.CSS的字体属性 CSS Fonts(字体)属性用于定义字体系列,例如大小.粗细.和文字样式(斜体之类). 1.字体 CSS使用font-family属性定义文 ...
【CSS基础】盒子模型、浮动布局、ps切图、定位及一些零碎知识点
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍CSS基础知识,包括盒子模型.浮动布局.PS切图.定位.元素的显示与隐藏和一些零碎知识点思维导图 ...
css基础，盒子模型，选择器与权重
1.css基础 1.1css简介 css(叠层样式表)是一种标记语言 1.1.1css语法规则选择器加声明 <style>/* 选择器{样式} *//* 给谁改样式{改什么样式} */p ...
CSS基础知识(盒子模型)
继承上一篇CSS的三大特性的优先级继续讲解. 1.1优先级优先级注意点: 权重是有4组数字组成的,但是不会有进位. 可以理解为类选择器永远大于元素选择器,id选择器永远大于类选择器以此类推. 等级判 ...
CSS基础(part12)--盒子模型之外边距
学习笔记,仅供参考,有错必纠参考自:某不知名网课文章目录盒子模型外边距属性设置块级盒子水平居中文字居中以及盒子居中插入图片和背景图片的区别清除元素的默认内外边距外边距合并(只存在垂 ...
CSS基础(part11)--盒子模型之内边距
学习笔记,仅供参考,有错必纠参考自:某不知名网课文章目录盒子模型内边距(padding) 属性设置内盒尺寸计算 padding什么时候不影响盒子大小盒子模型内边距(padding) pa ...
CSS基础(part10)--盒子模型之边框
学习笔记,仅供参考,有错必纠参考自:某不知名网课文章目录盒子模型盒子模型简介边框(border) 边框属性举个例子边框综合设置盒子边框写法总结表边框重叠设置盒子模型盒子模型简介 ...
CSS基础：盒子模型和浮动
盒子模型所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用 CSS盒模型本质上是一个盒子,封装HTML元素. 它包括:外边距(marg ...
CSS学习之盒子模型
1. 前言盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并不是盒子.这个很好理解,比如说,一张图片里并不能放东西,它自己就是自 ...
CSS 基础框盒模型介绍
当对一个文档进行布局(lay out)的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basic box model),将所有元素表示为一个个矩形的盒子(box).CSS 决定 ...

CSS基础（三）——盒子模型

CSS基础（三）——盒子模型相关推荐

最新文章

热门文章