盒子模型(一):初识盒模型 、 边框 [第四天]

文章目录

  • css盒模型
  • css边框
    • border-style
    • border-width
    • border-color
    • border

css盒模型

所有HTML元素可以看作盒子,在CSS中," box model "这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距(margin),边框(border),填充(padding)、实际内容(content)

盒模型允许我们在 其它元素和周围元素 边框之间的空间 放置元素

下面的图片说明了盒子模型(Box Model):
盒子模型(一):初识盒模型 、 边框 [第四天]_第1张图片
不同部分的说明:

  • Margin(外边距) —— 清除边框外的区域,外边距是透明的
  • Border(边框) —— 围绕在内边距和内容外的边框
  • Padding(内边距/填充) —— 清除内容周围的区域,内边距是透明的
  • Content(内容) —— 盒子的内容,显示文本和图像

注意:
当您指定一个 CSS 元素的宽度和高度属性时,你只是设置内容区域的宽度和高度,要知道,完整大小的元素,你还必须添加内边距,边框和边距。

元素的总宽度计算公式是这样的:

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度计算公式是这样的:

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

css边框

CSS边框属性允许你指定一个元素边框的样式和颜色

border-style

border-style属性设置一个元素的四个边框的样式,此属性可以有一到四个值。

实例

border-style:dotted solid double dashed;

  • 上边框是点状
  • 右边框是实线
  • 下边框是双线
  • 左边框是虚线

border-style:dotted solid double;

  • 上边框是点状
  • 右边框和左边框是实线
  • 下边框是双线

border-style:dotted solid;

  • 上边框和下边框是点状
  • 右边框和左边框是实线

border-style:dotted;

  • 所有4个边框都是点状

既然border有四边,那么其自然就可以分开设置,分别为:

  • border-bottom-style
  • border-left-style
  • border-right-style
  • border-top-style

注意

其它可以设置4个值的(eg:border、border-color、margin…),都是该规律,后面将不再重复!

盒子模型(一):初识盒模型 、 边框 [第四天]_第2张图片
值对应的效果:(这里使用浅色更容易看出后面几个的区别,而且得把边框调宽)
盒子模型(一):初识盒模型 、 边框 [第四天]_第3张图片
还有关于border的一点干货,见:

重学前端 概括元素和属性 / 大小写不敏感 / 详解标题标签 [em和px、源css(font-weight)] / 详解分割线hr标签 / 初见border / 详解auto(第二天)

border-width

border-width属性设置一个元素的四个边框的宽度
盒子模型(一):初识盒模型 、 边框 [第四天]_第4张图片
注意

经菜鸟测试(goole、Firefox):thin=1px、thick=5px、medium=3px

注意

CSS 没有定义 3 个关键字的具体宽度,所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px,而另一个用户则分别设置为 3px、2px 和 1px。
(菜鸟不清楚其它浏览器是不是这样,望有其它浏览器的读者试试,并留言,菜鸟会积极收录!!!)

默认为什么是3px?
详情见:
重学前端 概括元素和属性 / 大小写不敏感 / 详解标题标签 [em和px、源css(font-weight)] / 详解分割线hr标签 / 初见border / 详解auto(第二天)

border-color

border-color属性设置一个元素的四个边框颜色

注意

请始终把 border-style 属性声明到 border-color 属性之前,元素必须在您改变其颜色之前获得边框


一般border-style、border-width、border-color 前后关系错误,也没什么问题,但还是按照标准比较好,最先写border-style,后面两个随意!

盒子模型(一):初识盒模型 、 边框 [第四天]_第5张图片
color取值见:
详解文本格式(Text)[第二天]

注意

这里transparent,并不是默认边框颜色为transparent,默认边框颜色是黑色!(这里写一个默认,菜鸟也不明白为什么)


transparent是全透明黑色(black)的速记法,即一个类似rgba(0,0,0,0)这样的值。

border

缩写边框属性设置在一个声明中所有的边框属性。可以设置的属性分别(按顺序):border-width、border-style 和 border-color。

注意

上述属性值缺少一个没有关系,但千万不要缺boeder-style,不然就默认为none(没有边框),设置其他的也没有意义!

你可能感兴趣的:(重学前端2,css,css,css盒模型,详解css边框,经验分享)