深圳微信网站定制,做网站能赚能去什么公司,电商网站的推广方式,邯郸网站建设xy0310一、宽度自适应
语法#xff1a;width:100%;
注#xff1a; a#xff09;块状元素的默认宽度为100% b) 当给元素设置宽度为100%时#xff0c;继承父元素的宽度 c) 通常使用宽度自适应实现通栏效果 二、高度自适应
语法#xff1a;height:auto;#xff08;等同于不给元…一、宽度自适应
语法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;
bIE6不能识别小于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
