盒子模型 - 简书

第一章

盒子模型概念

用来存放网页中的各种元素。
网页设计中内容，如文字、图片等元素，都是盒子（div嵌套）

image.png
宽高属性
宽度：width:长度值|百分比|auto
最大宽度：max-width：长度值|百分比|auto
最小宽度：min-width：长度值|百分比|auto

高度属性：
height：长度值|百分比|auto
最大高度：max-height：长度值|百分比|auto
最小高度：min-height：长度值|百分比|auto

    说明：块级元素和替换元素的内容可以设置宽度和高度。
  行内元素，无法设置宽和高，只能由元素内的内容撑开

1、  min-width/min-height属性值会对元素的宽高设置一个最小限制，元素如果设置宽高，可以比这个最小限制大，但不能比其小；

2、  当一个元素同时设置 max-height和min-height，max-height值小于min-height值，最大高度自动转换成最小高度的值，所以显示min-height值。

可设置宽高的元素：

块级元素：···<p>、<div>、<h1>~<h6>、<ul>等。
替换元素
浏览器根据其标签的元素与属性来判断显示的具体内容
<img>、<input>、<textarea>等。

image.png

边框属性

设置元素边框宽度
border-width：thin | medium | thick|长度值
注：thin：表示一个窄的边框，medium：表示一个中等边框，thick：表示一个厚的边框
设置元素边框颜色
border-color：颜色 | transparent
注：transparent：透明
设置元素边框样式
border-style：值
四个不同方面来表示（上、下、左、右）
表示：

border-[left | right | top | bottom]-width
2)border-[left | right | top | bottom]-color
3)border-[left | right | top | bottom]-style
例：p{boder-left-width：10px；border-left-color:green;border-left-style:solid;}
简写：
同一边框：border：宽度样式颜色
不同方面
border-top：宽度样式颜色
border-left：宽度样式颜色
border-right：宽度样式颜色
border-bottom：宽度样式颜色
```
     1、double定义双线边框
     2、dotted定义点状边框
     3、dashed定义虚线边框
     4、solid定义实线边框
```

padding属性

padding：

元素的内容与边框之间的距离（内边距或填充），分四个方向（上，右，下，左）

  1、padding-top：长度值 | 百分比
  2、padding-right：长度值 | 百分比
  3、padding-bottom：长度值 | 百分比
  4、padding-left：长度值 | 百分比

注：值不能是负值
盒子在网页中占的空间。不单单与width和height属性有关，还与padding有关
内边距属性缩写
1.padding：值1；
2.padding：值1 值2；（上下=值1，左右=值2）
3.padding：值1 值2 值3 （上=值1 左右=值2 下=值3）
4.padding：值1 值2 值3 值4（上=值1 右=值2 下=值3 左=值4）

第四章

display

image.png

display：inline｜block｜inline-block｜none

  1、inline，元素将显示为内联元素，元素前后没有换行符
  2、block，元素将显示为块级元素，元素前后将带有换行符
  3、内联（行内）元素之间的缝隙如何解决

1）标签之间不添加任何换行或空格
2）给它一个父元素，设置父元素的style：font-size:0px，并给子元素单独设置字体大小
行内元素中，padding可以显示，margin显示左右边距，上下边距不显示。
4、inline-block，行内块元素，元素呈现为inline，具有block相应特性
5、none，此元素不会被显示