一、元素类型的转换

image.png

盒子模型可通过 display 属性来改变默认的显示类型

display 属性与属性值 (18个属性值)
属性值：block / inline / inline-block / none / list-item / table-header-group / table-footer-group
作用：该属性设置或检索对象元素应该生成的盒模型的类型。
说明：各属性值的作用

1) block 块状显示：类似在元素后面添加换行符，也就是说其他元素不能在其后面并列显示。(将元素转为块状元素，使该元素拥有块状元素的特点；)
2) inline 内联显示：在元素后面删除换行符，多个元素可以在一行内并列显示。（元素转换为内联元素）
3) 当元素设置了 float 属性后，就相当于给该元素加了 display:block; 声明；
4) inline-block 行内块元素显示：元素的内容以块状显示，行内的其他元素显示在同一行。（只有这一类元素支持vertical-align 属性）img, input (行内块元素)。
5) none 此元素不会被显示。
6）A、大部分块元素 display 属性值默认为 block，其中列表 li 的默认值确是 list-item。
B、大部分内联元素的 display 属性值默认为 inline ,其中 img, input，默认为 inline-block（行内块元素）。
7）设置一个元素在一个容器中垂直居中，必须更改默认的 display 属性值为 inline-block; 并加上同级元素（标尺）（同级元素[标尺]样式设置为vertical-align:middle;width:0;height:100%;display:inline-block;）

  1. <style>
  2.         /*将块元素转成内联元素：display:inline，使其具有内联元素的特点*/
  3.         /* div{
  4.             display:inline;
  5.             background: pink;     
  6.         } */
  7.         /*将块元素转成内联块  display:inline-block;使其具有内联块的特点*/
  8.         div{
  9.             display:inline-block;
  10.             width:100px;
  11.             height: 100px;
  12.             background: pink
  13.         }
  14.         /*将内联元素转为块元素 display: block;使其具有块的特点*/
  15.         span{
  16.             display: block;
  17.             width: 200px;
  18.             height: 200px;
  19.             background: blueviolet;
  20.          }
  21.     </style>
  22. </head>
  23. <body>
  24.     <!--
  25.         转块 ： display:block;
  26.         转成内联： display:inline;
  27.         转成内联块 ： display:inline-block
  29.     -->
  30.     <div>文字</div>
  31.     <div>内容</div>
  32.     <span></span>
  33.     <span></span>
  34. </body>

二、让元素显示隐藏

 <style>
        p{
            width:100px;
            height: 100px;
            background: pink;
            /* display:none; */
            visibility: hidden;
        }
        /* p{
          display: block;   
        } */
        p{
            visibility: visible;
        }
    </style>


</head>
<body>
    <!---
        让元素显示
           display: block;
           visibility: visible;

        让元素隐藏：
           display:none 
           visibility: hidden;

        display:none 和  visibility: hidden 的区别
        display:none 是彻底消失，不在文档流中占位，浏览器也不会解析该元素
        visibility:hidden 是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该
        元素；


    -->
    <p>内容内容</p>
    <div>文字文字</div>
</body>

display 与 visibility 区别

display:none 是彻底消失，不在文档流中占位，浏览器也不会解析该元素
visibility:hidden 是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；

三、浮动

浮动（一定要有父级）：

块元素浮动，块元素变成了内联块 内联元素，只要浮动，也可以设置宽高 只要让子元素并排显示，所有子元素必须都得浮动 float : left 向左浮动 right 向右浮动 none 默认不浮动 由于子元素浮动，他们就脱离了文档流了； 没有父级设置高，导致父级没有高度，这种叫高度塌陷

float: 定义网页中其它文本如何环绕该元素显示
有三个取值：
left: 元素活动浮动在文本左面
right: 元素浮动在右面
none: 默认值，不浮动。

清除浮动的方法

方法一：给父盒子加固定高度
注意点: 实际项目开发中, 我们能不写高度就不写高度, 所以这种方式用得很少

方法二：clear 清除浮动
none：允许两边都可以有浮动对象
both：清除两边浮动

方法三：给父元素加 overflow:hidden;
overflow : visible： 对溢出内容不做处理，内容可能会超出容器。
overflow : hidden： 隐藏溢出容器的内容且不出现滚动条。
overflow : scroll： 隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。
overflow : auto： 当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，
按需出现滚动条。此为 body 对象和 textarea 的默认值。
overflow 的效果等同于 overflow-x + overflow-y。

