CSS 盒子模型-边框

目录

学习目标

学习内容

盒子模型

网页布局的本质

盒子模型(Box Model)的组成

边框 border

边框简写

边框分开写法

表格的细线边框

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


学习目标

  1. 能够准确阐述盒子模型的4个组成部分
  2. 能够利用边框复合写法给元素添加边框
  3. 能够计算盒子的实际大小
  4. 能够利用盒子模型布局模块案例
  5. 能够给盒子设置圆角边框
  6. 能够给盒子添加阴影
  7. 能够给文字添加阴影

学习内容

  • 盒子模型
  • PS 基本操作
  • 综合案例
  • 圆角边框
  • 盒子阴影
  • 文字阴影

盒子模型

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

学好盒子模型能够更好地帮助我们布局页面

网页布局的本质

  1. 先准备好相关的网页元素,网页元素基本都是盒子 Box
  2. 利用 CSS 设置好盒子样式,然后摆放到相应的位置
  3. 往盒子里装内容

网页布局的核心本质:利用 CSS 摆盒子

盒子模型(Box Model)的组成

盒子模型:就是把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器

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

盒子的组成:

  1. border 边框
  2. content 内容
  3. padding 内边距(控制边框与内容的距离)
  4. margin 外边距(设置不同盒子之间的距离)

边框 border

border 设置元素的边框

边框由三部分组成:边框的宽度(粗细)、边框样式、边框颜色

border: border-width || border-style || border-color;
属性作用
border-width边框粗细,单位是 px
border-style边框样式
border-color边框颜色
border-style
参数含义
none无边框,与任何指定的border-width值无关
hidden隐藏边框。IE不支持
dotted在MAC、Windows和UNIX平台上为点线,否则为实线
dashed在MAC、Windows和UNIX平台上为虚线,否则为实线
solid实线边框
double双线边框,两条单线与其间隔的和等于指定的border-width值
div {
    width: 300px;
    height: 300px;
    border-width: 5px;
    /* border-style 经常使用的取值有:实线solid 虚线dashed 点线dotted */
    border-style: solid;
    border-color: red; /*边框颜色默认为黑色*/
}

边框简写

div { 
    border: 5px solid red; /*没有固定顺序*/
}

边框分开写法

div {
    /* 边框分开设定 */
    border-top: 5px solid red;
    border-bottom: 10px dotted orange;
    border-left: 10px dashed purple;
    border-right: 5px solid darkblue;
}

实例:设置一个上边框为红色,其他边框为蓝色的盒子

div {
    width: 200px;
    height: 200px;
    border: 5px solid blue;
    /* 利用CSS的层叠性,相同元素设置样式后来居上 */
    /* 只层叠了上边框 */
    border-top: 5px solid red;
}

注:合理利用层叠性,可以简化代码

表格的细线边框

border-collapse 属性控制浏览器绘制表格边框的方式

控制相邻单元格的边框

div {
    border-collapse: collapse;
}
  • collapse 单词是合并的意思
  • border-collapse: collapse; 表示相邻边框合并在一起

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

div {
    width: 200px;
    height: 200px;
    background-color: black;
    border: 10px solid red;
}

边框会额外增加盒子的实际大小。

因此我们有两种方案解决这个问题:

  1. 测量盒子大小的时候,不量边框
  2. 如果测量的时候包含了边框,则需要 width / height 减去边框宽度
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值