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 相逢即是缘分,总有一篇适合您! 感觉好的请点赞收藏 ,感觉分类不严谨的,欢迎反馈给我! 测试方法&测试管理 ...
随机推荐
- [汇编语言]-第八章 div指令,伪指令dd,dup
1- div除法指令 (1) 除数: 有8位和16位两种,在一个寄存器或内存单元中. (2) 被除数: 默认放在AX和DX或AX中 除数为8位, 被除数为16位, 默认在AX中存放. 除数为16位, ...
- Leetcode算法刷题:217和219题 Contains Duplicate
从题目名字就可以看出这两道题是相似的,219是217的加强版 217:Contains Duplicate 题目 给予一个数组,判断是否有重复的元素.如果有就返回True,没有就返回False.以下是 ...
- ZJUTACM(hd1259)
ZJUTACM 点我 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...
- JVM GC之一找出不可达对象并回收
JAVA运行时数据区域 1.程序计数器:当前线程所执行的字节码的行号指示器.一个处理器只会执行一条线程中的指令,为了线程切换后能回复到正确的执行位置,所以每条线程都需要一个独立的计数器.各条线程之间互 ...
- DotNet 资源大全(Awesome最新版)
发表时间:2016-09-20 21:34:58 编辑:机器猫 阅读:136次 目录 API 应用框架(Application Frameworks) 应用模板(Application T ...
- wikioi1688 求逆序对
题目描述 Description 给定一个序列a1,a2,…,an,如果存在i<j并且ai>aj,那么我们称之为逆序对,求逆序对的数目 数据范围:N<=105.Ai<=105. ...
- IIS给网站地址配置成HTTPS的
2.增加网站绑定 3.如果https的URL访问不了,可能是443端口被占用 然后netstat -anono
- 网页前台的iframe控制内部刷新子页
<body> <!--Header--> <uc1:top runat="server" ID="top" /> <! ...
- K-th Number(第k大数)
K-th Number Time Limit: 20000MS Memory Limit: 65536K Total Submissions: 45710 Accepted: 15199 Ca ...
- cocos2d js 怎样动态载入外部图片
官网没有详细样例,仅仅有看api,研究成果例如以下 var that = this; var url = "http://xxxxxx"; cc.loader.loadImg(ur ...