CSS相关知识点
1、高和行高也可以撑开盒子,背景图不行。
2、文字若不设置行高,是包含文字的盒子的行高。
4、如果给了定位,但是没有给left,top等值,默认会腾出行内元素、padding的位置,有的时候我们可以使用这些特性,有的时候我们不熟悉的话可能产生bug。
5、较少功能使用较少代码(a代替ui>li>a)
6、如果盒子都是左对齐的话,最后一个盒子在右边的位置不够的话,会掉下来,如果第一个盒子A比第二个盒子B高,那么最后一个盒子C掉下来后跟第二个盒子B左对齐,而不是跟第一个盒子A左对齐。如果最后一个盒子C后面还有一个盒子D的话,D盒子的顶端跟C对齐。(下图 JD logo 是 A 盒子, 搜索框是 B 盒子, 周杰伦的歌是 C 盒子,我的购物车是 D 盒子。)
7、标准流中的文字不会被浮动的盒子盖住。所以一个大盒子中的小盒子要么都浮动要么都不浮动。
8、父盒子高度为0 ,子盒子如果是浮动的话不占位置,下面的标准流盒子将会跑到子盒子下面。
或者使用了定位,父盒子高度为0,然后子绝父相,下面的标准流盒子依然会跑到子盒子下面。
(这个可以做类似京东的侧边栏,如果侧边栏挡住了跑上来的标准流盒子,那么把包含标准流的整个大盒子定位:position: relative ,因为定位的层级高,所以就可以显示标准流的所有内容了。)
9、想要盒子随着界面变大变小,而盒子随着界面的中线能够移动的时候(类似定位/脱标的盒子居中对齐),不要加版心(margin: 0 auto;)。
10、父盒子有高度,但是子盒子太高,父盒子会被撑破;如果父盒子没有高度,那么父盒子会被撑开,是所有子盒子最高的高度。撑开的盒子可能会产生影响。(不要让浮动的盒子超出父盒子)
11、浮动盒子的相互影响,不管是否在一个大盒子里面(蓝盒子是包含在粉红盒子里面的,紫盒子和粉红盒子是并列的)。
12、谷歌浏览器不支持12号以下字体大小。
13、子盒子不占位置,父盒子高度为0,会导致下面的盒子顶上来了。(清除浮动)
14、 curser: pointer; 模拟鼠标小手样式。
15、 <a href=""></a>
如果 href 值为空,刷新页面。
如果 href 值为#,跳转到页面顶端,不刷新页面。
如果 href 值为 javascript:; 或者 javascript:void(0) ,不刷新页面,也不跳转。
16、定位的时候,left 的权限比 right 权限高,top 比 bottom 高,提高权限也没用。
17、图片半透明
opacity:0.4; 优点方便。缺点:里面的内容也会半透明。
CSS3的技术来解决半透明:
background: rgba(0,0,0,0.3);
background: rgba(0,0,0, .3);
18、行高可以继承。
19、如果一个大盒子装的是 li 标签,而且 li 标签是浮动的,如果 li 里面的内容超过了大盒子的话,会有 li 标签掉下来,如何使得所有的 li 标签在一行显示呢?用一个辅助盒子装下所有的 li 标签,然后大盒子只装辅助盒子,这样对于大盒子来说,所有的 li 标签都会在一行显示,即使大盒子很小。而辅助盒子可以使用 ul 来代替,给 ul 一个所有 li 加起来的宽度多一点即可,但是多的一点要少于一个 li 的宽度。
20、行内元素给了定位,不需要转block,只有static, relative定位的时候需要转 block。
21、盒子的border有重叠怎么办,可以往左上移动border的margin来覆盖。
22、background: url("spirit.png") -135px 0;
关于背景の问题:
有时候我发现background后面两个px可以调节位置,有的时候又必须使用left,top等调位置。其实后面的两个px本来就是调位置的,而且调的是整个背景的位置,当背景是整张图片的时候,调节这两个px就可以了,但是精灵图因为需要的只是背景图中的某一个区域,调节这两个px只是将选中的区域移动到定位的原点,然后再使用left,top等将选定的区域调节到定位的具体位置。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
使用C# (.NET Core) 实现命令设计模式 (Command Pattern)
本文的概念内容来自深入浅出设计模式一书. 项目需求 有这样一个可编程的新型遥控器, 它有7个可编程插槽, 每个插槽可连接不同的家用电器设备. 每个插槽对应两个按钮: 开, 关(ON, OFF). 此外还有一个全局的取消按钮(UNDO). 现在客户想使用这个遥控器来控制不同厂家的家用电器, 例如电灯, 热水器, 风扇, 音响等等. 客户提出让我编写一个接口, 可以让这个遥控器控制插在插槽上的一个或一组设备. 看一下目前各家厂商都有哪些家用电器: 问题来了, 这些家用电器并没有共同的标准....几乎各自都有自己的一套控制方法.. 而且以后还要添加很多种家用电器. 设计思路 那就需要考虑一下设计方案了: 首先要考虑分离关注点(Separation of concerns), 遥控器应该可以解释按钮动作并可以发送请求, 但是它不应该了解家用电器和如何开关家用电器等. 但是目前遥控器只能做开关功能, 那么怎么让它去控制电灯或者音响呢? 我们不想让遥控器知道这些具体的家用电器, 更不想写出下面的代码: if slot1 == Light then Light.On() else if slot1 ...
- 下一篇
python面向对象笔记
一、封装(属性/私有方法/公有方法/静态方法/构造函数...) # 定义一个类 class Animal: # 私有成员(用_开头的约定为私有成员 - 注:仅仅是君子协定) _age = 0 # 构造函数 def __init__(self, name): # 建议所有私有成员在这里初始化(不管是已定义的,还是"动态"添加的) self.name = name # 动态添加的私有成员 self._age = 1 # 已经定义好的私有成员 # 静态方法 @staticmethod def eat(): print("Animal can eat food") # 公有方法 def to_string(self): return "name:" + self.name # 私有方法(用_开头的约定为私有方法 - 注:仅仅是君子协定) def _some_method(self): return "this is a private method of :" + self.name # setter示例 def set_age(self, age): if age < 0 or age...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- CentOS关闭SELinux安全模块
- Hadoop3单机部署,实现最简伪集群
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- SpringBoot2全家桶,快速入门学习开发网站教程
- SpringBoot2更换Tomcat为Jetty,小型站点的福音
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- MySQL8.0.19开启GTID主从同步CentOS8
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2整合Redis,开启缓存,提高访问速度