CSS盒子模型的border：一设上去是4个，也是上右下左规则

再来谈下边

有人问，前面设置了border,后面又设置了border，怎么办？

写在后面的覆盖前面

1.这就是border-width，一设上去就是4个

后面的优先级比前面高，虽然前面1个像素，但是后面10个像素覆盖了前面

2.然后border的颜色，一设上去也是4个

上下蓝左右红也是可以

span是个inline元素，宽高对他是无效的，我们在这里可以调整为块状元素

然后宽高才有效

3.线的风格border-style，有4种风格
border-style:dotted solid double dashed; 

点状虚点

dashed是虚线

总结：一个border就有3个方面我们要考虑：宽有多宽颜色线的风格

更狠一点的，一次性设3个，3*4，就是设置了12个样式

看下面图片，12个全部设了

然后实战一下，这家伙为什么居中，记住颜色就很容易看出来

是左右都有padding，中间是内容，我们记住颜色，就很容易分析了

CSS盒子模型的border：一设上去是4个，也是上右下左规则相关推荐

CSS 盒子模型（border、padding、margin)
CSS盒子模型 Css盒子模型本质上是一个盒子,封装周围的html元素,他包括边框.内容.外边距.内边距. 1.边框边框(border)可以设置元素的边框,他由三部分组成:边框宽度(粗细).边框样式 ...
CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
html盒模型中border的写法,HTML+css盒子模型案例(圆，半圆等)“border-radius” 简单易上手...
很多小伙伴在前端学习的时候,发现盒子模型默认为正方形.如何把盒子变成想要的模型呢? 首先我们来看一下默认的情况---- .box{ width: 100px; height: 100px; backg ...
CSS盒子模型之CSS3可伸缩框属性（Flexible Box）
CSS盒子模型(下) 一．CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...
[HTML/CSS]盒子模型，块级元素和行内元素
目录概述盒子模型块级元素行内元素可变元素总结概述在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...
CSS 盒子模型（Box model）中的 padding 与 margin
编辑自 http://www.x6x8.com/IT/199.HTML 本文将讲述 HTML 和 CSS 的关键-盒子模型 (Box model) .理解 Box model 的关键便是 margin ...
html 盒子模型添加图片,[HTML/CSS]盒子模型，块级元素和行内元素
目录概述在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项目中,曾经也弄过从前端布局,也吃过这方面的亏.今天, ...
CSS学习（第三天）（层叠性、继承性、优先级，CSS 盒子模型）
紧接第二天 CSS学习第三天 5 CSS的三大特性 5.1 层叠性 5.2 继承性 5.2.1 行高的继承 5.3 优先级 5.3.1 优先级(注意) 5.3.2 优先级(权重叠加) 6 CSS 盒子 ...
CSS盒子模型/PS基操/圆角边框/盒子阴影/文字阴影/案例
CSS 03 1. 盒子模型 1.1 看透网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 Box . 利用 CSS 设置好盒子样式,然后摆放到相应位置. 往盒子里面装内容 ...

CSS盒子模型的border：一设上去是4个，也是上右下左规则

CSS盒子模型的border：一设上去是4个，也是上右下左规则相关推荐

最新文章

热门文章