web前端-------css盒子模型

1.css盒子组成

css最重要的是盒子模型，盒子组成一切
盒子构成：

• 内容区（content）
• 内边距（padding）
• 边框（border）
• 外边距（margin）
  

2.盒子内容区简单设置

首先可以直接设置各个区域

.box{
width:70px;
padding:5px;
margin:10px;
}

注意：这里的width和height设置的大小是内容区的大小，不是整个盒子的大小。内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。外边距可以是负值，而且在很多情况下都要使用负值的外边距。

（当width和height为默认时，即auto，这时内边距不会影响可见框的大小，而是会自动修改width和height，以适应内边距，即一变大一变小，父元素内容区未指定数据也是默认被内容撑开的）
介绍一个创建div的快捷方式（div.box$*10:创建10个div，类名从box1到box10）

3.边框border

为一个元素设置边框必须指定三个样式（至少有样式才能看到边框，因为大部分浏览器会为颜色和宽度备有默认值，而边框样式默认值是none，即无）：

• border-width：边框的宽度；
• border-color：边框的颜色；
• border-style：边框的样式；

分别指定四个边不同样式：例如：border-width:10px 20px 30px 40px
顺序为：（顺时针）上 右 下 左
当只写三个参数时：上 左右 下
只写两个参数时：上下 左右
也可使用：border-xxx-width: 30px; (其他什么颜色风格都一样，内边距外边距是一样道理)。例子：border-left-width:40px;设置左边框宽度。
xxx值有：top ; right ; bottom ; left

其他示例：border-xxx-style：double；
常用样式：

• none 默认值没有边框
• double 双实线
• dotted 点状边框
• dashed 虚线
• solid 实线
  border-xxx-color：red；

简写模式：border: red solid 30px;三个元素无顺序区分，都可以，不会有影响。但是border不能分别指定四个边，只能同时指定四个边。
所以还可以使用：border-xxx:red solid 30px;仅仅指定一条边；
但只设置三条边时，为了简单还可以----先用border设置所有边，然后取消掉一条边的样式。
border:red solid 30px;
border-right:none;

4.内边距padding

盒子内容区与盒子边框之间的距离叫内边距；
四个方向内边距设置：

• padding-top
• padding-right
• padding-bottom
• padding-left

盒子可见框的宽度=width + padding-left + padding-right + border-left-width + border-right-width；可见框高度同理；

5.外边距margin

外边距是指当前盒子与其他盒子之间的距离，它不会影响可见框的大小，但是会影响当前盒子的位置。
盒子有四个方向的外边距：

• margin-top
• margin-right
• margin-bottom
• margin-left
  因为页面上的元素都是靠左靠上摆放的，所以指定上和左边距时会导致自身盒子位置改变，而设置下和右边距时，会改变其他盒子位置改变。
  外边距可以设置为负值，设置为负值就会往相反方向移动。
  margin值可以设置为auto，一般只为水平方向设置auto，因为水平方向auto表示为最大值，垂直方向auto就是0；
  例如：margin-left:auto;就是移动到最右边（如果左右都是设置auto，则是在父元素里水平居中）。margin:auto;居中。margin-top:auto;无效果；

属性margin可同时设置四个方向的值：margin:20px 30px 40px 10px;与border一样。

注意：两相邻盒子垂直外边距之间会重叠，比如一个处于上面的盒子下边距为100px，下面盒子的上边距为100px，那么他们的距离为100px，而不是200px；兄弟元素的相邻外边距只会取最大值不会求和。（要点：相邻，垂直方向外边距）
如果父子元素的垂直外边距相邻了，那么子元素的外边距会设置给父元素。
解决方法 ：

• 就是在该父子元素间加一个子元素，让他们垂直外边距不相邻。使用空的div没有用，使用空的table可以隔离父子元素的外边距，阻止外边距的重叠。（但会添加无用元素，最好可以使用css伪类添加，正好diaplay可以设置类似table的块级元素）

.p1:before{
content="";
display=table;//将一个元素设置为表格显示；而且空表格还不会占用空间
}

• 或者为父元素设置个边框或内边距，这样它们的垂直外边距就不会重合了，再或者就不使用外边距。

6.内联元素的盒子模型

内容区：内联元素无法设置width和height。

内边距：可以设置水平与垂直方向内边距，但是垂直内边距设置后不会影响页面布局。只会覆盖其他盒子。

边框：可以设置边框，但垂直方向同样不能影响布局，水平会。

外边距：水平方向上可以正常设置，但是与相邻元素不是重叠而是求和。内联元素不支持垂直方向外边距设置。

7.将内联元素变成块元素display

display可以改变元素的类型（主要就是内联元素和块级元素）；
display:block;
常见可选值：

• inline：将一个元素作为内联元素显示；
• block：将一个元素作为块元素显示；
• inline-block：将一个元素设置为行内块元素显示，其可以使元素既有块元素特点又有内联元素特点，可以设置宽高，又不会独占一行。img标签其实就是行内块元素。
• none：不显示元素，并且元素不会继续在页面中占有位置。
  隐藏效果的类似属性——visibility：可以用来设置元素的隐藏和显示的状态
  可选值：visible：默认值，元素默认在页面中显示。
  hidden：元素会被隐藏（使用visibility:hidden;隐藏的元素虽然消失了，但是会保留原有的位置）

8.overflow

子元素默认是存在于父元素的内容区中，理论上子元素最大应该和父元素一样大。但子元素大小超出父元素的内容区时，超出的内容会在父元素以外的位置显示。超出父元素的内容称为溢出的内容。即父元素默认将溢出内容显示在外面。
而overflow就可以设置父元素如何处理溢出的元素，
可选值：

• visible：默认值，不会对溢出元素做处理，溢出元素会在父元素外显示；
• hidden：溢出的内容会被修剪，不会被显示；
• scroll：会为父元素添加滚动条，通过滚动条可以查看完整内容。但是它不好用，因为无论溢出与否和溢出方向，都会为父元素添加水平和垂直的滚动条
• auto：会根据需求添加滚动条；不溢出不添加，水平溢出就添加水平方向滚动条，垂直方向溢出就添加垂直方向滚动条。