前端基础学习笔记盒模型

太过爱你忘了你带给我的痛 2022-04-14 03:29 286阅读 0赞

# 边框线border #

**border 边框：元素边框的样式**

**单样式:**

*  border-width 大小
 *  border-style 样式
 *  border-color 颜色

复合样式:大小 类型 颜色

*  border :width style color

边框类型 ： border-style

*  solid 实线
 *  dashed 虚线 （有兼容问题）
 *  dotted 点线 （有兼容问题）
 *  double 双边框

边框类型：

*  border-top 左边框
 *  border-right 右边框
 *  border-bottom 下边框
 *  border-left 左边框

去除边框: border:none ;  
=>padding会改变盒子大小

# color颜色:的多种值 #

十六进制 （ \#00ff99 ）  
rgb（ 0-255,0-255,0-255 ） -三个值 r-red红 g-green绿 b-blue蓝  
rgba( 0-255,0-255,0-25,0-1 ) 四个值 r-red红 g-green绿 b-blue蓝 a-透明度

# margin  外边距 #

单样式:

*  margin-top :顶部外距离
 *  margin-right :右边外距离
 *  margin-bottom :底部外距离
 *  margin-left :左边外距离

复合样式：

*  四个值： margin :上 右 下 左
 *  三个值： margin :上 左右 下
 *  二个值： margin :上下 左右
 *  一个值： margin : 四个方向相同的值；
 *  盒子水平居中：  
    margin:  auto || margin:top  auto || margin:top  auto bottom

# padding 内边距 #

单样式:

*  padding-top :顶部内距离
 *  padding-right :右边内距离
 *  padding-bottom :底部内距离
 *  padding-left :左边内距离

复合样式：

*  四个值： padding :上 右 下 左
 *  三个值： padding :上 左右 下
 *  二个值： padding :上下 左右
 *  一个值： padding : 四个方向相同的值；

=>padding会改变盒子大小

# 盒子模型计算公式 #

**盒子宽度 = 左border+左padding+width+右padding +右border**

**盒子高度 = 上border+上padding+height+下padding+下border**

发表评论取消回复

表情：

评论列表（有 0 条评论，286人围观）

还没有评论，来说两句吧...

相关阅读

相关【前端】CSS3盒模型

CSS3盒模型 CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

忘是亡心i/ 2023年10月09日 10:36/ 0 赞/ 43 阅读

相关 CSS 学习笔记 - 盒模型

CSS学习笔记 - 盒模型外边距margin 内边距padding 背景background 背景图background-image

柔光的暖阳◎/ 2022年12月03日 13:14/ 0 赞/ 161 阅读

相关 CSS基础（四）：盒模型

CSS盒模型 HTML文档中可以将每个元素都看作是长方形的盒子。而CSS盒模型规定了元素框处理元素内容content、内边距padding、边框border和外边距margi

迈不过友情╰/ 2022年05月24日 08:57/ 0 赞/ 179 阅读

相关前端基础学习笔记鼠标样式cursor与盒阴影box-shadow

鼠标样式属性 div{ cursor:default; } 如上代码可设置鼠标划入div盒子时的鼠标样式，鼠标样式有以下属性值：

逃离我推掉我的手/ 2022年04月21日 14:04/ 0 赞/ 324 阅读

相关前端基础学习笔记浮动清除浮动怪异盒模型

文档流文档流为元素没有改变特性时原本所要排列的位置和规则：文档流为最底层块级独占一行等在最底层排列，依次往下排列。给上浮动之后，会把元素堆积起来，不占

本是古典何须时尚/ 2022年04月16日 05:43/ 0 赞/ 224 阅读

相关前端基础学习笔记盒模型

边框线border border 边框：元素边框的样式单样式: border-width 大小 border-style 样式 border-co

太过爱你忘了你带给我的痛/ 2022年04月14日 03:29/ 0 赞/ 287 阅读

相关前端基础学习笔记弹性盒子模型

基本弹性盒模型演示 div{ display:flex; width:600px; border:1px soli

た入场券/ 2022年04月08日 12:14/ 0 赞/ 270 阅读

相关前端面试之盒模型

什么是盒子模型当你对一个文档进行布局(laying out)时候, 浏览器引擎会根据CSS-Box模型将所有元素描述为一个盒子, CSS会决定这些盒子的大小, 位置,

我会带着你远行/ 2022年03月16日 12:21/ 0 赞/ 287 阅读

相关 HTML基础—5盒模型

1.盒模型 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV

ゝ一纸荒年。/ 2022年01月12日 08:19/ 0 赞/ 248 阅读

相关盒模型学习（一）

盒模型概念： html文档中的每个元素(element)和文本都会被转换为一个矩形盒，而html文档中元素树(tree of elements)最终在浏览器中是以树状结构

柔情只为你懂/ 2021年11月02日 05:31/ 0 赞/ 363 阅读