快看点丨大前端html学习06-宽高自适应

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

快看点丨大前端html学习06-宽高自适应

2023-01-10 21:53:24 来源：博客园

一、自适应网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适

二、宽度自适应高度自适应（1）宽度自适应

元素宽度的默认值为auto

【资料图】

(2) 高度自适应

元素高度的默认值 {height:auto;}

三、浮动元素的高度自适应父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷

方法1：给父元素添加声明overflow:hidden;(缺点：会隐藏溢出的元素)

方法2:在浮动元素下方添加空块元素,并给该元素添加声明：clear:both;height:0;overflow:hidden;

（缺点：在结构里增加了空的标签，不利于代码可读性，且降低了浏览器的性能）

方法3:万能清除浮动法

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

(缺点：伪元素选择器在IE7及以下浏览器不识别，所以此方法只能解决IE8 及以上浏览器高度塌陷问题）

四、伪元素1）:after(与content属性一起使用，定义在对象后的内容。)

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

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

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

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

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

4）：first-line:定义对象内第一行文本的样式

五、元素的显示与隐藏和透明隐藏

1、display:none；隐藏后的元素不占页面空间，后面元素上去补位置2、visibility:visible(显示)/hidden(隐藏)隐藏元素，但是隐藏后的元素仍占页面空就按3、opcity:0隐藏元素，占页面空间4、height:0px;/不设置高度隐藏元素可以,不占页面空间,弊端:如果里卖弄有文本的话,文本会留在原来的位置;可以配合font-size:0px/oveflow:hideen/visibility:hideen5、使用缩放====缩放比例为0transform:scale(0)透明

transparent(透明色)===背景rgba(0,0,0,0)====背景 a==alpha透明度0-1 0代表的是透明；1代表的是不透明opacity======透明度的意思这个透明度取值范围0-1；不单纯只透明背景颜色，还能透明内容，文本，图片，边框等等 0===透明 1===不透明IE浏览器的兼容 filter:alpha(opcity=数值) 数值：1-100六、最小最大宽高min-height属性：最小高度；

min-width:最小宽度

max-height:最大高度

max-width:最大宽度

七、窗口自适应盒子根据窗口的大小进行改变

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

八、iframe使用作用：iframe是用来在网页中插入第三方页面，早期的页面使用iframe主要是用于导航栏这种很多页面都相同的部分，这样在切换页面的时候避免重复下载。

语法：

frameborder="1/0" 1代表有框架边框 /0代表无框架边框

滚动条：scrolling="yes/no/auto" yes :有 no:无 auto：自动

表示超链接的目标地址在框架中打开

九、calc()函数的使用calc() 函数：用于动态计算长度值。

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；