CSS2基础笔记（6） ---- CSS盒子模型2

一、CSS盒子模型1

8、盒子内边距（padding）

CSS属性名	功能	属性值
padding-top	上内边距	长度
padding-right	右内边距	长度
padding-bottom	下内边距	长度
padding-left	左内边距	长度
padding	复合属性	长度，可以设置 1 ~ 4 个值

padding复合属性的使用规则：

	1.padding: 10px; 四个方向内边距都是10px。
	2.padding: 10px 20px; 上10px ，左右20px。（上下、左右）
	3.padding: 10px 20px 30px; 上10px，左右20px，下30px。（上、左右、下）
	4.padding: 10px 20px 30px 40px; 上10px ，右20px，下30px，左40px。（上、右、下、左）

注意点：

	1.padding的值不能为负数。
	2.行内元素的左右内边距是没问题的，上下内边距不能完美的设置。
	3.块级元素、行内块元素，四个方向内边距都可以完美设置。

9、盒子边框（border）

CSS属性名	功能	属性值
border-style	边框线风格 复合了四个方向的边框风格	none：默认值 solid：实线 dashed：虚线 dotted：点线 double：双实线
border-width	边框线宽度 复合了四个方向的边框宽度	长度，默认3px
border-color	边框线颜色 复合了四个方向的边框颜色	颜色，默认黑色
border	复合属性	值没有顺序和数量要求
border-left border-left-style border-left-width border-left-color border-right border-right-style border-right-width border-right-color border-top border-top-style border-top-width border-top-color border-bottom border-bottom-style border-bottom-width border-bottom-color	分别设置各个方向的边框	值没有顺序和数量要求

10、盒子外边距（margin）

10.1盒子外边距

CSS属性名	功能	属性值
margin-left	左外边框	CSS中的长度值
margin-right	右外边框	CSS中的长度值
margin-top	上外边框	CSS中的长度值
margin-bottom	下外边框	CSS中的长度值
margin	复合属性，可以写1~4个值	CSS中的长度值

10.2margin塌陷问题

• 什么是margin塌陷？

  第一个子元素的上margin会作用在父元素上，最后一个子元素的下margin会作用在父元素上。

• 如何解决margin塌陷？

  方案1：给父元素设置不为0的padding 。
  方案2：给父元素设置宽度不为0的border 。
  方案3：给父元素设置css样式overflow:hidden
  

10.3margin合并问题

• 什么是margin合并？

  上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。

• 如何解决margin合并？

  无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了。

11、处理内容溢出

CSS属性名	功能	属性值
overflow	溢出内容的处理方式	visible：显示，默认值 hidden：隐藏 scroll：显示滚动条，不论内容是否溢出 auto：自动显示滚动条，内容不溢出不显示
overflow-x	水平方向溢出内容的处理方式	visible：显示，默认值 hidden：隐藏 scroll：显示滚动条，不论内容是否溢出 auto：自动显示滚动条，内容不溢出不显示
overflow-y	垂直方向溢出内容给的处理方式	visible：显示，默认值 hidden：隐藏 scroll：显示滚动条，不论内容是否溢出 auto：自动显示滚动条，内容不溢出不显示

注意：

overflow-x、 overflow-y不能一个是hidden，一个是visible。
overflow常用的值是hidden和auto，除了能处理溢出的显示方式，还可以解决很多疑难杂症。

12、隐藏元素的方式

• 方式1：visibility属性

  visibility属性默认值是show，如果设置为hidden，元素会隐藏。
  元素看不见了，还占有原来的位置（元素的大小依然保持）。

• 方式2：display属性

  设置display:none，就可以让元素隐藏。
  彻底地隐藏，不但看不见，也不占用任何位置，没有大小宽高。

13、样式的继承

有些样式会继承，元素如果本身设置了某个样式，就使用本身设置的样式；但如果本身没有设置某个样式，会从父元素开始一级一级继承（优先继承离得近的祖先元素）。

• 会继承的CSS属性

   字体属性、文本属性（除了vertical-align）、文字颜色等。
  

• 不会继承的CSS属性

   边框、背景、内边距、外边距、宽高、溢出方式等。
  

14、默认样式

• 元素一般默认的样式，例如：

   1.<a>元素：下划线、字体颜色、鼠标小手。
   2.<h1> ~ <h6>元素： 文字加粗、文字大小、上下外边距。
   3.<p>元素：上下外边距
   4.<ul>、ol 元素：左内边距
   5.body 元素：8px 外边距（4个方向）
  

15、布局小技巧

1. 行内元素、行内块元素，可以被父元素当做文本处理。

   可以像处理文本对齐一样，去处理：行内、行内块在父元素中的对齐。
   例如：text-align、line-height、text-indent等。

2. 如何让子元素，在父元素中水平居中。

   • 若子元素为块元素，给父元素加上：margin:0 auto; 。
   • 若子元素为行内元素、行内块元素，给父元素加上：text-align:center 。

3. 如何让子元素，在父元素中垂直居中。

   • 若子元素为块元素，给子元素加上:margin-top，值为：(父元素content－子元素盒子总高)/2。
   • 若子元素为行内元素、行内块元素，让父元素的height = line-height，每个子元素都加上：vertical-align:middle; 。

16、元素之间的空白问题

• 产生的原因：

  行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。

• 解决方案：

  1.方案1：去掉换行和空格（不推荐）。
  2.方案2：给父元素设置font-size:0，再给需要显示文字的元素，单独设置字体大小(推荐)。

17、行内块的幽灵空白问题

• 产生的原因：

  行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。

• 解决方案：

  1.方案1：给行行内块设置vertical，值不为baseline即可，设置为middel、bottom、top均可。
  2.方案2：若父元素中只有一张图片，设置图片为display:block 。
  3.方案3：给父元素设置font-size:0。如果该行内块内部还有文本，则需单独设置font-size。