整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

CSS面试题:CSS实现自适应正方形以及等宽高比矩形

CSS面试题:CSS实现自适应正方形以及等宽高比矩形

里没什么好说的直接上图、上代码:

<!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>CSS实现自适应正方形以及等宽高比矩形</title>
</head>
<style>
  /* * {
    padding: 0;
    margin: 0;
  } */
  html, body {
    height: 100%;
  }

  /* 方法一: */
  .w_son-cont {
    width: 20% ;
    /*基于父级的宽度设置*/
    padding-top: 20% ; /* 或者padding-bottom: 20%; */
    background: red ;
  }


  /* 方法二: 这个方法不能实现正方形; 高度总是要比宽度大几个像素 */
  .w_vw-cont {
    width: 30%;
    height: 30vw;
    background: red;
  }

  /* 方法三:  */
  .w_mar-outer {
    overflow: hidden;
    width: 20%;
    background-color: skyblue;
  }
  .w_mar-outer::after {
    content: '';
    display: block;
    padding-top: 100%; /* margin 百分比相对父元素宽度计算 */
  }
</style>
<body>
  <div class="w_son-cont"></div>
  <div class="w_vw-cont"></div>
  <div class="w_mar-outer"></div>
</body>
</html>

运行结果如图所示:

语言上如何表达:

1. 实现方式有三种:
   1. 设置 宽度 width 、 padding 的top 或者 bottom 为相同的百分比 。
   2. 设置 宽度 width 百分比; 设置 高度 height vw; 且数值相同 。 
      1. 但是此方法不能实现完全的正方形, 只是看上去是一个正方形, 因为此方法得到的结果高度总是要比宽度大几个像素 。
   3. 设置 宽度 width 百分比; 且使用 after 伪元素设置 display 属性为  block, padding-top或者padding-bottom为 100% 。


之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题是 "前端面试题" 的相关专栏; 大概会有200+的文章。

如果对大家有所帮助,可以点个关注、点个赞; 文章会持续打磨 。

有什么想要了解的前端知识, 可以在评论区留言, 会及时分享所相关内容 。

上一篇网页设计。首先感谢大家能对我进行指导,如果大家能讲出更好的解决思路,感激不尽。特别感谢单调D奢华,PEK5SHL,哼哼哈hi等几位朋友给出了自己的观点。我用的是bootstrap的容器解决的。闲话少说,上干货。

下图是前台效果:

HTML代码如下图:

哈哈,就是用的栅格。太low了,有没有?感觉不高大上,那就来点正常的

上图用的是bootstrap的导航插件。就不上代码了。有的同学说媒体查询也可以,时间太短,没有深入研究,就不误导大家了。谢谢大家观赏。

后注:有好的问题,技术可以私信,大家可以共同分享,也欢迎各位投稿。再次感谢。

高自适应

网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素

自动调整,这就是pc自适应。

自适应的优点:

元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以适应在不同设备、不同窗口和不同分辨率下显示。

宽度自适应

元素宽度设置为100%。(块元素宽度默认为100%)

或者不设置宽度(width);(宽度是父元素的宽度)

高度自适应

1)自适应元素高度:height:auto;或者不设置;(是子元素撑开父元素的高度)

?

2)元素高度自适应窗口高度

设置方法:html,body{height:100%;}

注:如果设置子元素的高度跟随父元素的高度变化而变化,那么父元素必须有高度。

最小高度的自适应

min-height属性:最小高度;(IE6浏览器不识别该属性) ?


hack1:min-height:value;_height:value; ?


hack2:min-height:value; height:auto!important;height:value;

浮动元素父元素高度自适应(高度塌陷)

当子元素有浮动并且父元素没有高度的情况下父元素会出现高度塌陷

高度塌陷的解决方法

hack1:给父元素添加声明overflow:hidden;(触发一个BFC)


hack2: 在浮动元素下方添加空div,并给该元素添加 声明:div{clear:both; height:0; overflow:hidden;}


hack3:万能清除浮动法

选择符:after {
	content: "";
	clear: both;
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
}

visibility:hidden/隐藏

visibility:hidden;和display:none;的区别:

visibility:hidden;属性会使对象不可见,但该对象在网页所占的空间没有改变,等于留出了一块空白区域,而 display:none属性会使这个对象彻底消失不显示,也不再占用位置。

对象选择符

1)、::after : 与content属性一起使用,定义在对象后的内容。

语法:选择符::after{content:”文字”;}

选择符::after{content:url(图片路径);}

如:div::after{content:url(logo.jpg);}

div::after{content:"文本内容";}

2)、::before: 与content属性一起使用,定义在对象前 的内容。

div::before{content:"在其前放内容";}

3)、::first-letter 定义对象内第一个字符的样式。

说明:

*(该伪元素只能用于块级元素)

4)、::first-line:定义对象内第一行的样式。

*(该伪元素只能用于块级元素。)

全屏页面



本文转自知乎号:千锋HTML5学院