前端学习_css笔记（3）盒子模型

前端学习_css笔记（3）

盒子模型（Box Model）

• 盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。
• 盒子里面的文字和图片等元素是 内容区域
• 盒子的厚度称为盒子的边框
• 盒子内容与边框的距离是内边距padding
• 盒子与盒子之间的距离是外边距margin

1. 盒子边框（border）

• 语法：

border : border-width || border-style || border-color 

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式 none（无边框） solid （单实线） dashed （虚线）dotted（点线）
border-color	边框颜色

边框综合设置 如：

 border: 1px solid red;  没有顺序  

盒子边框写法总结表

上边框	下边框	左边框	右边框
border-top-style:样式;	border-bottom-style:样式;	border-left-style:样式;	border-right-style:样式;
border-top-width:宽度;	border- bottom-width:宽度;	border-left-width:宽度;	border-right-width:宽度;
border-top-color:颜色;	border- bottom-color:颜色;	border-left-color:颜色;	border-right-color:颜色;
border-top:宽度 样式 颜色;	border-bottom:宽度 样式 颜色;	border-left:宽度 样式 颜色;	border-right:宽度 样式 颜色;

特：表格的细线边框（table）

• 通过表格的cellspacing="0",将单元格与单元格之间的距离设置为0，

• 但是两个单元格之间的边框会出现重叠，从而使边框变粗

• 通过css属性：

  table{ border-collapse:collapse; }  
  

  • border-collapse:collapse; 相邻边框合并一起。collapse 合并之意

2. 内边距（padding）

简写：padding-left padding-right padding-top padding-bottom

值的个数	表达意思
1个值	padding：上下左右内边距;
2个值	padding: 上下内边距 左右内边距 ；
3个值	padding：上内边距 左右内边距 下内边距；
4个值	padding: 上内边距 右内边距 下内边距 左内边距 ；

注意：padding不影响盒子大小情况

如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。

3. 外边距（margin）

简写：margin-left margin-right margin-top margin-bottom

margin值的简写跟 padding 相同。

4.块级盒子水平居中

• 可以让一个块级盒子实现水平居中必须：
  • 盒子必须指定了宽度（width）左右的外边距都设置为auto，

实际工作中常用这种方式进行网页布局，示例代码如下：

.header{ width:960px; margin:0 auto;}

文字居中和盒子居中区别:

1. 盒子内的文字水平居中是 text-align: center, 而且还可以让 行内元素和行内块居中对齐
2. 块级盒子水平居中 左右margin 改为 auto

清除元素的默认内外边距(重)

为了更灵活方便地控制网页中的元素，制作网页时，我们需要将元素的默认内外边距清除

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

注意：

• 行内元素为了照顾兼容性， 尽量只设置左右内外边距， 不要设置上下内外边距。

5.外边距合并

(1). 相邻块元素垂直外边距的合并

• 当上下相邻的两个块元素相遇 他们之间的垂直间距不是margin-bottom与margin-top之和，取两个值中的较大者 称：外边距塌陷。

  ​注：尽量给只给一个盒子添加margin值。

(2). 嵌套块元素垂直外边距的合并（塌陷）

• 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
• 父元素的上外边距会与子元素的上外边距发生合并
• 合并后的外边距为两者中的较大者

6.圆角边框

• 语法：

border-radius:length;  

• 其中每一个值可以为 数值或百分比的形式。

• 技巧： 让一个正方形 变成圆圈

  border-radius: 50%;
  

7. 盒子阴影

box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；

• 前两个属性是必须写的。其余的可以省略。
• 外阴影 (outset) 是默认的 但是不能写 想要内阴影可以写 inset

div {
/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */
	box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);		
}

8.浮动(float)

选择器 { float: 属性值; }

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

浮动——特性 float属性会改变元素display属性。

任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 生成的块级框和行内块极其相似，可以水平放置块级元素。

注意：

​ 浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐

​ 如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟盒子也应该浮动。防止引起问题

清除浮动

**清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

选择器{clear:属性值;}   left right both 

实际工作中 几乎只用 clear: both;同时清除左右两边浮动的影响

清除浮动还有多种方法可以使用，后面再详细说明

9.定位

1）边偏移

简单说， 我们定位的盒子，是通过边偏移来移动位置的。

边偏移属性	示例	描述
top	top: 80px	顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom	bottom: 80px	底部偏移量，定义元素相对于其父元素下边线的距离。
left	left: 80px	左侧偏移量，定义元素相对于其父元素左边线的距离。
right	right: 80px	右侧偏移量，定义元素相对于其父元素右边线的距离

2） 定位模式 (position)（子绝父相）

在 CSS 中，通过 position属性定义元素的定位模式，语法如下：

选择器 { position: 属性值; }

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

1.相对定位的特点：

• 相对于 自己原来在标准流中位置来移动的

• 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

  ​

2.绝对定位的特点：

• 绝对是以带有定位的父级元素来移动位置 ，如果父级都没有定位，则以浏览器文档为准移动位置
• 不保留原来的位置，完全是脱标的 不占位置 可以在其他元素上方。

子绝父相：父级要占有位置，子级要任意摆放，这就是子绝父相的由来。

3.固定定位(fixed)

固定定位是绝对定位的一种特殊形式： 钉死在屏幕固定位置不随滚动条移动

1. 完全脱标 —— 完全不占位置；
2. 只认 浏览器可视窗口 + 边偏移属性 来设置元素的位置；

• 跟父元素没有任何关系；单独使用的
• 不随滚动条滚动。