CSS的盒子模型

img

CSS的盒子模型

1.盒子模型

页面布局的三大核心:盒子模型、浮动、定位

1.1 看透网页布局的本质

网页布局的过程

  1. 先准备好想管的网页素材网页元素基本上都是BOX
  2. 利用CSS设置好盒子样式,摆放到相应位置
  3. 往盒子内装内容

核心:设置盒子的CSS的样式

1.2 盒子模型 (box model) 组成

CSS盒子模型本质是一个盒子,封装周围的HTML元素,包括:边框、外边距、内边距、实际内容

image-20220606104315480

image-20220606104355128

border 边框 蓝色区域

content 内容 橙色区域

padding 内边距 黄色区域

margin 外边距 绿色区域

1. 边框(border)

边框有三部分组成

border: border-width | border-style | border-color

border-width 边框粗细,一般用px做单位

border-style 边框样式,设置边框虚线、实线之类的参数(none,solid实线、dashed 虚线等、dotted 点线)

border-color 边框颜色

边框的符合写法

border: width style color 没有先后顺序,通常按照以上写法写

PS:

border: 1px solid red

4条边框可以分开写

border-top   #上边框
border-bottom#下边框
border-right#右边框
border-left    #左边框
表格的细线边框

border-collapse 属性控制浏览器绘制表格表格边框的方式,他控制相邻单元格的边框。

border-collapse:collapse;
# 合并相邻边框

1.3.1 边框会影响盒子实际大小

  1. 测量的时候不带边框
  2. 测量的时候测量边框,按照实际大小

2. 盒子内边距(padding)

padding 设置内边距,即边框与内容之间的距离

padding-top   #上内边距
padding-bottom#下内边距
padding-right#右内边距
padding-left    #左内边距
值的个数 表达意思
padding:5px; 一个值,上下左右都是5像素内边距
padding:5px 10px; 两个值,上下边距都是5像素,左右内边距是10像素
padding:5px 10px 20px; 三个值,上内边距5px,下内边距20px,左右内边距10px
padding:5px 10px 20px 30px; 四个值,上5像素、右10px,下20px,左30px,顺时针

如果盒子已经有大小,再增加内边距会撑大盒子

解决方法:width/height减去内边距

如果未指定width/heightpadding不会撑开盒子

3. 外边距(Margin)

margin 设置外边距,即边框与边框之间的距离

margin-top   #上内边距
margin-bottom#下内边距
margin-right#右内边距
margin-left    #左内边距

margin的简写方式和padding完全一致

1.3 块级盒子水平居中

外边距可以让块级盒子水平居中,但是必须满足2个条件

  1. 盒子必须指定了宽度
  2. 盒子左右的外边距都设置为auto

    .header {
        width:960px;
        margin:0 auto;
    }

行内元素、行内块元素无法使用。想对齐,需要使用text-align: center;

1.4 外边距合并

使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。

image-20220606155410447

嵌套盒子——外边距塌陷问题

对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。

无法避免

解决方案

  1. 父元素指定边框
  2. 父元素定义上内边距
  3. 父元素添加 overflow:hidden

还有其他方法,例如 浮动固定绝对定位

1.4 清除盒子的内外边距

网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。

因此在布局前,首先要清除下网页元素的内外边距。

* {
    padding:0; /* 清除内边距 */
    margin:0;/* 清除外边距 */
}
​
/* CSS的第一行代码 */

注意∶行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。

但是转换为块级和行内块元素就可以了

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
主机教程建站技术教程

免费申请一年期限的AlphaSSL泛域名证书

2020-10-28 16:36:00

学习笔记

CSS浮动

2022-6-8 10:14:58

搜索
蜀ICP备2020035005号-1