浮动与定位的区别

1、浮动与定位的区别 脱离正常文档流 float:left | right position:absolute | fixed 浮动脱离文档流，不脱离文本流 定位既脱离文档流，又脱离文本流 2、显示与隐藏可以通过哪些方式显示？ display属性 display:block 显示 display:none 隐藏（元素隐藏，占位也不存在了） visibility属性 visibility：visible 显示 visibility:hidden 隐藏（占位还在，"隐身"） opacity属性 opacity:1 显示 opacity：0 隐藏（元素透明） 3、圣杯布局的实现思路   4、左侧宽度固定，右侧宽度自适应的两栏布局，手写代码   一、等高布局 1、利用内容撑开父元素的特点实现等高布局 实现思路： 需要几列就需要嵌套几层 col盒子设置背景（width:100%） left、center和right盒子需要浮动（同时需要给父元素清除浮动） 给col这几个盒子设置相对定位，将左侧和中间盒子的背景露出来 将文字归位（margin-left）  

   

         

           

             

左侧盒子

             

中间盒子

             

右侧盒子

                 

   

  首页

五、BFC 1、什么是BFC? Block Formatting Context 翻译成中文意思是块级格式化上下文 BFC只对块级元素生效 BFC是指元素拥有一套渲染规则来约束子元素的布局，且与外部区域无关 2、BFC的特性（笔试重点） 内部的标签会在垂直方向上一个接一个的放置 垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠 每个标签的左外边距与包含块的左边界相接触（从左向右），即使浮动标签也是如此。 BFC的区域不会与float的标签区域重叠 计算BFC的高度时，浮动子标签也参与计算 BFC就是页面上的一个隔离的独立容器，容器里面的子标签不会影响到外面标签，反之亦然 3、如何生成BFC? 1、根元素 2、设置以下css样式的元素会生成BFC display:inline-block float:left | right position： absolute | fixed overflow: hidden | scroll | auto; 4、BFC解决的问题 （1）兄弟元素的外边距塌陷 特性2：塌陷产生的原因

（2）自适应布局 三栏自适应：左右宽度固定，中间自适应 （3）防止文字环绕 （4）清浮动 六、盒子阴影和文字阴影

左侧盒子

右侧盒子

中间盒子

     

     

朱一龙，1988年4月16日出生于湖北省武汉市，中国内地男演员，毕业于北京电影学院2006 级表演系本科。          

img {   float: left; } p {   overflow: hidden; }1、盒子阴影 水平阴影和垂直阴影的位置可以设置正值或者负值 阴影颜色：颜色关键词 #rrggbb rgb() rgba() 内外阴影默认不设置时就是外阴影，如果需要改成内阴影需要给inset 2、文字阴影 七、单行文本与多行文本的溢出处理 1、单行文本的溢出处理 white-space属性 normal 正常（默认值） nowrap 强制不换行（文本结束时或者遇到br标签才会换行） overflow属性，属性值hidden text-overflow 文字溢出时如何处理 clip 直接裁剪 ellipsis 溢出显示省略号 box-shadow:水平阴影位置 垂直阴影位置 模糊距离 阴影大小 阴影颜色 内/外阴影; .box {   width: 200px;   height: 200px;   border: 1px solid black;   /* 水平居中 */   margin:0 auto;   /* 盒子阴影*/     box-shadow: 5px 5px 20px 5px pink inset; } text-shadow:水平阴影位置 垂直阴影位置 模糊距离 阴影颜色； p {   font-size: 30px;   /* text-shadow: 5px 5px 5px pink; */   text-shadow: 5px 5px 5px rgba(0,0,0,0.5); }2、多行文本溢出处理 （1）webkit私有属性处理 -webkit-line-clamp属性：webkit内核中显示几行，并且尾部用省略号补充 只设置-webkit-line-clamp属性没有效果，需要配合下面两个属性来使用 display: -webkit-box; 设置盒子为弹性伸缩盒 -webkit-box-orient: vertical; 设置盒子内文字的对齐方式为垂直的   只适用于webkit内核 （2）利用伪元素模拟省略号实现溢出处理 p {   width: 150px;   /* background-color: red; */   border: 1px solid red;   /* 单行文本溢出 */   white-space: nowrap;   overflow: hidden;   text-overflow: ellipsis; } p {   width: 150px;   border: 1px solid red;   overflow: hidden;   /* webkit私有属性处理多行文本的溢出 */   -webkit-line-clamp: 2;   /* 配合以下属性使用 */   display: -webkit-box;   -webkit-box-orient: vertical; }