精华内容
下载资源
问答
  • 什么是div塌陷

    2019-03-17 00:52:23
    我子元素 设置了浮动,就是脱离了文档,父元素里面就相当于没有东西了 ... 塌陷问题 <style type="text/css"> #nav1:after{ overflow:hidden } #nav2{ width:100px; height: 1...

    我子元素 设置了浮动,就是脱离了文档,父元素里面就相当于没有东西了

    塌陷问题
    <style type="text/css">
    
          
           #nav1:after{
                overflow:hidden
    
            }
    
           #nav2{
           	width:100px;
           	height: 100px;
           	background-color:blue;
           	float:left;
           }
    
          
    
    </style>
    

    我用谷歌ie9完全不知道父元素在哪? 给每个盒子设定固定的width和height 以下几种好像不能用 给外部的父盒子也添加浮动 overflow:hidden; 可能会带来内容不可见的问题 父盒子里最下方引入清除浮动块
    after+content方法清除浮动造成的塌陷 #nav1:after{ clear: both; content: “”; width: 0; height: 0; display: block; visibility: hidden; }

    展开全文
  • CSS div 塌陷问题

    2017-07-18 21:11:00
    嵌套塌陷 上下塌陷 overflow:hidden; 转载于:https://www.cnblogs.com/wms01/p/7202724.html

    嵌套塌陷

    上下塌陷

    overflow:hidden;

    转载于:https://www.cnblogs.com/wms01/p/7202724.html

    展开全文
  • img-div塌陷

    2018-11-12 16:43:42
    <div class="test_images"> <div class="img_wrap"> </div> </div> </div> <div class="blogs"> 蘭桂坊日本嘉年華 喜歡日本的人就像上了癮,無時無刻都想念日本。想要止止日本癮的朋友,11月可到以Cool ...

    问题1:描述,如下面图片显示的结果,当图片大小高度不一的时候,就会出现如图所示的问题:

    问题2:当容器高度依靠内容撑开,并且需要做到自适应宽高的时候,解决方法可以巧用margin/padding的百分比实现高度自适应,达到占位,避免避免闪烁;

    例如下面:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style>
      .container {
        width: 1200px;
        margin: 0 auto;
        background-color: aquamarine;
      }
    
      .row {
        display: flex;
        flex-wrap: wrap;
        
      }
    
      .cell {
        width: 23.5%;
        margin-right: 2%;
        background-color: red;
        margin-bottom: 20px;
      }
    
      .cell:nth-of-type(4n) {
        margin-right: 0;
      }
    
      .cell .images {
        width: 100%;
        background-color: blue;
      }
    
      .cell .images .test_images {
        width: 100%;
        position: relative;
        padding-top: 100%;
        overflow: hidden;
      }
    
      .cell .images .test_images .img_wrap {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
      }
    
      .cell .images img {
        width: 100%;
        height: auto;
      }
    
      .blogs p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
      </style>
    </head>
    <body>
      <!-- 
        描述上面图片
       -->
    
      <div class="container">
        <div class="row">
          <div class="cell">
            <div class="images">
              <div class="test_images">
                <div class="img_wrap">
                  <img src="http://www.qpoint.hk/wp-content/uploads/2018/11/QPoint_coupons_Offer_Japan_Image_20181029175418_0_LKF_Street_Carnival_1.jpg">
                </div>
              </div>
            </div>
            <div class="blogs">
              <h2>蘭桂坊日本嘉年華</h2>
              <p>喜歡日本的人就像上了癮,無時無刻都想念日本。想要止止日本癮的朋友,11月可到以Cool Japan為主題的「蘭桂坊日本嘉年華」。承接往年的成功經驗,一連兩天的標誌性蘭桂坊街頭祭典將展示日本文化最華麗的一面,包括日式當地美餚、飲品以及多姿多彩的娛樂表演。嘉年華提供浴衣,讓你可以和閨密一邊穿浴衣,一邊品嘗甜點如青森縣的蘋果批、北海道氣球牛乳布甸、日式佳餚如A5和牛等多款美食,讓你全程投入充滿趣味的日本文化展覽和活動之中! 今日小編還會介紹蘭桂坊一些人氣日本餐廳的限時Q優點折扣讓你盡興而歸! 蘭桂坊日本秋祭市集 著浴衣歎A5和牛 蘭桂坊日本秋祭嘉年華為期兩天,屆時將會提供浴衣,讓一眾閨密們可以即場更換浴衣。另外,蘭桂坊日本秋祭嘉年華設40個攤位,攤位有刺激的互動遊戲,亦有來自日本各地的日式清酒和佳餚! Monchhichi期間限定店舖 由11月8日至11 月11日期間,蘭桂坊將聯同日本水果批發商兼官方授權甜品生產商山下菓子,精心呈獻新鮮水果市場和Monchhichi期間限定店舖。蘭桂坊首次聯乘山下菓子打造的第一個在港島區的限定店,印有Monchhichi圖案的日本著名美食如布丁、卷蛋及果汁將於活動期間內供應,定必俘虜一眾Monchhichi粉絲的歡心。參加者亦可在場內購買香港原創、於日本歌唱出道的卡通人物歌手—星星兔 (Sing Sing Rabbit)的精品系列。 LKF Cool …</p>
            </div>
          </div>
          <div class="cell">
            <div class="images">
              <div class="test_images">
                <div class="img_wrap">
                  <img src="http://www.qpoint.hk/wp-content/uploads/2018/10/正在消失的香港文化t1.png">
                </div>
              </div>
            </div>
            <div class="blogs">
              <h2>8個正在消失的香港文化</h2>
              <p>在這個快速變動的時代,舊的傳統漸趨式微,到底有什麼樣的香港傳統文化正慢慢淡出大眾的視線?  1️⃣ 大排檔 富人情味的傳統用餐方式由於衛生的問題,已經隨著營業牌照的限制,減少到只剩20多家!  2️⃣ 點心車 現今大多數的茶樓皆把過去用推車仔點菜的環節換成用點心紙,保有點心車傳統的茶樓已寥寥無幾。  3️⃣ 炒栗子 在冬天推著推車,在路邊叫賣的炒栗子攤販,已經成為過去,溫暖的景象已經被熙攘的人群所取代。  4️⃣ 冰室 代表香港市井文化的仿西式咖啡廳,在80年代起慢慢演變成步調快速的茶餐廳,專售簡單小食與飲品的悠閒好去處不復存在。  5️⃣ 士多 每一家士多陳設,玩意皆異,是屬於70,80年代生的童年回憶,如今已經被連鎖便利商店給取代。  6️⃣ 唐樓 無升降機的舊樓,隨著人口激增,居住空間往高處發展,漸漸被併購,重建,現多已淪為街舖的貨倉。</p>
            </div>
          </div>
          <div class="cell">
            <div class="images">
              <div class="test_images">
                <div class="img_wrap">
                  <img src="http://www.qpoint.hk/wp-content/uploads/2018/10/饮食须知-t1.png">
                </div>
              </div>
            </div>
            <div class="blogs">
              <h2>饮食须知</h2>
              <p>香港作为美食之都,有带三个胃都吃不够的佳餚!在出门准备去名店朝圣,大吃特吃之前,有什麽是需要注意的呢?  ?秘诀1:自备环保袋 自2015年4月起,为了响应环保,店家不再免费提供塑胶袋。每一个袋子要额外收至少$ 0.5 港币  ?秘诀2:自备餐巾纸 多数的餐厅不提供餐巾纸,若有使用餐巾纸的需要,记得自备一包。  ?秘诀3:自备冷水 多数的餐厅呈上的是温热的开水,若需要加冰块,尚须额外加钱。  ?秘诀4:需要什麽服务自己开口 大部分的餐厅不收服务费。为了让客人有自己的空间,侍应不会主动前来点餐,因此需要任何服务,记得要主动开口  ?秘诀 5:备好现金 并非每家餐馆皆受信用卡,尤其是小摊贩,多备现金在身上以备不时之需  ?秘诀6:注意有没有额外收费 有些餐听主动送上的茶,调味酱料或小菜会额外收费,若不需要须先告知侍应。  ?秘诀7: 做好「併桌」的准备 在尖峰时段为了让每位食客都可以尽快享受到餐点,每一个空位会被商家好好运用。因此做好跟他人併桌的准备哟。  ?秘诀8:茶水先用茶水来洗餐具 热茶在拿来喝前,可先用来清洗餐具,洗过餐具的水直接倒入桌上大碗中即可。  ?秘诀9:去优质旅游服务协会认证的餐厅用餐 如果你不确定去哪裡吃饭有保障,就参考优质旅游服务协会认证过的餐厅吧!</p>
            </div>
          </div>
          <div class="cell">
            <div class="images">
              <div class="test_images">
                <div class="img_wrap">
                  <img src="http://www.qpoint.hk/wp-content/uploads/2018/10/饮食须知-t1.png">
                </div>
              </div>
            </div>
            <div class="blogs">
              <h2>饮食须知</h2>
              <p>香港作为美食之都,有带三个胃都吃不够的佳餚!在出门准备去名店朝圣,大吃特吃之前,有什麽是需要注意的呢?  ?秘诀1:自备环保袋 自2015年4月起,为了响应环保,店家不再免费提供塑胶袋。每一个袋子要额外收至少$ 0.5 港币  ?秘诀2:自备餐巾纸 多数的餐厅不提供餐巾纸,若有使用餐巾纸的需要,记得自备一包。  ?秘诀3:自备冷水 多数的餐厅呈上的是温热的开水,若需要加冰块,尚须额外加钱。  ?秘诀4:需要什麽服务自己开口 大部分的餐厅不收服务费。为了让客人有自己的空间,侍应不会主动前来点餐,因此需要任何服务,记得要主动开口  ?秘诀 5:备好现金 并非每家餐馆皆受信用卡,尤其是小摊贩,多备现金在身上以备不时之需  ?秘诀6:注意有没有额外收费 有些餐听主动送上的茶,调味酱料或小菜会额外收费,若不需要须先告知侍应。  ?秘诀7: 做好「併桌」的准备 在尖峰时段为了让每位食客都可以尽快享受到餐点,每一个空位会被商家好好运用。因此做好跟他人併桌的准备哟。  ?秘诀8:茶水先用茶水来洗餐具 热茶在拿来喝前,可先用来清洗餐具,洗过餐具的水直接倒入桌上大碗中即可。  ?秘诀9:去优质旅游服务协会认证的餐厅用餐 如果你不确定去哪裡吃饭有保障,就参考优质旅游服务协会认证过的餐厅吧!</p>
            </div>
          </div>
        </div>
      </div>
    </body>
    </html>

     

    展开全文
  • 画出div边距  2)overflow:hidden; 在父级加该属性可以防止浮动塌陷  3)font-size: 13px; 设置字体大小  4)body{  margin: 0px;  padding: 0px;  } //去除页面默认边距 ...

    HTML页面:
     1)border: 1px solid red; 画出div边距


     2)overflow:hidden; 在父级加该属性可以防止浮动塌陷


     3)font-size: 13px; 设置字体大小


     4)body{
        margin: 0px;
        padding: 0px;
        } //去除页面默认边距


     5)ul{
       list-style-type: none; 去点
       padding:0; /*内外边距为0,去除ul前空格*/
       margin:0;
       }


     6)在style(CSS样式)中 :
        1.id选择器 #div{ }
        2.类选择器 .div{ }
        3.标签选择器 div{ }

     7)<a>标签
        <a href="地址" target="_blank(新开) 控制页面打开方式" title="鼠标移动上显示"></a>


     8)<link rel="shortcut icon" href="img/logo.ico" type="image/x-icon"> 小图标引入


       9)锚链接:
        <a name="1f"></a> 锚点1
        <a name="2f"></a> 锚点2
        <a name="3f"></a> 锚点3
        控制
        <a href="#1f">1F</a>|<a href="#2f">2F</a>|<a href="#3f">3F</a>|<a href="#">回到顶部</a>

       10)<meta http-equiv="refresh" content="3;https://www.baidu.com"> 在页面加载完成后3秒跳转到百度

       11)去掉A链接下划线样式代码:a{text-decoration:none}

       12)<input> (在from中使用)
      button :普通按钮
      checkbox :复选框
        <input type="checkbox" name="fav" value="0" checked="checked"/>吃饭
        <input type="checkbox" name="fav" value="1" checked/>睡觉
        <input type="checkbox" name="fav" value="2"/>打豆豆
      file :文件上传
      hidden :隐藏域
      image :图片按钮,有提交功能
      password :密码
      radio :单选框
      <input type="radio" name="sex" value="0" checked="true"/>男
      <input type="radio" name="sex" value="1"/>女
      reset :重置
      submit :提交
      text :文本
      下拉框:select
        <select name="addr">
        <option value="0">北京市</option>
        <option value="1" selected="true">天津市</option>
        <option value="2">上海市</option>
        </select>

      13)css <style>
        #div1{
          text-align: right;
        }
        a{
          color: #333;
          font-weight: 700;/*设置字形加粗*/
          font-size: 13px;/*设置字体大小*/
          margin-right: 20px;/*设置向右的外边距*/
          margin-top: 20px;/*设置距离顶部的外边距*/
          /*border: 1px solid gray;*//*设置元素边框*/
          /*width: 100px;
          height: 200px;*/
          display: inline-block;/*将当前行内元素转换成行内块级元素*/
        }

        a:hover{
          color:blue;
        }

        #div2{
          text-align:center ;
        }

        #div2 img{
          width: 270px;
          margin-bottom: 35px;
        }

        .textCls{
          width: 540px;
          height: 36px;
          background:url(img/bg-ico.png) no-repeat 507px ;
          /*设置背景图片 背景不重复显示 背景位置*/

          }

        .btn{
        width: 100px;
        height: 42px;
        border: none;/*去除边框*/
        position:relative ;/*相对定位*/
        top:2px;
        background-color: #3385FF;
        color: white;
        font-family: "微软雅黑";/*设置字体*/
        font-size: 15px;
        letter-spacing: 1px;/*设置文字间距*/
        }

        </style>

     

     

    调试:
    console.log();
    alert()
    
    类型转换:
    var n1="String";
    alert(typeof n1) //判断数据类型
    var n2 = parseInt('123'); //把String类型转化成Int类型
    var n2 = parseInt('abc'); //如果转换失败就提示:NaN
    var n2 = parseInt('12abc'); //从左到右,结果是:12 
    
    var n3 = Number("123");//把String类型转化成Int类型
    
    var n4 = parseFloat("3.14");//把String类型转化成浮点类型类型 结果是:3.14
    var n4 = parseFloat("3.14px");//把String类型转化成浮点类型类型 结果是:3.14
    var n4 = parseFloat("3.");//把String类型转化成浮点类型类型 结果是:3
    
    var n5 = 123;
    var n6 = n5.toString();//把Number类型转化成String类型类型 
    
    var n7 = Boolean("hello123")//把String类型转化成布尔类型类型
    
    运算符:
        ==  :等值符   var s1 ="123";  var s2 = 123;  s1==s2 结果是:true
        === :等同符   var s1 ="123";  var s2 = 123;  s1===s2结果是:false
        
    for循环:
        for (var i =0 ; i<10 ;i++ ) {
                    
                }
                
        for (var s in list) {
                    
        }

     

    页面url传值:
        上一个页面
         window.open("<%=request.getContextPath()%>/welcom/articles.htm?subjectId="+id);    
        下一个页面
        var OrderId;
        $(function(){
            subjectId = "<%=request.getParameter("subjectId")%>"; 
        })

     

    转载于:https://www.cnblogs.com/hi-feng/p/7863017.html

    展开全文
  • 今天写轮播图的时候发现,在设置图片宽度时,第二张图片会塌陷到下面去,其实是出于排版的原因两个div之间留下了空白字符,才导致两个div元素之间留有间距,导致图片塌陷。另外,display:inline-block的元素之间会...
  • CSS DIV盒子塌陷问题

    2021-06-09 17:42:49
    文章目录盒子塌陷问题1 出现问题2 解决办法3 测试4 总结 盒子塌陷问题 1 出现问题 有两个嵌套DIV盒子,父盒子里面有一个子盒子,想让子盒子与父盒子上边框之间有一段间距,但是给子级元素添加的外边距没有起效果,...
  • div外边距塌陷问题

    2019-03-21 14:17:11
    块级元素的上下外边距有时候会合并,合并后的外边距等于合并前两个外边距中的较大值,这种现象称为外边距塌陷。 外边距塌陷有以下三种情况: 同级相邻元素 同级相邻元素之间的外边距会塌陷塌陷后的间距等于两个...
  • div class="wrap"> <div class="content"> </div> </div> class .wrap{ background-color:red; width:400px; height:400px; margin-top:20px; } .content{ backgro...
  • 拥有父级div和3个子div。只知道child2的高度。... 已粘贴代码http://jsfiddle.net/586Cr/CSS父级div边框和高度塌陷提供了下面的代码。#parentt{background-color:#000000;border:4px solid #0000FF;}#ch...
  • DIV+CSS 解决浮动塌陷

    2019-05-16 22:26:21
    方法一: overflow:hidden 方法二: 加一个DIV,样式为:clear:both; 方法三: 给DIV设置高度
  • div .clear{clear:both;} <div class="clear"></div> 缺点: 直接加height在父级 麻烦 *{ border:0; padding:0; margin:0; } 对所有元素设定 overflow:visible; hidden; 隐藏 scroll; 会有...
  • &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; ... #div01{ width: 300px; height: 30
  • css代码: #father{ border: 1px solid green; } #a{ width: 100px; height: 100px; border: 1px solid red; ...div id="father"> <div id="a"> hello </div> </div>
  • <div class="box2"></div> </div> <div class="box3"></div> 第二种方式:通过clear属性来清除浮动 <!doctype html> <title></title> .box1{ border:1px solid red; } .box2{ ...
  • 当我们对div或者其他容器内部的标签使用float属性后,会出现此div下面的其他网页元素跑到此div的顶栏位置,这是由于使用了float使其父级容器出现了容器塌陷(检查元素是发现容器的高度变为0或者边框的上下像素值和)...
  • 父元素塌陷 解决父元素塌陷:(清楚浮动带来的危害) 1.给父元素设置高度(不能消除危害,一般不用) 2.给父元素设置一个最小的儿子(添加一个空白div)给儿子设置clear both 可以设置一个伪类选择器: .clearDiv :...
  • 问题描述:原型大概是“一个div嵌套了两个 div,给main设定了background="pink" ,header1设定background=“red” 。header2 设定background=“blue” ,同时给heder1 设定margin-top:10px; 预想的是内层 heder1div 的...
  • margin塌陷

    2019-04-08 14:23:00
    塌陷问题 当两个盒子在垂直方向上设置margin值时,会出现一个有趣的塌陷现象。 ①垂直并列(少见)  首先设置两个DIV,并为其制定宽高 1 /*HTML部分*/ 2 <body> 3 <div class="box1"&...
  • 1.开始时,页面只有两个DIV的嵌套(见图) 运行结果是: 现在看运行的是正常的,但是当我设置让 class="box2" 的DIV浮动时 运行结果是这样的: 图中可以看出,box1中已经没有了任何高度,这是由于box2...
  • 为什么我的UL标签在DIV里面有浮动后塌陷呢? 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试</title> <style type=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 680
精华内容 272
关键字:

div塌陷