从零开始学习前端开发 — 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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361638.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用jOOQ用Java编写SQL

jOOQ是“数据库优先”的类型安全的SQL API,使您可以直观地用Java编写SQL,就像Java编译器本身支持SQL语言一样。 所有数据库模式,表,列,过程和其他对象均作为Java对象提供,可以直接在jOOQ SQL API中使用。 …

Springboot + Mybatis + Ehcache

最近在做一个项目,为处理并发性较差的问题,使用了Mybatis二级缓存 但在多表联合查询的情况下,Mybatis二级缓存是存在着数据脏读的问题的 两天就是在想办法解决这个数据脏读的问题 考虑到简易性、性能、兼容性、可扩展性,我选择了s…

Autowired注解

package com.how2java.pojo;import org.springframework.beans.factory.annotation.Autowired;public class Product {private int id;private String name;Autowired// 等价于 Resource(name"c")private Category category;public int getId() {return id;}public …

UVa 100

今天也算是练习了一下记忆化搜索&#xff0c;这道题也包含很多值得注意的地方 1、 输入的两个数不一定前者比后者大 2、 变换的过程中可能会超出int范围 3、 为了不超时可以作下预处理 #include<iostream>#include<cstring>#include<cstdio>using namesp…

jquery.cookie.js 使用方法

Cookies 定义&#xff1a;让网站服务器把少量数据储存到客户端的硬盘或内存&#xff0c;从客户端的硬盘读取数据的一种技术&#xff1b; 下载与引入:jquery.cookie.js基于jquery&#xff1b;先引入jquery&#xff0c;再引入&#xff1a;jquery.cookie.js&#xff1b;下载&…

BizTalk开发系列(十二) Schema设计之Group与Order

更多内容请查看&#xff1a;BizTalk动手实验系列目录 BizTalk 开发系列 开发BizTalk项目的时候会先约定各系统之间往来的消息格式. 由于BizTalk内部唯一使用XML文档。因此消息的格式为XML Schema(XML Schema 用于描述 XML 文档的结构)。虽然BizTalk提供了对于XML消息的验证功能…

深入理解JavaScript系列(32):设计模式之观察者模式

介绍 观察者模式又叫发布订阅模式&#xff08;Publish/Subscribe&#xff09;&#xff0c;它定义了一种一对多的关系&#xff0c;让多个观察者对象同时监听某一个主题对象&#xff0c;这个主题对象的状态发生变化时就会通知所有的观察者对象&#xff0c;使得它们能够自动更新自…

JAXB众所周知的秘密

介绍 我重新发现了Java提供给大众的库。 当我第一次阅读该规范时&#xff0c;我很困惑&#xff0c;以为我需要所有这些特殊工具来实现。 我最近发现&#xff0c;只需要一些注释和一个POJO。 杰克斯 JAXB代表XML绑定的Java体系结构。 这种体系结构允许开发人员将来自类的数据转…

题解:CF1914E-Game with Marbles

题解&#xff1a;CF1914E-Game with Marbles 事先说明一下&#xff0c;本题解不讲解简单数据范围的算法&#xff0c;因为复杂数据范围的就很简单。 这道题的大体意思是这样的&#xff1a;小A有颜色为i(i1~n)的小球a[i]个&#xff0c;小B有颜色为i(i1~n)的小球b[i]个。现在他们…

【canvas系列】canvas实现“ 简单的Amaziograph效果”--画对称图【强迫症福利】

标题很难引人入胜&#xff0c;先放个效果图好了 如果图片吸引不了你&#xff0c;那我觉得也就没啥看的了。 demo链接&#xff1a; https://win7killer.github.io/demo_set/html_demo/canvas/can_demo/draw_roll_2.html ************************************************* 上…

原生类型的autoboxing和auto-unboxing

原生类型的autoboxing和auto-unboxing 我们知道&#xff0c;在Java中&#xff0c;int,long等原生类型不是一个继承自Object的类&#xff0c;所以相应的&#xff0c;有很多操作我们都不能利用原生类型操作&#xff0c;比如想要把一个整数放入到一个集合中&#xff0c;我们必须首…

jquery ui datepicker 只能选今天以后的日期

$("input[namebegintime],input[nameendtime],input[nameArrivedate]").datepicker({dateFormat:"yy-mm-dd",minDate: new Date()}); 转载于:https://www.cnblogs.com/y0umer/archive/2012/03/02/3839264.html

全部关于测试–第2部分

这是有关测试系列的第二篇文章。 在第一部分中&#xff0c;我解释了在进行测试开发时需要具备的心态。 或者&#xff0c;换句话说&#xff0c;开发可测试的代码。 在这一部分中&#xff0c;我将介绍一些测试方法的技术。 我将描述的技术可以看作是如何将思维定势转化为行动。 …

简化软件操作,提升用户体验

虽然自己一直都是做网站开发的&#xff0c;没做过什么软件开发&#xff0c;但使用过的软件也不算少。渐渐的发现有些软件真的功能强大&#xff0c;操作性太复杂&#xff0c;于是该软件真的变成了所谓的专业软件&#xff0c;只有经过专业培训的人才能使用。问题是如果不是有很特…

原生js实现简单JSONP

JSONP是一种非常常见的实现跨域请求的方法。其基本思想是利用浏览器中可以跨域请求外链的JS文件&#xff0c;利用这一特性实现数据传输。 用原生JS实现JSONP非常简单&#xff0c;无非几点&#xff1a; 1&#xff09;定义一个函数&#xff0c;用于处理接收到的跨域数据。 2&a…

Java 8流:Micro Katas

编程kata是一种练习&#xff0c;可以帮助程序员通过练习和重复练习来磨练自己的技能。 本文是“ 通过Katas进行Java教程 ”系列的一部分。 本文假定读者已经具有Java的经验&#xff0c;熟悉单元测试的基础知识&#xff0c;并且知道如何从他最喜欢的IDE&#xff08;我是Intelli…

Effective Java第七条:避免使用终结方法

第七条&#xff1a;避免使用终结方法 1&#xff0c; 终结方法&#xff08;finalizer&#xff09;会让程序不稳定&#xff0c;性能降低&#xff0c;出现可移植性的问题。 2&#xff0c; Finalizer在c中师析构器&#xff08;destructors&#xff09;的一部分&#xff0c;用作回…

python3基础:字符串、文本文件

字符串&#xff1a; 练习1&#xff1a; str "大胖三百磅不是二百磅陪着一百磅的小胖" print(str.replace("磅", "斤")) # 替换所有 print(str.replace("磅", "斤", 2)) # 替换两次len len(str) # 这句话的字数长度 pri…

[Python][小知识][NO.3] Python 使用系统默认浏览器打开指定URL的网址

1、前言 一般用到的地方&#xff1a; GUI交互界面下&#xff0c;单击某个按钮实现打开指定网址。 某帮助菜单项目&#xff0c;需要跳转网页显示时。 O.O 某XX程序&#xff0c;需要植入网页弹窗广告时... 2、方法 调用 webbrowser 包中的 open 函数即可。 (没安装该包的 CMD命令…

全部关于测试–第1部分

这是三个系列文章中的第一篇。 测试思路 技术技巧 工具和提示 心态 测试代码是需要学习的东西。 需要花费时间来吸收如何做好。 这是一种应该始终练习和改进的技巧。 过去&#xff0c;开发人员没有进行测试&#xff0c;而是检查了他们的代码。 这是一个很好的技巧&#xf…