关于HarmonyOS的学习

day4

一、盒模型

1.概念：在css中，所有的html标记都有一个盒模型，它是用来网页设计和布局的，能对周围标记进行封装，盒模型就是元素示意图。元素所占位置的大小是由盒模型来决定的。

2.盒模型组成：width+border+padding+margin

3.盒模型计算： 盒模型宽度：width + 左右border + 左右padding + 左右margin 盒模型宽度：width + 上下border + 上下padding + 上下margin

4.怪异盒模型：就是IE浏览器所遵循的规范，标准盒模型是其他浏览器遵循的规范。怪异盒模型会自动计算padding值，便准盒则需要自己减去多余的值。使用box-sizing可以让标记拥有怪异盒模型的功能。

5.怪异盒模型计算： 盒模型的宽度：width（border+padding） + 左右margin 盒模型的宽度：width（border+padding） + 上下margin

二、浮动属性

1.浮动的作用：能让自上而下排列的元素横向排列

2.浮动的定义：规定文本如何环绕显示

3.流的概念：在css中的一种特殊规则。有标准（文档）流和浮动流。

4.标准流就是网页正常的排版顺序，他有以下规则： ①标准流中将标记分为了三大板块，分别是块级（block）元素，内联（也叫行内inline）元素，内联块（也叫行内块、inline-block）元素 ②块级元素特性：独占一行，自上而下排列，可以设置宽度和高度，一般作为父元素使用（div、p、h1-h6、ul、li、ol、dl、dt、dd、form、header、nav、section、main、footer...） ③内联元素特性：横向排列，不能设置高度和宽度（span、em、i、b、strong、mark、time、a...） ④内联块元素特性：横向排列，可以设置宽度和高度（img、input、select、textarea...）

5.一个标记设计了float属性那么他就叫浮动流，他有以下规则： ①让元素横向排列 ②文本环绕显示（如果是块级元素设置了高度和宽度的情况下，就不会环绕。如果时内联元素和内联块元素那么就会默认环绕） ③能让在标准流中无法设置宽度和高度的元素进行高度和宽度的设置。

6.浮动使用注意事项 ①如果有两个div，第一个浮动了，第二个没有浮动，那么第一个浮动的div就会把第二个div给覆盖掉。这是因为浮动是漂浮在标准流之上的，第一个浮动元素的原先标准流中的位置没有了，第二个div进行了补位操作。 ②如果有两个div，第一个没用浮动，第二个浮动了，那么这两个div的位置不会发生变化。因为第一个div标准流的位置是存在的，而浮动流的改变指挥改变之前自己所在的位置。 ③如果有两个div，这两个div都设置了浮动属性，在容器位置不够的情况下，第二个div依旧会被挤到去第二行。

7.清除浮动

①清除浮动并不是指将设置的浮动删去或是不设置浮动的意思，而是把浮动的负面影响给消除掉。

②负面影响：当一个属性没用设置高度时，容器的高度就会被元素撑开，这个时候如果子元素设置了浮动，就会发生高度塌陷。在实际的开发中，为了让布局的灵活性更强，有时候需要容器的高度自适应，就不会设置高度，但是不设置高度就会发生高度塌陷，此时便会用到清除浮动。

③清除浮动的方法： a.利用空盒子方式，在浮动元素的同级位置上，设置一个div，但是这个div不能设置除了清除浮动外的任何样式，只能设置clear：both； b.给父元素加上overflow：hidden； c.使用万能清除法： .clear::after{ content: ""; display:block; clear:both; height:0; visibility:hidden; }

三、元素类型

1.css中有三种类型（块级、内联、内联块），元素类型有很多小的分类，大概有18种，但只需要将常用的类型知道即可。

2.注意点：在没有新增行内块元素之前就分为两种（块级、内联）。现在也有很多人把内联块叫做内联元素。也有人把元素分为置换元素和非置换元素。置换元素是指标记自身带有css格式化以外的样式（如input、img、button、textarea、selcet等）

3.元素类型转换

display：block | inline | inline-block（常用）

display：table | inline-table | list-item（了解）

block表示把其他元素转为块级元素

inline表示把其他类型转化为内联元素

inline-block表示把其他类型转化为内联块元素

none表示隐藏

table表示元素类型是table表格类型（自上而下排列）

inline表示元素的类型是内联表格类型（横向排列）

list-item表示元素的类型是列表类型（无序列表、有序列表、自定义列表）

4.隐藏和显示

display：block（将隐藏的元素显示）

display：none（将显示的元素隐藏起来）

5.元素类型注意点：内联在使用margin和padding上下值的存在问题可能会失效（margin上下值没有作用），可能达不到预期效果（padding上下值使用的时候会超出所在的容器）；段落标记里面放块级元素。