css盒子模型（边框）

2024-05-10 02:49:30

一、.盒子模型（Box Model）组成

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

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

二、边框（border）

（1）有默认值，默认颜色是黑色

（2）可以写多个颜色，以空格隔开

格式：
border:颜色，大小，样式;
border-top:颜色，大小，样式;
border-right:颜色，大小，样式;
border-bottom:颜色，大小，样式;
border-left:颜色，大小，样式;

注意： solid 实线
dashed 虚线
dotted 点状虚线
double 双线

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

边框会额外增加盒子的实际大小，因此我们有两种方案解决：

测试盒子大小的时候，不量边框
如果测量的时候包含了边框，则需要 width/height 减去边框宽度

四、内边框（padding）

格式: padding-top：xxpx; 上内边距
padding-right：xxpx; 右内边距
padding-bottom：xxpx; 下内边距
padding-left：xxpx; 左内边距

五、外边框（margin）

格式：

margin：xxpx; 外边距指的是当前盒子和其他盒子之间的距离
margin-top ：xxpx; 上外边距盒子正值向下移动，负值向上移动
margin-right：xxpx; 右外边距默认情况，设置margin-right是没有效果
margin-bottom：xxpx; 下外边距盒子自己不动，挤下面的盒子移动，正值向下，负值向上
margin-left：xxpx; 左外边距盒子正值向右移动，负值向左移动

css盒子模型（边框）相关推荐

CSS盒子模型总结（小练习网易新闻列表和京东导航条）
css盒子模型边框(border) 边框的宽度 border-width 边框的颜色 border-color 边框的样式 border-style border-width 默认值为3px 可以用 ...
CSS盒子模型/PS基操/圆角边框/盒子阴影/文字阴影/案例
CSS 03 1. 盒子模型 1.1 看透网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 Box . 利用 CSS 设置好盒子样式,然后摆放到相应位置. 往盒子里面装内容 ...
CSS盒子模型、圆角边框、盒子/文字阴影
目录 CSS盒子模型网页布局过程: 盒子模型(Box Model)组成边框(border) 表格的细线边框边框会影响盒子实际大小内边距(padding) padding应用-新浪导航编辑 ...
10 CSS盒子模型+圆角边框+盒子阴影+文字阴影
1. 盒子模型 1.1 看透网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 Box . 利用 CSS 设置好盒子样式,然后摆放到相应位置. 往盒子里面装内容. 网页布局的 ...
CSS 盒子模型、边框
CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的H ...
html盒子左右边框边距,CSS盒子模型、内外边距、边框、行高、背景
1.盒子模型所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margin)组成. ...
CSS之布局（盒子模型—边框）
盒子模型-边框: <!DOCTYPE html> <html><head><meta charset="UTF-8"><tit ...
CSS盒子模型之CSS3可伸缩框属性（Flexible Box）
CSS盒子模型(下) 一．CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...
Web开发（一）·期末不挂之第五章·CSS盒子模型(盒子模型各属性行级元素和块级元素导航栏的实现)
CSS盒子模型一.盒子模型二. 块级元素与行级元素✪✪✪ 块级元素行内元素转化三.导航栏的实现一.盒子模型盒子是页面内容的容器,通过盒子的堆叠.嵌套能实现网页布局各属性: 大小(wid ...

最新文章

热门文章