从零开始学习前端开发 — 7、CSS宽高自适应
一、宽度自适应
语法:width:100%;
注: a)块状元素的默认宽度为100%
b) 当给元素设置宽度为100%时,继承父元素的宽度
c) 通常使用宽度自适应实现通栏效果
二、高度自适应
语法:height:auto;(等同于不给元素设置高度)
三、最小高度,最大高度,最小宽度,最大宽度
1.最小高度
语法: min-height:数值 单位;
注:IE6不识别min-height属性,解决方案如下:
方案一: min-height:100px; _height:100px;
方案二: min-height:100px; height:auto!important; height:100px;
2.最大高度
语法: max-height:数值 单位;
3.最小宽度
语法:min-width:数值 单位;
注:当给块元素设置min-width属性时,需要将块元素转换为display:inline-block;
4.最大宽度
语法:max-width:数值 单位;
注:以上四个属性在IE6及以下版本浏览器中不识别
四、高度塌陷问题(常见的几种清除浮动的方法)
描述:当父元素高度自适应,子元素设置了float,导致父元素高度为0,称为高度塌陷问题
解决方案如下:
1.方案一
给父元素一个固定的高度
缺点:不能实现高度自适应,不够灵活(不推荐使用)
2.方案二
给父元素设置overflow:hidden;
优点:简单,父元素可以高度自适应
缺点:当子元素有定位属性时,由于父元素设置了overflow:hidden;父元素容器之外的部分会被隐藏
3.方案三
在子元素的末尾添加一个空div,并设置样式:
.clear{clear:both;height:0; overflow:hidden;}
注:a)此div只为解决高度塌陷问题,不需要在浏览器中显示,所以设置height:0;
b)IE6不能识别小于10px的容器,所以要加overflow:hidden;来兼容IE6
优点:所有浏览器都支持
缺点:在网页中添加无意义的一个div,会造成代码冗余
4.方案四
通过伪元素的方式解决高度塌陷问题(万能清除浮动法)
父元素:after{
content:".";
display:block;
height:0;
overflow:hidden;
clear:both;
visibility:hidden;
}
注:伪元素的语法
选择器:before{content:"";} 在子元素之前去添加一个伪元素
选择器:after{content:"";} 在子元素之后去添加一个伪元素
伪元素是内联元素
五、元素隐藏不可见的两种方式(display:none;和visibility:hidden的区别)
1.display:none;
元素被隐藏,空间不保留;(看不见,摸不着)
2.visibility:hidden;
元素被隐藏,空间保留;(看不见,摸得着)
注:display:none;和overflow:hidden;的区别
display:none让元素完全隐藏不显示,overflow:hidden;是让元素溢出部分隐藏不可见,没有溢出部分正常显示
六、窗口高度自适应
首先,要设置窗口的高度自适应
html,body{height:100%;}
然后,给元素设置
div{height:100%;}
注:窗口高度自适应适用于屏幕窗口没有内容body为0或内容不满一屏的情况下使用
七、内联元素水平居中设置
如果被设置水平居中的元素是文本,图片等内联元素时,通过给父元素设置text-align:center;实现
八、定宽块状元素水平居中设置
满足定宽,块状元素两个条件的元素,将左右margin设置为auto即可实现元素在水平方向上居中显示
注:a)当给元素设置了float后,左右为auto将会失效
b) 当给元素设置了absolute和fixed后,左右auto将会失效
九、不定宽块状元素水平居中设置
1.给父元素设置以下样式
a)给父元素设置display:table; 将元素转换为表格形式
b) 给父元素设置左右margin为auto
2.给父元素设置:text-align:center;
给子元素设置: display:inline-block;
十、元素在屏幕窗口水平垂直都居中
1.定宽高元素在屏幕窗口水平垂直都居中
元素{
width:value;
height:value;
position:fixed;
left:50%;
top:50%;
margin-left:-width/2 "px";
margin-top:-height/2 "px";
}
2.不定宽高元素在屏幕窗口水平垂直都居中
元素{
position:fixed;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
十一、不定宽高子元素在父元素中水平垂直都居中
1.方案一(高度须给定,否则垂直居中高度拉伸充满父元素)
父元素{position:relative;}
子元素{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
2.方案二
父元素{
display:table-cell;
text-align:center;
vertical-align:middle;
}
注:display:table-cell;将元素转换为表格单元格形式
3.子元素转换成行内块状元素宽高自适应,子元素同级设置高度充满父元素的参照物 且行内块状元素。同级子元素通过设置vertical-align:middle;垂直居中。兼容IE8及更高版本。
更多专业前端知识,请上 【猿2048】www.mk2048.com
从零开始学习前端开发 — 7、CSS宽高自适应相关推荐
- 图片适应窗口_HTMLCSS学习笔记(八)-- 宽高自适应
宽高自适应 网页布局中经常要定义元素的宽和高.但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是pc自适应. 自适应的优点: 元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以 ...
- css 宽高自适应的div 元素 如何居中 垂直居中
在我们 编写css 样式的时候经常会遇见一个问题 那就是一个 宽高未知的元素 要让他 垂直居中如何实现这个呢 下面是我常用的两种方法 上代码 下面的是 结构代码 <div class=" ...
- css宽高自适应布局,实现Sticky Footer的三种布局方式
宽度自适应布局: 1.使用场景: 一侧(左侧或者右侧)为固定的导航或者菜单栏,另一侧将会随着浏览器的缩放而自适应改变其大小.这种布局结构可用于顶层布局结构亦可用于某个局部功能块,常见于各种web系统( ...
- 从零开始学习前端开发 — 2、CSS基础
一.CSS简介 1.CSS是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表.特点:实现了表现与结构相分离 2.css基础语法 css是由选择符和声明两大部分组成 ...
- 从零开始学习前端开发 — 1、HTML基础
一.web标准 web标准-网页制作的标准,它是由一系列标准组成的,主要包含三个方面:结构(html,xhtml),表现(css),行为(javascript) 注:结构和表现的标准由w3c(万维网联 ...
- 从零开始学习前端开发 — 15、CSS3过渡、动画
一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 e ...
- css控制图片拉伸不变形,css+background实现 图片宽高自适应,拉伸裁剪不变形
图片宽高不固定 ,一样实现自适应,拉伸裁剪不变形,适应各大兼容性. 下面咱们在网上找两张宽高不一样的照片: No.1 ...
- CSS学习笔记八——宽高自适应
宽高自适应 一.宽度自适应 二.高度自适应 三.浮动元素的高度自适应 四.窗口自适应 五.结语 一.宽度自适应 不写宽度或者写 width:auto就表示宽度自适应,可用于横栏或导航栏. 与 widt ...
- 新手如何系统地学习前端开发
借用一段话来开头:古代小说里,高手如云,人们为了生存,要掌握一套保命武功.其中,我最喜欢的是轻功,毕竟三十六计走为上策(狡诈的一笑).说到底,武功和技术一样,都是为了生存.问题是,现实一点来说,一个武 ...
最新文章
- 规格选项表管理之更新规格选项表数据
- 结对编程-Core 第12组 [pb15061359+pb15061351]
- java开发一年多少钱_4年Java程序员:月薪不过3万,就不要拿命换钱了
- 详解C与C++的联系与区别
- SecureCRT 或者 超级终端 始终无法ping通主机
- hihocoder #1465 : 后缀自动机五·重复旋律8
- 前端学习(3146):react-hello-react之getDenvied
- 谷歌浏览器 转方向_转专业 | 希望你们能在岔路口选对自己的路
- 组装r730服务器,戴尔poweredge r730服务器配置及系统安装详解教程
- java hashmap 无序_Map的有序和无序实现类,与Map的排序
- pycharm ubuntu 安装_pycharm使用远程python解释器
- 《上古卷轴5重制版》支线任务
- ansys与solidworks关联失败,将SolidWorks模型导入ansys划分网格总是提示错误
- 传奇世界服务端WIN7简单安装教程
- 图片数据增强的方法——收藏
- [1164]python用numpy计算均值,方差,标准差
- 警告 1 warning C4996: 'scanf': This function or variable may be unsafe. Consider using scanf_s instead
- 23种设计模式——UML类图+简要分析+例题
- matlab中绘制图像
- 以实助实的京东物流,给实体经济带来了什么?