border，padding，margin盒模型理解

　　安静的敲着键盘，已势不可挡的姿势逼近php，我想我是一个幸福的人，未来不可期，做好现在，偶尔写着自己能看懂的API,慢慢悠悠的回味一下前端基础知识。

本文盒模型理解。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>border,padding,margin盒模型理解</title><style>div{/*width: 50px;height: 50px;*//*background-color: red;*//*正常的情况下，我们给一个元素指定宽度和高度的时候，我们只是设置了内容区域的宽度和高度，像这个50*50的盒子*//*border: 25px solid black;padding: 25px;margin: 25px;*//*如果加上边框和内外边距，这个div的总宽度就会变成50 50（左右边框） 50（内边距） 50（外边距）*//*当你在根据psd文件写效果的时候，用ps量尺寸的情况下，你就要细心量取内容区域了，要100%逼近效果图*//*box-sizing: border-box;*//*width: 300px;height: 300px;*//*当然默认情况下一个盒子的box-sizing:content-box;,就是上述情况下盒子的总宽度是由宽度加上边框和内外边距。还有一种情况就是怪异盒模型，在css中加上box-sizing:border-box;这一种情况就是把盒子的大小固定，给到的width和height就是包含边框和内边距（无外边距），总宽度就要加上外面局*//*此时这个盒子的width是50（左右边距） 50（内边距） 200（内容区域），总宽度需要加上外边距的100.*//*我们可以总结默认情况下，width就是内容的宽度怪异合模型下，width包含border和padding加上内容宽度.*//*给定一个div，让我们来对其边框可以有以下操作：*//*border-style：none;*//*默认情况下，边框样式是无边框solid表示实线；dashed虚边框；dotted点线边框，ie6下存在兼容性问题；*//*border-width: 10px;*//*这是边框宽度*//*border-color: red;*//*这是给定边框颜色*//*对于单独设置一边或多边便不过多解释*//*border:5px solid red;*//*通常情况下我们简写边框样式*//*padding-top: 10px;padding-right: 20px;padding-bottom: 30px;padding-left: 40px;*//*这是对内边距的各个方向的设定（不多解释），直接用padding来书写会有一下几种格式*//*padding: 10px;padding: 5px 10px;padding: 5px 10px 15px;padding: 5px 10px 15px 20px;*//*margin同padding（写法一致）*//*1,对于兄弟关系的相对margin值，会相对叠加，比如水平排列的两个div，a的margin-right为50px和b的margin-left为100px;a和b的间距就是100px(取大值)。*//*2，对于父级来说，第一个子级的margin-top,会影响父级的布局，可以给父级加边框或者用padding-top代替；不建议用overflow:hidden;提示：对于第一个子级来说，避免用margin-top.*/}</style>
</head>
<body><div></div>
</body>
</html>

border，padding，margin盒模型理解相关推荐

微信小程序border padding margin
微信小程序border padding margin 1.padding 定义元素边框与元素内容之间的空间. 可能的值 auto: 浏览器计算外边距 length:规定以具体单位计的外边距值,比如像素 ...
懂点前端——对CSS中的Padding、Border、Margin属性的理解
作为一个志在AIot(实际在写上位机程序.嵌入式代码)的工程师,怎么又关心起前端来了呢?怎么说呢,前端的应用范围广啊,从高大上的算法.富有科技感的物联网应用到无处不在的Web应用,只要是需要和终端用户 ...
怪异盒模型/flex布局
传统盒模型(标准盒模型) 默认的都是标准盒模型;(border,padding,margin,content) box-sizing:content-box; 盒子的宽度/高度= width/heig ...
IE盒模型和标准盒模型的区别
在以前IE5.5以及更早的IE浏览用的不是标准盒模型,我们称之为IE盒模型. 先说重要的区别: 两者的区别在于content的不同, IE盒模型:width=content+border+paddin ...
【html】盒模型div，边框border，内边距padding，外边距margin
初识盒模型要想学习盒模型,首先要知道什么是盒模型.顾名思义,每个div标签都是一个矩形,像一个盒子,所以HTML页面布局可以理解为多个盒子嵌套排列而成. 盒模型的组成盒模型包括:content(内 ...
深入理解CSS盒模型 - 程序猿的程 - 博客园
深入理解CSS盒模型本文是学习中传思客在慕课网开的课程<前端跳槽面试必备技巧>的学习笔记.课程地址:https://coding.imooc.com/class/evaluation/1 ...
css--DIV+CSS布局、常用属性、盒模型、自定义字体、标签的分类及相互转换
目录一.DIV+CSS布局 1.1 布局时常用的属性 1.2 布局 - 上中下结构 1.3 布局 - 上中下 - 左右 1.4 圣杯布局和双飞翼布局二.字体属性 2.1 字体颜色 2.2 字体大 ...
面试总结（CSS 的盒模型？、CSS 中选择器的优先级以及 CSS 权重如何计算？、CSS 中哪些属性可继承，哪些不可以？、CSS 单位中 px、em 和 rem 的区别？、rem 适配....)
CSS 的盒模型? 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分第一种是 W3C 标准的盒子 ...
css设置input框长度_干货极致分享浅谈CSS属性，有趣的盒模型。网友：哎呦不错哦！...
盒模型的组成大家肯定都懂,由里向外content,padding,border,margin. 盒模型是有两种标准的,一个是标准模型,一个是IE模型. 从上面两图不难看出在标准模型中,盒模型的宽高只是 ...

border，padding，margin盒模型理解

border，padding，margin盒模型理解相关推荐

最新文章

热门文章