CSS布局-企业开发技巧总结（4）盒子模型与浮动/清除浮动

注意点:
1.这三个属性的取值是按照顺时针来赋值, 也就是按照上右下左来赋值, 而不是按照日常生活中的上下左右
2.这三个属性的取值省略时的规律
2.1上右下左 > 上右下 > 左边的取值和右边的一样
2.2上右下左 > 上右 > 左边的取值和右边的一样下边的取值和上边一样
2.3上右下左 > 上 > 右下左边取值和上边一样

3.非连写(方向+要素)

border-left-width: 20px;
border-left-style: double;
border-left-color: pink;

内边距属性

1.什么是内边距?

边框和内容之间的距离就是内边距

2.格式

2.1非连写
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;

2.2连写
padding: 上右下左;

这三个属性的取值省略时的规律
2.1上右下左 > 上右下 > 左边的取值和右边的一样
2.2上右下左 > 上右 > 左边的取值和右边的一样下边的取值和上边一样
2.3上右下左 > 上 > 右下左边取值和上边一样

注意点:

1.给标签设置内边距之后, 标签占有的宽度和高度会发生变化
2.给标签设置内边距之后, 内边距也会有背景颜色（内边距是内容的一部分）

外边距属性

1.什么是外边距?

标签和标签之间的距离就是外边距

2.格式

2.1非连写
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;

2.2连写
margin: 上右下左;

2.这三个属性的取值省略时的规律
2.1上右下左 > 上右下 > 左边的取值和右边的一样
2.2上右下左 > 上右 > 左边的取值和右边的一样下边的取值和上边一样
2.3上右下左 > 上 > 右下左边取值和上边一样

注意点:
外边距的那一部分是没有背景颜色的（属于两个区域之间的距离，不属于内容的一部分）

外边距合并现象

在默认布局的垂直方向上, 默认情况下外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的

CSS盒子模型

1.什么是CSS盒子模型?

CSS盒子模型仅仅是一个形象的比喻, HTML中所有的标签都是盒子

结论

1.在HTML中所有的标签都可以设置
宽度/高度 == 指定可以存放内容的区域
内边距 == 填充物
边框 == 手机盒子自己
外边距 == 盒子和盒子之间的间隙

盒子模型宽度和高度

内容的宽度和高度
就是通过width/height属性设置的宽度和高度

2.元素的宽度和高度

宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
高度同理可证

3.元素空间的宽度和高度

宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
高度同理可证

/*判断是否是元素宽高为200的盒子
只需要看边框 + 内边距 + 内容宽度/内容高度时候等于200即可*/

/*判断是否是元素空间宽高为300的盒子
只需要看外边距+边框+内边距+内容宽度/内容高度*/

/*现有如下盒子模型, 要求增加padding属性为25之后仍然保持元素宽高为200

        元素宽高 = 边框 + 内边距 + 内容宽高
                 = 0 + 0 + 200 = 200
                 = 0 + 25 + 25 + 200 = 250
                 = 0 + 25 + 25 + 150 = 200
         规律:
         1.增加了padding之后元素的宽高也会发生变化
         2.如果增加了padding之后还想保持元素的宽高, 那么就必须减去内容的宽高
        */
        .box9{
            width: 150px;
            height: 150px;
            padding: 25px;
            background-color: red;
        }
        /*现有如下盒子模型, 要求增加border属性为20之后仍然保持元素宽高为200
        元素宽高 = 边框 + 内边距 + 内容宽高
                 = 0 + 0 + 200 = 200
                 = 0 + 20 + 20 + 200 = 240
                 = 0 + 20 + 20 + 160 = 200
          规律:
         1.增加了border之后元素的宽高也会发生变化
         2.如果增加了border之后还想保持元素的宽高, 那么就必须减去内容的宽高
        */

盒子box-sizing属性

   1.CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变
2.box-sizing属性是如何保证增加padding和border之后, 盒子元素的宽度和高度不变
和我们前面学习的原理一样, 增加padding和border之后要想保证盒子元素的宽高不变, 那么就必须减去一部分内容的宽度和高度
3.box-sizing取值
3.1 content-box
   元素的宽高 = 边框 + 内边距 + 内容宽高
3.2 border-box
    元素的宽高 = width/height的宽高

注意点:

1.如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来
2.如果外面的盒子不想被一起定下来,那么可以给外面的盒子添加一个边框属性
3.在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin
margin本质上是用于控制兄弟关系之间的间隙的

1.在嵌套关系的盒子中, 我们可以利用margin: 0 auto;的方式来让里面的盒子在外面的盒子中水平居中
2.margin: 0 auto; 只对水平方向有效, 对垂直方向无效

盒子居中和内容居中/清空默认边距

1.text-align:center;和margin:0 auto;区别
text-align: center;

作用
设置盒子中存储的文字/图片水平居中

margin:0 auto;

作用
让盒子自己水平居中

1.为什么要清空默认边距(外边距和内边距)

在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等, 所以在企业开发中, 编写代码之前第一件事情就是清空默认的边距

2.如何清空默认的边距

格式
*{
margin: 0;
padding: 0;
}

3.注意点

通配符选择器会找到(遍历)当前界面中所有的标签, 所以性能不好
企业开发中可以从这个网址中拷贝
http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css

清空默认边距

1.什么是行高?

在CSS中所有的行都有自己的行高

注意点:
行高和盒子高不是同一个概念
行高指的是每行内容的高度
盒子高指的是元素的高度

规律:

1.文字在行高中默认是垂直居中的

2.在企业开发中我们经常将盒子的高度和行高设置为一样, 那么这样就可以保证一行文字在盒子的高度中是垂直居中的
简而言之就是: 要想一行文字在盒子中垂直居中, 那么只需要设置这行文字的"行高等于盒子的高"即可

