盒子模型与页面布局基础

盒子模型与页面布局基础

@jarringslee

盒子模型基础

盒子模型的重要组成部分：

• 内容区域 可用width和height调试

• 内边距 padding 设置内容与盒子边缘的距离，即撑大这个盒子

  盒子内容与边缘之间的部分，默认颜色与盒子内容相同

  padding:20px; 快捷键 p+回车

  可以单独设置四个方向的内边距

  padding-top / padding-bottom / padding-left / padding-fight

  快捷键：pd+方位首字母（pdt / pdb / pdl / pdr）

  padding多值写法 可以写1-4个值，用空格隔开

  取值个数	实例	含义
  一个值	padding:10px;	上下左右均为10px
  两个值	padding:10px 20px;	上下10px，左右20px
  三个值	padding:10px 20px 30px;	上10px，左右20px，下30px
  四个值	padding:10px 20px 30px 40px;	上10px，右20px，下30px，左40px

  多值写法赋值规律：从上边开始顺时针赋值。没有赋到的值默认和其对边相等。

• 边框线 border

  border:1px solid #000; 快捷键 bd+回车

  边框线粗细（主要单位为像素px） 边框线样式 边框线颜色 （用空格隔开，不分先后顺序）

  常用边框线样式：

  属性值	效果
  soild	实线
  dashed	虚线
  dotted	点线

  可以单独设置四个方向的边框线 和border写法完全一样

  border-top / border-bottom / border-left / border-fight

  快捷键：bd+方位首字母（bdt / bdb / bdl / bdr）

• 外边距 margin 出现在盒子外面 拉开两个盒子的距离

  margin:50px

  可以分方向单独写（没有快捷键） / 多值写法 方法和padding完全相同

盒子模型的尺寸计算：

默认情况：盒子尺寸 = 内容尺寸 + 边框线尺寸 + 内边距尺寸 （没有margin）

面积为三者之宽加和乘以三者之高加和

**注意：**上下、左右都要算上。

结论：border和padding都会撑大盒子的尺寸。

解决方法：

• 手动做减法：在width和height中去掉border和padding的尺寸；
• 内减模式：box-sizing:"border-box" 自动完成上条操作。

盒子模型及页面版型样式

版心居中

让盒子在页面上水平居中。

• margin：auto;

  原理：浏览器自动识别当前窗口宽度，减去盒子宽度除以二并分配给左右外边距。

  前提：盒子必须有宽度值。若没有宽度，默认宽度为窗口宽度。

清除默认样式

• 去掉内外间距

  一般使用通配符选择器，也可以用多标签选择器（各个标签之间用逗号隔开）

  *{margin:0;padding:0;box-sizing:border-box;
  }（也可以顺带加上内减模式）
  

• 去掉列表的项目符号

  li{list-style:none;
  }
  

内容溢出处理

overflow 控制溢出元素内容的显示方式

属性值：

• hidden 隐藏溢出内容
• scroll 溢出滚动（无论是否溢出都显示滚动条位置）
• auto 溢出滚动（只有溢出时才显示滚动条位置）

外边距问题（合并 / 塌陷）

合并现象：

垂直排列的兄弟元素，上下margin会合并，取较大值生效。

所以两个垂直排列的同级盒子给一个设置margin就可以了。

塌陷问题：

父子级的标签，子级添加外边距会产生塌陷问题：导致父级一起向下移动。坑爹。

解决方法：

• 如果父级标签中，在子级标签之前（上方）有文本，那么就不会发生此现象；
• 取消子级margin，设置父级padding（相同值即可）；
• 父级设置溢出处理overflow:hidden或者auto或者scroll任意属性;这个标签会命令浏览器检查父级元素的宽和高，这样会使浏览器发现问题并进行修正；
• 父级设置上方边框线boder-top：任意大小 任意样式 任意颜色;。

行内元素垂直内外边距

给行内元素添（如span）加内外边距margin和padding，只能改变元素水平位置，无法改变垂直位置。

解决方法：添加行高line-height来改变元素的垂直位置。

盒子模型-圆角

