前端-CSS高级操作 盒子模型

15/100发布文章 博文管理我的博客退出 Trash Temp java高级特性-集合框架（一） java高级特性-集合框架（一） java高级特性-集合框架（一） Java高级特性-实用类 Java面向对象三大特性之一 多态 抽象和接口 集合框架（二） 前端-CSS高级操作 盒子模型 数组 循环结构 循环结构 循环结构 循环结构 循环结构 异常(exception) 添加摘要 ## 理解盒子模型-布局
它是抽象于现实生活中的盒子，将网页中的所有元素看作是一个个的盒子，那么再调整网页中国的这些元素布局时，就可以通过调整盒子的信息来进行。

**盒子模型的组成：**盒子内容给+盒子的内边距（盒子内容到边框的填充）+盒子边框+盒子外边距

盒子模型的使用

边框：

border-style 边框样式

border-style：solid  ：实线边框
border-style：dotted：点线边框
border-style：dashed：虚线边框
border-style：double：双实线边框

border-color 边框颜色：

border-color: green;
border-color: #008000;
border-color: rgb(255,0,0);

border-边框粗细

border-width ：1px 

上方的样式直接设置多个值可以表示不同的方向

/* 所有的 */
/*border-color: red;*/
/* 上下  左右 */
/*border-color: red green;*/
/* 上 左右 下 */
border-color: red green yellow;
/* 顺时针：上右下左 */
/*border-color: red  green  black  pink;*/

上方的边框样式，还可以和我们的CSS方向关键词结合，用于对不同方向的边框进行样式设置。

例如：

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style
• ……

另外CSS还给提供了同意的边框设置方式：

/* 可以同时设置颜色、粗细、样式 */
border: 1px solid red;

上方的样式设置如果和方向关键词结合，还可以对某个方向的所有边框样式进行设置。

例如：

• border-top：1px solid red；
• border-bottom：xxx；

内边距

padding(填充)：他可以调整边框到元素内容的距离

• padding-top
• padding-right
• padding-bottom
• padding-left
• padding：它可以统一设置不同方向的距离：

/*padding: 50px;*/
/* 上下  左右 */
/*padding: 50px  20px;*/
/* 上   左右   下 */
/*padding: 10px  20px  30px;*/
/* 上右下左 */
padding: 10px  20px  30px  40px;片

外边距

margin：设置元素的外边距，也就是和其他元素之间的距离

• margin-top
• margin-right
• margin-bottom
• margin-left

盒子尺寸：
box-sizing：设置盒子模型尺寸计算规则的。

• content-box(默认值) ：计算盒子尺寸时，只计算盒子元素内容，不包括内边距和边框。
• border-box：计算盒子尺寸时，不止计算盒子元素内容，还包括内边距和边框。(大小一共就那么大，所以到时候会调整元素内容的空间)

标准文档流调整-display

默认情况下，再标准文档中，元素是分为两大类的。

• 块元素：独占一行，拥有完整的盒子模型设置
• 行内/内联元素：如果有多个内联，会排在一行，且盒子模型不完整。它的大小要由内容撑开。
  实际上之所以出现这种效果，就是因为display属性，块元素默认为block，而内联元素默认为inline。
  如果想将块元素和内联元素进行转换，可以通过此属性。
  display：
• none 隐藏
• block 快远远的默认值
• inline 内联元素的默认值
• inline-block 行内块元素 (但是有不可控的间隙)

浮动的使用

float：能够实现块元素在一行并列布局展示。none 默认值
left 左浮动
right 右浮动

解决浮动引起的父级边框塌陷问题

当浮动出现后，会导致：
兄弟元素受到浮动影响，导致显示错乱
可以通过clear清除浮动，解除浮动影响。
如果都浮动了，父级元素会产生边框塌陷
利用添加空子元素解决
在父级元素最后添加一个子元素，然后将其清除两侧浮动。
和上方一致的思路(推荐)：因为上方还需要添加一个空子元素 麻烦

/* 表示在元素最后面设置信息 */
.father:after{
    /* 给标签添加内容 */
    content: "";
    display: block;
    clear: both;
}

设置父级高度(不推荐)
利用overflow(溢出)特性
当overflow设置的标签没有设置高度时，会自动跟随溢出元素进行高度适应。

定位的是使用

position：定位
static 默认的
relative 相对的
设置它，会保留原有的位置，然后通过方向调整可以定位位置，但是它的定位偏移是相对于原来的位
absolute 绝对的
设置它之后，原有位置会消除，但是它默认会保留在原有位置上方，它后面的元素会向上偏移。
使用方向调整，默认情况下会相对于浏览器边框进行偏移，
当然如果它的某一级父元素设置过定位，则会相对于父级元素偏移。
往往它会结合着relative使用
fixed 固定的