首页 > 其他分享 >08-CSS中的宽高自适应

08-CSS中的宽高自适应

时间:2023-05-11 20:15:12浏览次数:28  
标签:高自 min 08 元素 高度 height 适应 CSS

CSS 中的宽高自适应

什么是自适应

不同大小设备呈现同样的页面效果,只是文字、图片等的大小不一样,但是相对位置一样

CSS 中的宽高

宽高的默认值

宽度的默认值100%,就是和父级元素等宽
高度的默认值auto,将由它的子元素的高来决定,也就是说会子元素会撑开父级元素

宽高的最值

宽度的最大值 max-width
宽度的最小值 min-width
高度的最大值 max-height
高度的最小值 min-height
注意:IE6及以下版本不识别该组属性

微信聊天案例

宽高的自适应

1、非浮动元素的父元素高度自适应
	不设置高度,高度默认由子元素内容撑开 height: auto;
	通过最小高度实现高度自适应 min-height:___px;

	height: auto; min-height:___px;

2、浮动元素的父元素高度自适应(触发BFC)

设置全屏页面

html,body {
	height: 100%;
}

标签:高自,min,08,元素,高度,height,适应,CSS
From: https://www.cnblogs.com/fszj/p/17392083.html

相关文章

  • 07-CSS中的定位
    CSS中的定位HTML页面的文档流1、标准文档流标准文档流指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式当前面内容发生了变化,后面的内容位置也会随着发生变化2、留存弊端无论多么复杂的布局,其基本出发点均是:“如何在一行显示多......
  • 06-CSS中的盒模型
    CSS中的盒模型什么是盒模型(BoxModel)?盒模型是css布局的基石,它规定了网页元素如何显示以及元素间相互关系可以把所有的HTML元素都看作是一个盒子,它包括:边距、边框、填充以及实际内容 Margin(外边距)-清除边框外的区域,外边距是透明的。 Border(边框)-围绕在内边距和内容......
  • 05-CSS中的浮动
    CSS中的浮动HTML页面的文档流1、标准文档流---面试题 标准文档流指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式 当前面内容发生了变化,后面的内容位置也会随着发生变化2、留存弊端 无论多么复杂的布局,其基本出发点均是:“如何在一行显示多个div......
  • 04-CSS基础
    CSS基础什么是CSSCSS指层叠样式表(CascadingStyleSheets)WEB标准中的表现标准语言简单说就是如何修饰网页信息的显示样式目前推荐遵循的是W3C发布的CSS3.01998年5月21日由w3C正式推出的css2.1CSS的语法 由两个主要的部分构成:选择器,以及一条或多条声明 选择......
  • [NOIP2008 提高组] 笨小猴
    [NOIP2008提高组]笨小猴题目描述笨小猴的词汇量很小,所以每次做英语选择题的时候都很头疼。但是他找到了一种方法,经试验证明,用这种方法去选择选项的时候选对的几率非常大!这种方法的具体描述如下:假设\(\text{maxn}\)是单词中出现次数最多的字母的出现次数,\(\text{minn}\)是......
  • leetcode 1084 销售分析III
    leetcode1084销售分析IIIselectdistinctp.product_id,p.product_namefromProductpleftjoinSalessonp.product_id=s.product_idwheres.product_idnotin(selectproduct_idfromSaleswheresale_date<'2019-01-01'orsale_d......
  • ASEMI代理HMC408LP3ETR原装ADI车规级HMC408LP3ETR
    编辑:llASEMI代理HMC408LP3ETR原装ADI车规级HMC408LP3ETR型号:HMC408LP3ETR品牌:ADI/亚德诺封装:QFN-16批号:2023+引脚数量:16工作温度:-40°C~85°C安装类型:表面贴装型HMC408LP3ETR汽车芯片HMC408LP3ETR特性HMC408LP3和HMC408LP3E的频率为5.1-5.9GHz高效GaAs-InGaP异质结......
  • CSS
    1.单位单位:px:如果我们将一个图片放大的话,我们会发现一个图片是有一个一个的小色块构成的,这一个小色块就是一个像素,也就是1px,对于不同的显示器来说一个像素的大小是不同的。百分比:也可以使用一个百分数来表示一个大小,百分比是相对于父元素来说的。em:基于字体大小的倍数 2.属性wi......
  • CSS :root的使用
    :root这个CSS伪类匹配文档树的根元素。对于HTML来说,:root表示<html>元素,除了优先级更高之外,与html选择器相同。所有主流浏览器均支持:root选择器,除了IE8及更早的版本。在声明全局CSS变量时:root会很有用。CSS变量(--*)带有前缀--的属性名,比如--example,表示的是带......
  • css
    css:级联样式表css定义:修饰网页(html在w3c中是结构化,css在w3c中就是表现化)修饰效果的种类:字体大小,颜色,高度,宽度等等css应用:一般用于对网页的效果进行修饰美化的工作css发展史1996发布css1.02010发布了css3.0沿用至今 ......