CSS盒子的概念

盒子模型

  1. 盒子的概念

页面中的每一个标签都可以看做是一个“盒子”,通过盒子的视角更方便的进行布局

浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,称之为“盒子”

  1. 盒子模型

CSS中规定每个盒子分别由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成,这就是盒子模型。

内容的宽度和高度

作用:利用width和height属性默认设置是盒子内容区域的大小

属性:width/height

常见取值:数字+px

CSS盒子的概念_第1张图片

边框(border)

属性名:border

属性值:单个取值的连写,取值之间以空格隔开

如  border:10px solid red

快捷键:bd+tab

边框(border)-单方向设置

场景:只给盒子的某个方向单独设置边框

属性名:border-方位名词(如border-left:粗细 线条样式 颜色---不分先后顺序;)

属性值:连写的取值

(了解)

作用

属性名

属性值

边框粗细

border-width

数字+px

边框样式

border-style

实线solid、虚线dashed。点线dotted

边框颜色

border-color

颜色取值

盒子尺寸:width/height + 边框线

CSS盒子的概念_第2张图片

内边距

padding可以当做复合属性使用,表示单独设置某个方向的内边距

padding最多取四个值

四值:上 右 下 左

三值:上 左右 下

两值:上下 左右

多值写法:永远都是从上开始顺时针转一周,如果数不够,看一半

CSS盒子的概念_第3张图片

外边距 用法同内边距

清除默认内外边距

浏览器会默认给部分标签设置默认的margin和padding,但一般在项目开始前需要先清除这些默认标签的margin和padding,后续自己设置。

*{

Margin:0;

Padding:0;

}

版心居中

版心:网页的有效内容

margin:0 auto;

外边距折叠现象—合并现象

场景:垂直布局块级元素上下的margin会合并

结果:最终两者距离为margin的最大值

解决方法:避免就好   给其中一个盒子设置margin即可

外边距折叠现象—塌陷现象

场景:互相嵌套块级元素,子元素的margin-top会作用在父元素上

结果:导致父元素一起往下移动

解决方法:

  1. 给父元素设置border-top或者padding-up(分隔父子元素的margin-top)
  2. 给父元素设置overflow:hidden
  3. 转换成行内元素
  4. 设置浮动

你可能感兴趣的:(css,html)