CSS样式 - 盒子

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

概述：

1.内边距、边框和外边距都是可选的，默认值是零；

2.margin 和 padding 设置为零来覆盖所有浏览器样式，解决浏览器兼容性 ;

* { margin: 0; padding: 0; }

3. 在 CSS 中，width 和 height 指的是内容区域的宽度和高度 ;

4. 增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸 ;

.box {

width: 70px;

margin: 10px;

padding: 5px 5px;

}

5. padding : 内边距，也有称为填充

6. border : 边框 ;

7. margin : 外边距，也有称为空白或空白边

CSS margin 属性

1.CSS margin

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”;

2.margin 属性接受任何长度单位、百分数值甚至负值。

<div></div> 最常用标签，div涉及样式，不添加样式没有效果
其实margin有四个值 (auto是自适应) padding格式也一样
margin: 上右下左
margin: 垂直水平
margin: 全部
margin可以为负值，而padding不可以
再次强调，在样式里的注释是/**/

CSS padding 属性

1.CSS padding 属性定义元素的内边距（边框和内容区之间）;

2.padding 属性接受长度值或百分比值，但不允许使用负值。

单边内边距属性（分别设置上、右、下、左内边距）<例：h,p,div标签>

3.css边框概括

三方面：宽度、样式，以及颜色

border

border-style

border-width

border-color

border-bottom

border-left

border-right

border-top

border: 1px solid red;

边框会有很多属性
border-width:2px;
border-color:red;
border-style:solid;
企业上也直接写全简写形式
border:1px solid red;

点状边框
.dotted{width:300px;height:100px; dotted red;}

定义虚线
.dashed{width:300px;height:100px;border:10px; dashed gray;}
<h2>定义虚线 dashed</h2>
<div class="dashed"></div>

定义实线
.solid{width:300px;height:100px;}
<h2>定义实线</h2>

4.外边距的合并

当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者

很重要的内容，面试题喜欢出
两个盒子的垂直外边距相遇时，边距取较大者

margin为负值可以做展开隐藏部分

CSS样式（三） - div盒子相关推荐

CSS样式中选择器+盒子模型+定位+浮动
CSS样式中选择器+盒子模型+定位+浮动一.选择器选择器,选择你所需要修饰的HTML元素 1.通配符选择器 <!DOCTYPE html> <html><head&g ...
CSS入门三、盒子模型
零.文章目录 CSS入门三.盒子模型 1.网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 Box . 利用 CSS 设置好盒子样式,然后摆放到相应位置. 往盒子里面装内容 ...
HTML引入CSS样式三种方法及优先级
HTML引入CSS样式三种方法及优先级 CSS样式的写法 HTML引入CSS样式三种方法及优先级: 方法 css的样式引用由3种方式.分别为行内样式.内部样式(嵌入式)和外部样式: 行内样式: ...
css样式三种引入方式选择器常用属性：背景属性字体属性边框属性内间距外间距盒子模型
一.CSS简介 1.什么是css 重叠样式表主要是负责标签的样式美化页面一个网页分三大部分结构层: 主要由html负责负责页面的结构表现层: 主要由css负责页面的展示样式美化页面行 ...
CSS入门三（盒子模型）
文章目录前言一.盒子模型是什么? 二.盒子模型的总宽度与总高度三.盒子模型的属性 1.边框属性 (1)边框样式 (2)边框宽度 (3)边框颜色 (4)边框综合属性 (5)圆角属性 (6)图片边框 ...
html--div+css样式布局(div+span)
目录简述盒模型: 布局相关属性简述 div是块级元素 (占用一整行) span是内联元素(占用内容的长度,也可以转换成块级元素) DIV和SPAN存在的意义就是为了应用css样式 <!DO ...
html如何有立体效果,一段CSS代码让div盒子有立体效果
先上效果图,再来代码: 上图是对一个336*280px大小的矩形进行了调整,给它增加了一个投影的效果,就好像它立了起来,有种立体的感觉,怎么做到的呢?其实也就是一段CSS的功夫.先确定下html结构, ...
（转）css怎么一个DIV盒子同时插多张张背景图片
在使用多个背景图时,首先把background-image属性的值用逗号隔开,列出需要用的图像:然后用background-repeat定义重复属性:最后用background-position定义每 ...
CSS样式：DIV四中圆形，左右两侧凹陷下去
效果如图: CSS代码: <!DOCTYPE html> <html><head><meta charset="UTF-8">< ...
html盒子在始终在左侧,div盒子在一行方法(左中右结构 CSS布局)
div盒子在一行的css布局方法默认情况下div盒子是独占一行的,设置css宽度依然div盒子也独占一行,那么如何使用css让div盒子在一行呢? div排成一排方法有二,第一种采用css floa ...

CSS样式（三） - div盒子