方法四：clearfix
利用 clearfix 去清除浮动(实际项目中最常用的方法)我是一块砖 哪里需要 就往哪里搬
最完整 clearfix 清除浮动的方法：

.clearfix:after{
    content:'';
    display:block;
    clear:both;
    width:0;
    height:0;
    line-height:0;
    font-size:0;
    visibility: hidden;
    overflow:hidden;
}
.clearfix{
   zoom:1;
}

四、css 的三大特性

一：继承性
作用：子元素可以继承父元素的样式。即被包在内部的标签将拥有外部标签的样式特性。
在 css 中只有以 text-、font-、line- 开头的属性才可以继承。
在 css 中的继承只要是后代元素都可以继承，不仅仅局限在儿子层。
CSS 中的特殊性
a 标签的字体颜色和下划线是不能被继承，必须对 a 标签本身进行设置。
h 标签的字体大小不能修改，必须对 h 标签本身进行修改。

二：层叠
作用：CSS 处理冲突的能力
是浏览器处理冲突的一个能力，如果一个属性通过两个选择器设置到同一个元素上，
那么这个时候一个属性就会将另一个属性层叠掉

三：优先级（权重）
当多个选择器选中同一个标签时,并且给同一个标签设置相同的属性时,如何层叠就由优先级来决定
提升优先级 !important
!important, 用于提升某个直接选中标签的选择器的某个属性的优先级,
可以将被指定的属性的优先级提升为最高
注意点:
!important 只能用于直接选中,不能用于间接选中
通配符*选中的也是直接选中
!important 只能提升指定属性的优先级，其他的不会提升
!important 必须写在;前面，并且!不能丢掉

五、盒子模型

盒模型概述一：padding 属性
padding 的使用方法
Padding 是设定页面中一个元素内容到元素的边框之间的距离。 也称补白。
1）用来调整内容(子元素)在容器（父元素）中的位置关系
2）用来调整子元素在父元素中的位置关系。
注：padding 属性需要添加在父元素上。
3）padding 值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉添加的 padding 值大小。
padding 属性值单独设置写法：
也可以设置单方向：padding-top / bottom / left / right:20px;

1）padding 内填充
padding 区域在 border 与 content 之间；背景色和背景图像会覆盖 padding 和 content 组成的区域；
2）margin 外边界
边界：margin, 在元素外边的空白区域，被称为边距。

1. 盒子大小的计算

盒子实际占有宽度区域 = margin-left + border-left + padding-left + width +
padding-right + border-right + margin-right
盒子实际占有高度的区域 = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
盒子大小的计算 实际大小
公式：
宽 =左右margin + 左右border + 左右padding + width
高 =上下margin + 上下border + 上下padding + height

例如：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px
宽=margin_2 + border_2 + padding_2 + content.width = 20_2 + 1_2 + 10_2 +200 = 262px
高=margin_2 + border_2 + padding_2 + content.height = 20_2 + 1_2 +10_2 + 50 = 112px

2. 文本属性

容器溢出 {overflow: visible / hidden / scroll / auto / inherit;}
说明：
visible: 默认值，内容不会被修剪，会呈现在元素框之外；
hidden：内容会被修剪，并且其余内容是不可见的；
scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;
auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;
inherit：规定应该从父元素继承 overflow 属性的值。

空白空间
{white-space: normal / pre / nowrap / pre-wrap / pre-line / inherit;}
说明：
normal：默认值，多余空白会被浏览器忽略只保留一个；
pre：空白会被浏览器保留；
pre-wrap：保留一部分空白符序列，但是正常的进行换行；
pre-line:合并空白符序列，但是保留换行符；
nowrap:文本不会换行，文本会在同一行上继续，直到遇到<br/>标签为止;

文本溢出
{text-overflow: clip / ellipsis;}
说明：
取值：
clip：不显示省略号（…），而是简单的裁切;
ellipsis：当对象内文本溢出时，显示省略标记；

文本溢出边省略号设置
省略号设置：
text-overflow 仅是：当文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义：
1、容器宽度：width：value；（px、%，都可以）
2、强制文本在一行内显示:white-space：nowrap;
3、溢出内容为隐藏：overflow：hidden；
4、溢出文本显示省略号：
text-overflow：ellipsis;
注：必须是单行文本才能设置本文溢出！！！