web@css盒模型详解

Margin(外边距) - 清除边框外的区域，外边距是透明的。/*上右下左*/ 上左右下 /*上下左右*/ 四方 /
Border(边框) - 围绕在内边距和内容外的边框. 可以用来画图形
Padding(内边距) - 清除内容周围的区域，内边距是透明的。与content共用背景颜色
Content(内容) - 盒子的内容，显示文本和图像。

总结:
标签块级元素设置宽度和高度属性时，写内容的区域--你只是设置内容区域（content）的宽度和高度

总元素的最终宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的最终高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

转载于:https://www.cnblogs.com/3sss-ss-s/p/9787230.html

web@css盒模型详解相关推荐

CSS盒子模型详解(清除无序列表的项目符号)
CSS盒子模型详解(清除无序列表的项目符号) 网页的布局过程准备好相关的网页元素(盒子) 利用CSS设置好盒子的样式以及在网页中的摆放位置往盒子里面装东西盒子模型(box model) 网页中, ...
css弹性盒模型详解----flex-direction
本篇文章详细介绍flex-direction flex-direction 是控制盒模型容器下一级子元素的排列方式的属性一共有四种row(默认值):主轴为水平方向,起点在左端.row-reverse ...
06-CSS盒模型详解
本文最初发表于博客园,并在GitHub上持续更新.以下是正文. 盒子模型前言盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并 ...
css弹性盒模型详解----flex-wrap
本篇文章详细介绍flex-wrap flex-wrap是控制盒模型容器下一级子元素的在一行显示的时候是否换行nowrap(默认值):不换行wrap:自动换行wrap-reverse:换行,第一行在下方 ...
【网站制作视频教程】-第22讲 css盒子模型详解！-传智播客
传智播客( http://icd.itcast.cn/)是一家网页平面设计培训学院,专注于网页设计培训,平面设计培训,fash培训,ui设计培训. 网页设计视频教程下载地址:http://icd ...
从零开始学前端 - 7. CSS盒模型 margin和padding详解
作者: 她不美却常驻我心博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
CSS盒模型（详解）
目录前言一.什么是CSS盒模型二.标准模型+IE模型的区别 1.CSS如何设置两种盒模型 2.JS如何设置/获取盒模型对应宽高: 前言什么是css,css有几种,让我带你来了解一下一.什么是 ...
CSS属性vertical-align详解（CSS之五）
CSS属性vertical-align详解作用对象 vertical-align的意思是在垂直方向进行对齐.它主要对以下属性的元素有效 inline元素.inline-block元素和普通的文本. ...
Django MVT模型详解
MVT模型详解 ORM简介使用MySql数据库开发流程使用数据库生成模型类 Model 定义模型定义属性字段类型字段选项关系元选项示例演示测试数据类的属性管理器Manager ...
Socket模型详解
Socket模型详解两种I/O模式一.选择模型二.异步选择三.事件选择四.重叠I/O模型五.完成端口模型五种I/O模型的比较两种I/O模式 1. 两种I/O模式阻塞模式:执行I/O操 ...

web@css盒模型详解

web@css盒模型详解相关推荐

最新文章

热门文章