宽高自适应

Posted 2021-03-06 xsqlj

1、宽度自适应：

           默认宽度为100%

           width:80%;

2、高度自适应：

   （1）自适应元素高度：height:auto;或者不设置;（是子元素撑开父元素的高度，让内容撑起来）

    （2）元素高度自适应窗口高度：

                             设置方法：html,body{width:100%; height:100%;}
注：如果设置子元素的高度跟随父元素的高度变化而变化，那么父元素必须有高度。

3、最大/小宽高

  最大/小高度：min-height/max-height: ;  

  最大/小宽度：min-width/max-width: ;  

4、问题：父元素不给高度，子元素浮动，会造成父元素高度塌陷

解决方法一：给父元素添加高度   缺点：不灵活

解决方法二：给父级元素添加overflow:hidden;（触发一个BFC）      缺点：定位出去的元素将会被隐藏,看不到

解决方法三：给浮动元素的最后面添加一个空标签（要用块级元素，不用内联元素），空标签的样式：height:0;clear:left/right/both;       效果：  清除浮动（清楚浮动带来的问题，不是不浮动效果给清除）  缺点：代码冗余

解决方法四：visibility:显示/隐藏；    hidden/visible  (隐藏/显示）  

visibility和display的区别：都可以隐藏元素。   visibility：hidden；占据文档流   display:none;脱离文档流

解决方法五：（万能清除法）     .ClearFixed：after{content:" ";width:0;height:0;display:block;clear:both;overflow:hidden;visibility:hidden;}

5、伪对象：

：after{content:" ";}/  ：after{content:url("图片路径");}   伪装一个元素在......之后，可以添加样式

：before{content:" ";}伪装一个元素在......之前，可以添加样式

：first-letter{   }针对于第一个字设置样式，只能用于块级元素，对行级元素和行块级元素无效

：first-line{    }针对于第一行字设置样式，只能用于块级元素，对行级元素和行块级元素无效