皮皮燕皮皮崽文档记
文档流
- 文档流 是css的一种基本定位和布局机制。
文档流是html的一种抽象概念，暗喻这种排列布局方式好像水流一样自然自动。“流体布局”是html默认的布局机制，如你写的html不用css，默认自上而下（块级元素如div）从左到右（内联元素如span）堆砌的布局方式。不写css自然的从上往下排版.
块级元素 和 行内元素 (次要 不用背)
- 块级元素是，单独撑满一行的元素，如div、ul、li、table、p、h1等元素。这些元素的display值默认是block、table、list-item等。
- 行内元素，指只占据它对应标签的边框所包含的空间的元素，这些元素如果父元素宽度足够则并排在一行显示的，如span、a、em、i、img、td等。这些元素的display值默认是inline、inline-block、inline-table、table-cell等。
块级元素标签:
小程序: <view>、swiper、swiper-item(滑动图组件)
网页里: <div>、ul、li、table、p、h1;
display: block; /*最常用*/
table; 少见
list-item;
-----------------------------
行内元素标签:
小程序: <text>
网页里: <span>、a、em、i、img、td
display: inline; /*常用*/
inline-block; /*常用*/
inline-table;
table-cell;
标签属性转换 块级转换内联
-
display:block;转display:inline-block;直接在方框标签的class上写样式。display:block;display:inline-block;
边距 padding、margin 布局
-
padding是内边距、margin是外边距；以边框参照，边框内是padding内边距 边框外是margin外边距。
没padding有padding:10px没margin有margin:10px
<div
style="
border:1px solid #FFC0CB;
height:100px;width:100px;
background: #f1f1f1;
font-size:12px;
padding: 10px;
box-sizing: border-box;
">有padding</div>
<div
style="
border:1px solid #FFC0CB;
box-sizing: border-box;
height:100px;width:100px;
background: #f1f1f1;
font-size:12px;
margin: 10px;
">有margin:10px</div>
border:1px solid #FFC0CB;
padding: 10px;
box-sizing: border-box; 组合使用
盒模型 box-sizing
任何一个标签元素都是由 margin、border、padding、content组成的这四个盒子由外到内构成了盒模型。
display: flex;
float:left;
clear: both; 待续.
待补充
