0
点赞
收藏
分享

微信扫一扫

10、前端开发:CSS知识总结——盒子模型(Box Model)(1)


1、定义

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

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

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

下面的图片说明了盒子模型(Box Model):

10、前端开发:CSS知识总结——盒子模型(Box Model)(1)_html

不同部分的说明:

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

 盒子模型的大小=内容区(content)+边框(border)+内边距(padding)

2、用法 

border-width 边框宽度,默认是3px;

border-style 边框样式 

        可选值:none  默认值

                      solid  实线

                      dashed  虚线

                      dotted   点状虚线

                      double 双实线

border-color  边框颜色

注意:以上三个属性从上开始顺时针设置四边颜色,以空格隔开。

上面三个属性有个简写:border:大小  样式  颜色 ;

例:border:10px solid black;

border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形,当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

注意: 每个半径的四个值的顺序是:左上角,右上角,右下角,左下角。如果省略左下角,右上角是相同的。如果省略右下角,左上角是相同的。如果省略右上角,左上角是相同的。 

例:border-radius: 15px;

3、box-sizing 属性

box-sizing 属性定义如何计算一个元素的总宽度和总高度,主要设置是否需要加上内边距(padding)和边框等。

例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这样就可以让浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。

默认情况下,元素的宽度(width) 和高度(height)计算方式如下:


width(宽度) + padding(内边距) + border(边框) = 元素实际宽度 height(高度) + padding(内边距) + border(边框) = 元素实际高度


语法:box-sizing: content-box|border-box|inherit;


说明

content-box

默认值。如果你设置一个元素的宽为 100px,那么这个元素的内容区会有 100px 宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

border-box

告诉浏览器:你想要设置的边框和内边距的值是包含在 width 内的。也就是说,如果你将一个元素的 width 设为 100px,那么这 100px 会包含它的 border 和 padding,内容区的实际宽度是 width 减 去(border + padding) 的值。大多数情况下,这使得我们更容易地设定一个元素的宽高。

注:border-box 不包含 margin。

inherit

指定 box-sizing 属性的值,应该从父元素继承

示例:

div {
box-sizing: border-box;
width: 50%;
border: 5px solid red;
float: left;
}

举报

相关推荐

0 条评论