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 相逢即是缘分,总有一篇适合您! 感觉好的请点赞收藏 ,感觉分类不严谨的,欢迎反馈给我! 测试方法&测试管理 ...
随机推荐
- git 快速使用(本地仓库同步到远程仓库)
学git一段时间,可惜公司用的是svn,平时少用,又忘了,总结一下,免得下次又得重新学习.得多多用才是正道! 一. 将本地的提交到网上git仓库 1.在git创建仓库 ...
- [转]Linux下转换字符集(UTF8转换)
今天在Linux 下使用 Iconv 命令转换一个UTF8文件时,总是转换不成功.提示: iconv: 未知 0 处的非法输入序列 后来使用 man iconv 查看,还是没发现异常,因为命令格式都是 ...
- PHP文件缓存类
<?php /** * @desc 文件缓存 */ class Cache{ const C_FILE = '/Runtime/'; private $dir = ''; const EXT = ...
- 痛苦的版本对齐(3) cygwin下的路径引用
[续<痛苦的版本对齐(2) 和时间的相关性>]http://www.cnblogs.com/yvivid/p/3541142.html 初步定位,如下告警为.depend文件路径问题导致. ...
- 将一段含有0的字符数组赋给string
string有个成员函数,assign() 可以这样: string str; str.assign(temp, sizeof(temp));
- Oracle监控指标
1.数据文件或数据设备 参考:http://f.dataguru.cn/thread-106901-1-1.html2.数据库日志空间活或回滚段(包括大小.设备.文件及可用率.日志空间竞争情况或回滚段 ...
- 什么是JS事件冒泡
什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个 ...
- Educational Codeforces Round 9
Educational Codeforces Round 9 Longest Subsequence 题目描述:给出一个序列,从中抽出若干个数,使它们的公倍数小于等于\(m\),问最多能抽出多少个数, ...
- [Leetcode][Python]47: Permutations II
# -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 47: Permutations IIhttps://oj.leetcode. ...
- Oracle表空间常用操作
--创建表空间 create tablespace test datafile 'E:\test2_data.dbf' SIZE 20M autoextend on next 5M maxsize 5 ...