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

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

1、定义

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


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


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


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




不同部分的说明:

1.gif


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;
}
相关文章
|
21天前
|
前端开发 JavaScript UED
只会用插件可不行,这些前端动画技术同样值得收藏-CSS篇
只会用插件可不行,这些前端动画技术同样值得收藏-CSS篇
20 0
|
21天前
|
前端开发 JavaScript 编译器
如何在CSS中写变量?一文带你了解前端样式利器
如何在CSS中写变量?一文带你了解前端样式利器
22 0
|
21天前
|
前端开发
前端 CSS 经典:模拟 material 文本框
前端 CSS 经典:模拟 material 文本框
12 0
|
21天前
|
前端开发
前端 CSS 经典:图层放大的 hover 效果
前端 CSS 经典:图层放大的 hover 效果
13 0
|
21天前
|
前端开发
前端 CSS 经典:保持元素宽高比
前端 CSS 经典:保持元素宽高比
17 0
|
21天前
|
前端开发
前端 CSS 经典:鼠标位置信息
前端 CSS 经典:鼠标位置信息
14 0
|
21天前
|
前端开发 JavaScript
前端 CSS 经典:文字描边
前端 CSS 经典:文字描边
11 0
|
26天前
|
前端开发 JavaScript 数据库
如何实现前后端分离-----前端笔记
如何实现前后端分离-----前端笔记
|
26天前
|
前端开发 安全 NoSQL
技术笔记:Security前端页面配置
技术笔记:Security前端页面配置
|
1月前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
37 2