1 文档流

浏览器会根据元素的排列方式
块元素从上到下排列
行元素和行内块从左到右排列如果空间不足，自动换行
我们称之为流式布局

2 盒模型

2.1 块元素常用设置

 /*设置元素的宽度*/
 width: 100px;
 
 /*设置元素的高度*/
 height: 100px;
 /*设置元素的背景颜色*/
 
 /*颜色：
 1、直接对*应英文字母
 2、rgb（red，green，blue）（0-255）
 3、十六进制
 */
 background-color: #ff0000;
 
 /*内边距 从内容到边框*/
 padding: 10px;
 
 /*边框 参数1 边框宽度 参数2 边框样式 参数3 边框颜色*/
 border:20px solid black ;
 
 /*外边距 到兄弟元素或父元素的距离*/
 margin: 50px;

标准盒模型

盒子组成 = content+padding+border+margin
注意：width 设置的是内容区的宽度

怪异盒模型（ie）

盒子组成 = content+padding+border+margin
注意width包含了 content+padding+border
注意 width 设置的是内容区的宽度

内边距 padding

一个值表示上下左右四个方向都是10px

两个值上下左右

三个值上左右下

四个值上右下左

外边距

外边距穿透发生有两个条件：1 在垂直方向 2 父元素没有边框

如何解决： 1 给父元素添加边框 2 不使用外边框使用内边框

边框

/* 参数1 边框宽度参数2 样式 solid 参数三颜色 */

/* border: 0px solid rgb(red, green, blue); */

/* 边框宽度 */

border-width: 10px;

/* 边框样式 dashed 虚线 dotted 点状 double线 groove 凹槽 */

border-style: solid;

/* 边框颜色 */

border-color: tomato;

/* 给每个方向单独设置 */

/* border-top: 40px solid yellowgreen; */

2.2 元素的隐藏方式

 .box{
             /* display: none; */
             /* 元素的透明度 */
             /* opacity: 0; */
             /* 元素的可见度  visiable 可见 hidden 隐藏*/
             visibility: hidden;
             
         }

2.3 溢出隐藏和文本显示省略号

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
         .box{
             width: 100px;
             height: 100px;
             border: 1px solid #000;
             /* overflow: hidden; */
             /* 第几行省略号 */
             display: -webkit-box;
             /* clamp 夹子 */
             -webkit-line-clamp: 5;
             /* vertical 垂直的纵向的 orient 标定方向*/
             -webkit-box-orient: vertical;
         }
         p{
             width: 100px;
             
             border: 1px solid #000;
             overflow: hidden;
             /* 单行省略号 */
             text-overflow: ellipsis;
             /* 文字不换行 */
             white-space: nowrap;
         }
     </style>
 </head>
 <body>
     <div class="box">
         观沧海-曹操
         东临碣石以观沧海
         水河澹澹山岛竦峙
         老骥伏枥志在千里
         烈士暮年壮心不已
     </div>
 <!-- title 当悬浮一段时间后出现提示 -->
     <p title="对酒当歌人生几何譬如朝露去日苦多慨当以慷，忧思难忘何以解忧，唯有杜康">
         对酒当歌人生几何
         譬如朝露去日苦多
         慨当以慷，忧思难忘
         何以解忧，唯有杜康
     </p>
 </body>
 </html>