文档流盒模型

最新推荐文章于 2024-06-02 23:26:49 发布

诗风乐雨

最新推荐文章于 2024-06-02 23:26:49 发布

阅读量77

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/qq_45119312/article/details/124268786

版权

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>

诗风乐雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文档流盒模型

1 文档流浏览器会根据元素的排列方式块元素从上到下排列行元素和行内块从左到右排列如果空间不足，自动换行我们称之为流式布局 2 盒模型2.1 块元素常用设置/*设置元素的宽度*/width: 100px;/*设置元素的高度*/height: 100px;/*设置元素的背景颜色*//*颜色：1、直接对*应英文字母2、rgb（red，green，blue）（0-255）3、十六进制*/bac...
复制链接

扫一扫