宽高自适应

2021/8/20 23:08:26

本文主要是介绍宽高自适应,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

宽度自适应

width(宽度自适应应用于块级元素)

在网页布局中,给块级元素设置宽度为100%的时候,会自适应到浏览器全屏宽度(通栏效果)

块级元素不设置宽度的情况下,默认宽度为100%

块级不去设置宽度的时候,会和父级等宽

重要:如果当前元素脱离了文档流,元素的宽高大小由自身的内容决定

用到了定位(固定和绝对定位)或者浮动属性一定要给元素添加宽高大小

高度自适应 height

如果不设置容器高度,那么容器就不会显示在浏览器上

如果容器没有设置高度或者设置成auto的时候,高度会根据内容撑开,做到高度自适应

重点:子级元素自适应父级元素的高度

自适应浏览器高度:浏览器宽度默认为100%,高度默认为0 html,body{height:100%}

图片自适应到父级容器:img{width:100%;height:100%} 图片会被拉伸变形

重要的属性:**最小高度 min-height 网站的留言模块

作用:

当盒子没有内容的时候保持一个固定高度(height)

当盒子由内容的时候会根据内容的多少自动撑开盒子的高度(height:auto)

越好用的属性问题越多(兼容问题)

最小高度的兼容问题:只能在高版本浏览器中使用,低版本浏览器不兼容

下划线过滤器 写法:_属性:属性值 表示当前这个属性只能在低版本中使用

!important 最高权重

内联/行内样式表>id>class>标签

写法:属性:属性值 !important

高度塌陷/高度坍塌

造成高度塌陷的原因:父级没有设置高度,子级元素含有浮动属性

父级没有设置高度的原因:父级容器做到自适应

子级元素含有浮动属性:布局需求 脱离文档流 初始位置不存在 父级高度就不会被子级撑开

1.给父级添加高度 height:固定值

优点:从根本上解决了高度塌陷

缺点:不能做到自适应

2.给父级添加overflow:hidden

原理:使用了文本溢出属性,可以触发BFC(块级格式化上下文)在BFC中有一条布局规则(浮动元素也参与高度计算)

优点:好理解 ,可以解决高度坍塌

缺点:如果子级元素有超出父级区域的部分,会被隐藏起来

3.在当前最后一个子级元素后面添加一个任意标签,给这个标签设置clear:both属性

属性的解释:clear清除 left right both

优点:需要解决高度塌陷的时候,写标签和类名就可以

缺点:代码冗余,造成不必要的错误结构

4.万能清除法(只要求会用,不要理解)

用法:在父级上添加一个类名 clear-fix

再给这个类名添加声明

clear-fix::after{

content:‘’;

width:100%;

height:0;

display:block;

overflow:hidden;

clear:both;

visibility: hidden;

}

伪对象/伪元素

1.选择器:after{content:''} 表示在xx之后,必须要和content一起使用

2.选择器:before{content:''}表示在xx之前

3.first-letter 定义第一个文本样式

4.first-line 定义第一行文本样式

隐藏元素的方法

display:none 删除结构

visibility:hidden 删除了在页面中的显示文本 结构还是存在的

overflow:hidden 超出才可以隐藏元素

opacity:0(0~1) 背景颜色

 

面试题:伪类和伪对象(伪元素)的区别是什么?

伪类选择器:hover ,:link,:visited, :active

伪对象/伪元素选择器 ::before, ::after, ::first-letter, ::first-line

总结:两者的区别

1.写法上的区别

伪类:只有一个冒号

伪对象:两个冒号 在css2中两者都是一个冒号,后来为了区分伪类和伪对象的区别,在css3中规定了伪对象书写的时候要用两个冒号

2.功能作用

伪类:只能通过伪类改变元素的样式

伪对象:伪对象可以新增html结构(dom元素)dom元素是虚拟的



这篇关于宽高自适应的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程