三、CSS 速览—— CSS 盒模型的了解

1. CSS盒模型

宽 [width: px %]
高 [height:px %]

• 如果盒子不设置宽度，会默认撑满父盒子的宽度
• 如果盒子不设置高度，会默认被内容撑高

<style> p { width:100%; height:100% } </style>

内边距 [padding: px]

• 作用：设置宽高到边框的间距
• 特点：不能加载内容，但是可以加载背景
• padding-top, right, bottom, left

<style> p { padding: 1px 2px; } </style>

padding: 1px 2px	作用方向
1px, 2px	左右内边距为1，上下内边距为2
1px, 2px, 3px	左右为1，上下为2，然后下为3
1px, 2px, 3px 4px	左右为1，上下为2，然后下为3，左为4

边框 [border]

border-style值	效果
solid	实线
dashed	虚线
dotted	点线
double	双线
groove	边框凹陷
ridge	边框凸显
inset	内容凹陷
outset	内容突出

<style> p { 
    border: 10px solid red;
    border-width: 1px 2px 3px 4px;
    border-style: solid dashed dotted double;
    border-color: red blue green white;
} </style>

外边距 [margin: px]

<style> p { margin: 1px 2px; } </style>

margin: 1px 2px	作用方向
1px, 2px	左右外 边距为1，上下内边距为2
1px, 2px, 3px	左右为1，上下为2，然后下为3
1px, 2px, 3px 4px	左右为1，上下为2，然后下为3，左为4

2. 盒模型扩展

1. 清除默认样式

   <style> /*清除默认样式*/
       body, div, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, th, td, input {
           margin: 0;
           padding: 0;
       }
       h1, h2, h3, h4, h5, h6 {
           font-weight: normal;
           font-size: 100%;
       }
       ul, ol {
           list-style: none;
       }
   </style>
   

2. 设置默认样式

    <style> /*设置默认样式*/
        body {
            color: #333;
            font-size: 14px;
            font-family: '微软雅黑', 'Arial';
        }
        a {
            text-decoration: none;
            color: #333;
        }
    </style>
   

3. height属性
   如果盒子没有设置高度，则被内容撑高，如果设置了高度，不会被隐藏，会自动超出盒子内容显示；高度超出部分也可设置overflow属性。

   • overflow：visible默认超出显示
   • overflow：hidden 超出高度部分隐藏
   • overflow：scroll 添加滚动样式
   • overflow：auto 自动添加滚动样式

4. 居中(文本、盒子居中)

水平居中：text-align: center;
垂直居中：单行文本line-height值为盒子高度；多行文本设置相同的上下padding

盒子水平居中：设置margin: 1px auto;
盒子垂直居中：父盒子不设置高度，设置上下padding。

注意：实际开发中，使用定位设置居中，很少使用padding。

1. margin塌陷现象

• 垂直方向上，兄弟盒子间的margin为两者margin大的为准。
• 父子盒子，子盒子设置margin-top，父盒子没设置或margin-top值小于子盒子的，此时会塌陷，以大的为准。

解决塌陷：

• 兄弟盒子统一设置一个方向的margin，如都设置margin-bottom
• 父子盒子可以给父盒子加border或padding，不建议用

3. 元素类型

从HTML的角度将元素分为：容件级、文本级
从CSS的角度将元素分为：块级元素、行内级元素、行内块元素

块级元素：可以设置宽度、高度，独占一行。如div p h1 ul ol dl
行内元素：文字并排显示，不能设置盒子的宽度和高度。如span a b u i
行内块元素: 盒子可以并排显示，能设置盒子宽高。如input img table

4. display显示模式

display: none;
display: block; 标签以块级元素加载
display: inline; 并排显示
display: inline-blocked; 以行内块元素加载