盒模型、内外边距和边框

盒模型：内容、内边距、边框、外边距

如图：

边框颜色：

border-color：blue || rgb(255,0,0) || #fff000 || transparent（透明，默认值不常用可不记）

边框厚度：

border-width：thin || medium || thick || 1em、2px、0.1%

（thin:细边框，medium：中等边框，thick：粗边框，*使用“border-width”属性需先设置：border-style）

边框厚度简写可为所有边框设置宽度，也可以单独的设置各边的边框宽度

例1：设置所有边框宽度

bord-width: medium；（所有边框厚度都是中等）

例2：设置4个边不同宽度

bord-width: thin medium thick 2px；（上边框：细，右边框：中等，下边框：粗，左边框：2px）

例3：设置3个框宽度

bord-width:thin medium thick；（上边框：细，右边框和左边框：中等，下边框：粗）

例2：设置4个边不同宽度

bord-width: thin medium;（上边框和下边框：细，右边框和左边框：中等）

边框样式：

border-style：none || hidden || dotted || dashed || solid || double || groove || ridge || inset || outset

（none：无边框，hidden：与“none”相同，用于表时用于解决边框冲突，dotted：点状边框，大多数浏览器呈现实线，dashed：虚线，大多数浏览器呈现实线，solid：实线，double：双线，groove：3D凹槽，ridge：3D垄状边框，inset：3Dinset边框，outset：3Doutset边框

*常用：none、dashed、solid ，其余可不记）

以下所有边框设置实例：

边框圆角：

border-radius：1px || 3em || 10%

例：

内边距：

padding：10px || 1em ||20% || auto

外边距：

margin：10px || 1em ||20% || auto

*以上属性都可指定一个边设置样式

盒模型、内外边距和边框相关推荐

【CSS】盒子模型案例 ( 盒子模型尺寸计算 | 盒子模型水平居中 | 盒子模型内外边距设置 | 背景图片及位置设置 | 盒子嵌套设置 )
文章目录一.实现效果二.基本 HTML 结构三.设置最外层盒子样式 ( 盒子模型内外边距设置 ) 四.设置标题盒子样式 ( 盒子模型尺寸计算 | 盒子模型水平居中 ) 五.设置列表盒子样式 ( ...
html盒子左右边框边距,CSS盒子模型、内外边距、边框、行高、背景
1.盒子模型所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margin)组成. ...
CSS3day(CSS三大特性，行高的继承，选择器的权重，盒子模型：外边距，边框，内边距)
文章目录 CSS三大特性:层叠性.继承性.优先级层叠性继承性行高的继承优先级优先级权重的叠加盒子模型: 边框(border) 表格的细线边框边框会影响盒子的实际大小内边距(paddin ...
继承性和层叠性权重盒模型 padding(内边距) border(边框) margin 标准文档流块级元素和行内元素...
内容总结: 1.继承性和层叠性继承性: 像一些文本的属性: color,text-*,line-*,font-* 这些属性是可以继承下来的2.层叠性就是权重 ,谁的权重大就显示谁的属性如何看权重:就 ...
div默认外边距是多少_CSS盒模型之内边距、边框、外边距十九问（持续更新）...
第一问:什么是盒模型? 第二问:两者的区别是什么? 第三问:怎么设置这两种模型呢? 第四问JS怎么获取和设置盒模型的宽高呢,你能想到几种方法第五问:描述一下下面盒子的大小,颜色什么的(content ...
记录--有关CSS盒模型之内边距、边框、外边距的十九问题
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助本篇文章主要探讨盒模型,以及内边距.边框.外边距的面试题与思考,也希望您能把您的思考和遇到的问题以评论的方式补充下,后期,我将会补充到文章 ...
CSS盒模型之内边距、边框、外边距十九问（持续更新）
第一问:什么是盒模型? 第二问:两者的区别是什么? 第三问:怎么设置这两种模型呢? 第四问JS怎么获取和设置盒模型的宽高呢,你能想到几种方法第五问:描述一下下面盒子的大小,颜色什么的(content ...
CSS 盒模型之外边距 margin属性
外边距会在元素外创建额外的空白区域,这个区域不能放置其他元素.因此,大多数情况下,普通流中都是通过外边距来控制元素之间的距离,使元素间出现间隔. 外边距默认是透明的,在这个区域中可以看到父元素的背景. ...
css --- [读书笔记] 盒模型(边框、内外边距)
说明源代码学习盒子模型(css重点) css学习三大重点: css盒子模型. 浮动. 定位目标: 能说出盒子模型由哪四部分组成: 内容.边框.内外边距能说出内边距的作用,设置不同数值分别代表 ...

盒模型、内外边距和边框

盒模型、内外边距和边框相关推荐

最新文章

热门文章