border-radius 把元素外边框改成圆角。

属性值：数字 ；单位：

• 像素px 值越大角越圆
• 百分比% 值越大角越圆（跨度较大）

**多值写法：**和padding相似，值用空格隔开。

多值写法赋值规律：从上边开始顺时针赋值。没有赋到的值默认和其对边相等。

常见应用：

1. 正圆形状

   • 前提条件：盒子本身是正方形（如果是长方形那就是正椭圆形）

   • 设圆角属性值为边长的一半或者50%

2. 胶囊形状

   • 给长方形的盒子设置属性值短边长的一半。

盒子模型-阴影

box-shadow

属性值：X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内阴影还是外阴影 各个属性值之间用空格隔开。

• 偏移量和半径单位都用像素px；
• 两个偏移量必须写，剩下的自便；
• 默认为外阴影，内阴影写inset。

页面布局

1. 多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
2. 先设置盒子大小，再设置盒子位置

网页布局基本格式

• top
• banner
• main
• footer

标准流（普通流）

标准流也叫文档流。指标签在页面中的默认排布规则，如，块元素独占一行，行内元素一行可以显示多个。

工作开发中，标准流往往满足不了开发需求，如我们想要一行显示多个块级元素。这时候，我们需要用到浮动或Flex来布局。

浮动

float 让块元素水平排列的属性（紧挨排列，不留缝隙）

属性值：left（左对齐） right（右对齐）

特点

• （特点1）浮动元素会一行内显示并且元素顶部对齐，存在多个子级浮动盒子时，若父级宽度不够，子级会自行换行
• （特点2）具备行内块显示模式特点
  • 如果块级盒子没设置宽度，默认和父级元素一样宽；添加浮动之后，默认由内容撑起宽度
• （特点3）弊端：浮动的盒子会脱标（脱离标准流的控制），不在占用标准流的位置。如果下面有标准流元素可能会重叠上来。
• **弊端：**如果某个父级元素的子级元素是浮动元素，若父级元素高度为0，也会脱标，下面的元素会重叠上来，影响布局效果。

消除浮动所带来的脱标弊端：

1. 额外标签法

   在父元素内容的最后添加一个空的块级元素（如div或p），设置CSS属性：clear:both / left / right （专门用来清除浮动的属性，分别是清除所有 / 左侧 / 右侧浮动的属性，直接用both就行）

           .clear{clear: both;}<div class="box1"><div class="dd">111</div><div class="dd">222</div><div class="clear"></div> </div>

2. 单伪元素法

   利用类选择器使用伪元素在父元素内容的最后添加一个空的块级元素。

   	 .clearfix:after{content:"";display:block;height: 0;clear:both;visibility: hidden;}				   .clearfix{	zoom: 1;}
   

3. 常用：双伪元素法

   在父元素中加上类选择器clearfix：既清除浮动影响也解决了塌陷问题。早期被用作图文混排。

   .clearfix::before,	/*before元素解决外边界塌陷问题 */
   .clearfix:after{content="";display:table;
   }				   
   .clearfix::after{	/*after元素清除浮动影响*/clear:both;
   }
   

4. overflow

   父元素添加css属性：overflow:hodden / auto / scroll

   添加overflow属性命令浏览器检查父级元素的尺寸。此时父级元素不会因为高为0而让浏览器误以为元素不存在而导致脱标。

   缺点：无法处理溢出问题。

块级父元素+浮动子元素

• 子元素若有间距：只需设置每个元素的右边距padding-right，然后用标签清楚最后一个子元素的右边距即可。

        .box2 li{（如果后面只用标签选择器.lastli来清除，权重不够）width: 296px;height: 285px;background-color: blue;float: left;margin-right: 14px;}.box2 .lastli{  （在前面加上父级元素的标签，凑齐权重）margin-right: 0;}
  

浮动注意事项：

• 一般用标准流父元素排列上下位置，内部用浮动子元素排列左右位置。
• 理论上一个兄弟元素浮动了，其余所有兄弟元素也要跟着浮动。
• 浮动的元素只会影响后面的标准流，不会影响前面的。