复习日记 Day1 9.12 盒子模型

盒子模型

所有的元素都是盒子，设置盒子矩形元素的大小和位置完成布局

 

content，padding，border决定盒子大小，margin决定盒子位置

边框/border

至少设置三个属性

border-width：宽度

border-color：颜色

border-style：样式/solid（实线）/

边框大小影响盒子大小

内边距/padding

padding-top/left/bottom/right

内边距影响盒子大小，元素的背景颜色会撑满盒子，包括内边距，可以通过设置子元素100%撑满父元素再设置颜色解决

外边距/margin

margin-top/left/bottom/right

margin-top：上外边距，设置正值元素向下移动

margin-left：左外边距，设置正值元素想右移动

margin-bottom/right：移动下边或者右边的元素

margin可以设置负值，元素向相反的方向移动

外边距不会影响盒子大小，影响盒子位置，影响盒子实际占据网页大小

盒子水平布局

元素水平方向布局：

元素在其父元素中水平方向的位置由以下几个属性共同决定

margin-left+border-left+padding-left+width+padding-left+border-right+margin-right

一个元素在其父元素中水平布局必须满足以下等式

margin-left+border-left+padding-left+width+padding-left+border-right+margin-right=父元素内容区宽度（必须满足）

auto

在不满足时，若没有属性设置auto，浏览器会自动调整margin-right属性使其结果满足等式

若有设置auto值得属性，将调整带有auto的属性来满足等式

width的值默认为auto

将width设置一个固定的值，左右外边距设置为auto，实现元素水平居中

盒子垂直方向布局

子元素是在父元素的内容区中排列的，如果子元素的额大小超过了父元素，则子元素会从父元素溢出，使用overflow属性设置父元素处理溢出的子元素

overflow

可选值：visible：默认值，子元素仍会溢出

hidden 溢出内容会被隐藏，不会显示

scroll 生成两个滚动条，通过滚动条查看内容

auto 根据需要生成滚动条，那个方向需要就在那个方向生成

垂直外边距折叠

两个要素：相邻的垂直方向外边距会发生重叠现象（相邻和重叠）

兄弟元素

兄弟元素之间的相邻垂直外边距会取两者之间的较大值（两者都为正值），如果有一方负值，取相加的值，两者都为负值，取绝对值较大的，兄弟元素外边距重叠对于开发有利，不需要处理

父子元素

父子元素之间的相邻外边距，子元素的会传递给父元素（上外边距），会影响布局，需要进行处理，可以让其外边距不相邻，或者不适用外边距

1.使用父元素padding属性将子元素挤下去

2.将父元素设置边框，让父子元素外边框不重叠

注意：两种方式都会使父元素的大小被改变，需要计算减去

块级元素/ 行内元素

行内元素

行内元素不支持设置宽高，内容区的大小是由内容本身撑起来的

行内元素可以设置padding，margin，border，垂直方向不会影响页面布局

display：none 空，不显示

inline 行内元素

block 块元素

inline-block 行内块

visibility：visible 正常显示

hidden 隐藏元素，但是在页面中正常占据位置

默认样式

清楚默认样式

*{margin：0，padding：0}

引入默认样式清除CSS样式文件

盒子大小的设置

box-sizing：用来设置计算盒子尺寸的计算方式，可选值：

content-box：默认值，宽度和高度用来设置内容区的大小

border-box：宽度和高度用来设置整个盒子可见框的大小