CSS随记
在CSS中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。
注释:float属性不具有继承特性,就是说子元素不会继承父元素的浮动属性。
在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
- clear 属性定义了元素的哪边上不允许出现浮动元素。不论哪一种改变,最终结果都一样,如果声明为左边或右边清除,会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。
- position 这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对absolute或fixed流中的默认位置偏移.
注释:
relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。
absolute(绝对定位) 脱离文档流,通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute元素将 以body坐标原点进行定位,可以通过z-index进行层次分级。
fixed(固定定位) 这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
- margin:10px 5px 15px 20px;
- 上外边距是 10px
- 右外边距是 5px
- 下外边距是 15px
- 左外边距是 20px
- 当在html中引用外部样式表后,那么在样式表文件中定义的样式就相当于在html头文件中定义的样式了。但事实证明并非如此,它依然存放在定义的文件中被一起下载到客户端。这一点从background-image的url属性定义的实践上也可以清楚地看出,在定义url时,如果是绝对地址当然没什么问题,如果是相对地址,那么,一定要相对style.css所在的路径,而不必考虑即将引用它的html文件的路径。
PS:background-image:url(../pic/logo.jpg)
- background-position:{位置值} 属性设置背景图像的起始位置。
使用百分数定位时,其实是将背景图片的百分比指定的位置和元素的百分比位置对齐。也就是说,百分数定位是改变了背景图和元素的对齐基点。不再像使用像素和关键词定位时,使用背景图和元素的左上角为对齐基点。例如上例的background-position: 100% 50%; 就是将背景图片的100%(right) 50%(center)这个点,和元素的100%(right) 50%(center)这个点对齐.
使用数值需要注意的是,当只有一个数值时,这个值将用于横坐标,纵坐标将默认是50%。
text-indent:-999px;
就是把该元素内的文字移到屏幕外面去,让我们肉眼看不见,有时候是因为如某栏目名称的文字或者logo的文字已经用背景图片代替了,我们不需要眼睛看见那些文字,但是希望搜索引擎可以搜到,就可以用这个把文字“隐藏”的属性。虽然眼睛看不见,但是搜索引擎或者盲人用的软件能知道。
cursor:pointer;
把这个样式的值赋给某一元素后,当鼠标移到该元素上,鼠标变为手的形状。- label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。
- 只添加属性名称该属性就会生效应该使用prop();只存在true/false的属性应该使用prop()。
为什么不直接写宋体,而是这样‘\5b8b\4f53’用?
当你的:网页、css 编码是 utf8 时,某些情况下直接写:宋体、微软雅黑之类的中文字体名字,会出现不能识别导致字体设置失效的问题,如果把字体名字转成对应编码如:‘\5b8b\4f53’,就不会出现这个问题。CSS border-collapse 属性
border-collapse 属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示。
CSS随记的更多相关文章
- css狂记
接着上一篇 html狂记,同样是DIV+CSS传统站点开发,同样只是收集.整理... CSS 背景属性(Background) 属性 描述 CSS background 在一个声明中设置所有的背景属性 ...
- html.css随便记
css 绝对定位:一个元素绝对定位时,浏览器首先将它从流中完全删除,然后浏览器再把这个元素放在属性指定的位置上,对其他元素没有影响 绝对定位要相对于最近的父级元素进行定位 position: ab ...
- div+css布局记扎
实际开发网站过程中边碰壁边积累了一些div+css布局相关的小技巧,在这里做一些整理与大家一起探讨.本文章将间歇性更新. 1.div+css布局综述 div+css布局个人观点就是“盒子套盒子”的关系 ...
- CSS 随记
伪类选择符的顺序:L-V-H-A CSS提供了四种元素设置链接的颜色,包括:link.:visited.:hover.:active,它们的声明是有一定顺序的,我们简称这种顺序为L-V-H-A,即li ...
- css随记02布局
布局 二栏布局 利用absolute, margin .container { position: relative; } nav { position: absolute; left: 0px; w ...
- css随记01编辑技巧,背景与边框
代码优化 一个按钮的例子,使其值同比例变化; button{ color: white; background: #58a linear-gradient(#77a0bb, #58a); paddin ...
- css 坑记
1. div 内容超出 (做换行处理) 要注意 white-space属性的运用 设置 div width:100%;(或者固定值) 设置换行 word-break: break-all; 设置 ...
- webstorm之js,css文件压缩
不说废话了,代码压缩是每个网站上线前的必备过程,但由于有时候小的项目或者加急的项目每次都构建一次类似gulp或者grunt等前端部署,实在是大题小做,所以才有了今天这个帖子: 我们会用到yui com ...
- [ZZ] [精彩盘点] TesterHome 社区 2018年 度精华帖
原文地址: https://testerhome.com/topics/17646 相逢即是缘分,总有一篇适合您! 感觉好的请点赞收藏 ,感觉分类不严谨的,欢迎反馈给我! 测试方法&测试管理 ...
随机推荐
- 【Heritrix基础教程之4】开始一个爬虫抓取的全流程代码分析
在创建一个job后,就要开始job的运行,运行的全流程如下: 1.在界面上启动job 2.index.jsp 查看上述页面对应的源代码 <a href='"+request.getCo ...
- 开启MongoDB 脚本和设置window自启
wwchen: D: cd D:\Program Files\MongoDB\Server\3.2\bin mongod --dbpath=D:\mongodb\db----------------- ...
- PHP多种序列化/反序列化的方法 (转载)
1. serialize和unserialize函数 这两个是序列化和反序列化PHP中数据的常用函数. <?php $a = array('a' => 'Apple' ,'b' => ...
- vi常用操作命令
进入vi的命令 vi filename :打开或新建文件,并将光标置于第一行首 vi +n filename :打开文件,并将光标置于第n行首 vi + filename :打开文件,并将光标置于最后 ...
- SIEM思考
https://securosis.com/blog/comments/understanding-and-selecting-siem-log-management-introduction/ ht ...
- Linux 上的数据可视化工具
Linux 上的数据可视化工具 5 种开放源码图形化工具简介 Linux® 上用来实现数据的图形可视化的应用程序有很多,从简单的 2-D 绘图到 3-D 制图,再到科学图形编程和图形模拟.幸运的是,这 ...
- 【LeetCode练习题】Scramble String
Scramble String Given a string s1, we may represent it as a binary tree by partitioning it to two no ...
- MyEclipse中新建JSP(Advanced Template)文件时自动生成的
<meta http-equiv="pragma" content="no-cache"> <meta http-equiv="ca ...
- HDOJ 4417 - Super Mario 线段树or树状数组离线处理..
题意: 同上 题解: 抓着这题作死的搞~~是因为今天练习赛的一道题.SPOJ KQUERY.直到我用最后一种树状数组通过了HDOJ这题后..交SPOJ的才没超时..看排名...时间能排到11名了..有 ...
- python安装完毕后,提示找不到ssl模块的解决方示
python安装完毕后,提示找不到ssl模块: [root@localhost ~]# python2.7.5 Python 2.7.5 (default, Jun 3 2013, 11:08:43) ...