3.在企业开发中如果一个盒子中有多行文字, 那么我们就不能使用设置行高等于盒子高来实现让文字垂直居中, 只能通过设置padding来让文字居中

清空默认边距

注意点:

1.在企业开发中, 如果一个盒子中存储的是文字, 那么一般情况下我们会以盒子左边的内边距为基准, 不会以右边的内边距为基准, 因为这个右边的内边距有误差

2.右边内边距的误差从何而来? 因为右边如果放不下一个文字, 那么文字就会换行显示, 所以文字和内边距之间的距离就有了误差

3.顶部的内边距并不是边框到文字顶部的距离, 而是边框到行高顶部的距离

网页的布局方式

1.什么是网页的布局方式?

网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的

1.标准流(文档流/普通流)排版方式

1.1其实浏览器默认的排版方式就是标准流的排版方式
1.2在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素
1.3 在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版
垂直排版, 如果元素是块级元素, 那么就会垂直排版
水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版

2.浮动流排版方式

2.1浮动流是一种"半脱离标准流"的排版方式
2.2浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐

注意点:

1.浮动流中没有居中对齐, 也就是没有center这个取值
2.在浮动流中是不可以使用margin: 0 auto;

特点:

1.在浮动流中是不区分块级元素/行内元素/行内块级元素的
无论是级元素/行内元素/行内块级元素都可以水平排版
2.在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高
3.综上所述, 浮动流中的元素和标准流中的行内块级元素很像

3.定位流排版方式

浮动元素的脱标

1.什么是浮动元素的脱标?

脱标: 脱离标准流
当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标

2.浮动元素脱标之后会有什么影响?

如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素

浮动元素排序规则

1.浮动元素排序规则

1.1 相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面
1.2 不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动
1.3 浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定

2.浮动元素贴靠现象

什么是浮动元素贴靠现象?
   1.如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示
   2.如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠
   3.如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边

3.浮动元素字围现象

1.什么是浮动元素字围现象?
浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象

注意

1.企业开发中什么时候使用标准流什么时候使用浮动流?
垂直方向使用标准流, 水平方向使用浮动流

2.拿到一个很复杂的界面如何入手?
2.1从上至下布局
2.2从外向内布局
2.3水平方向可以先划分为一左一右再对左边或者右边进行进一步布局

浮动元素高度问题

1.在标准流中内容的高度可以撑起父元素的高度
2.在浮动流中浮动的元素是不可以撑起父元素的高度的，导致子元素很大，父元素很扁

清除浮动方式一

1.清除浮动的第一种方式
给前面一个父元素设置高度

注意点:
在企业开发中, 我们能不写高度就不写高度, 所以这种方式用得很少

清除浮动方式二

1.清除浮动的第二种方式
给后面的盒子添加clear属性

clear属性取值:
none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)
left: 不要找前面的左浮动元素
right: 不要找前面的右浮动元素
both: 不要找前面的左浮动元素和右浮动元素

注意点:
当我们给某个元素添加clear属性之后, 那么这个属性的margin属性就会失效

清除浮动方式三

1.清除浮动的第三种方式
隔墙法

2.外墙法
2.1 在两个盒子中间添加一个额外的块级元素
2.2 给这个额外添加的块级元素设置clear: both;属性

注意点:
外墙法它可以让第二个盒子使用margin-top属性
外墙法不可以让第一个盒子使用margin-bottom属性

3.内墙法
3.1在第一个盒子中所有子元素最后添加一个额外的块级元素
3.2给这个额外添加的块级元素设置clear: both;属性

注意点:
内墙法它可以让第二个盒子使用margin-top属性
内墙法它可以让第一个盒子使用margin-bottom属性

4.外墙法和内墙法区别?
外墙法不能撑起第一个盒子的高度, 而内墙法可以撑起第一个盒子的高度

5.在企业开发中不常用隔墙法来清除浮动

伪元素选择器

1.什么是伪元素选择器?
伪元素选择器作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素

2.格式:
标签名称::before{
属性名称:值;
}
给指定标签的内容前面添加一个子元素

标签名称::after{
属性名称:值;
}
给指定标签的内容后面添加一个子元素

  div::after{
            /*指定添加的子元素中存储的内容*/
            content: "么么哒";
            /*指定添加的子元素的宽度和高度*/
            width: 50px;
            /*height: 50px;*/
            /*内容是可以超出标签的范围的, 所以高度为0依然可以看见内容*/
            height:0;
            background-color: pink;
            /*指定添加的子元素的显示模式*/
            display: block;
            /*隐藏添加的子元素*/
            visibility: hidden;
        }

清除浮动方式四

1.清除浮动的第四种方式
利用伪元素选择器清除浮动
本质上就是内墙法, 只不过是直接通过CSS代码添加了内墙, 其它特性和内墙法都一样

注意点:
IE6中不支持这种方式, 为了兼容IE6必须给前面的盒子添加*zoom:1;属性

.box1::after{
            /*设置添加的子元素的内容为空*/
            content: "";
            /*设置添加的子元素为块级元素*/
            display: block;
            /*设置添加的子元素的高度为0*/
            height: 0;
            /*设置添加的子元素看不见*/
            visibility: hidden;
            /*给添加的子元素设置clear: both;*/
            clear: both;
        }
        .box1{
            /*兼容IE6*/
            *zoom:1;
        }

清除浮动方式五

1.overflow: hidden;作用

给父盒子设置css属性 overflow: hidden;
1.1可以将超出标签范围的内容裁剪掉
1.2清除浮动
1.3可以通过overflow: hidden;让里面的盒子设置margin-top之后, 外面的盒子不被顶下来