css学习日记
相对偏移 指定left top等属性就能够够完美控制一个元素的位置
如:
position:relative; left:2px;
今天遇到一个很好玩的问题,当两个并排浮动框,当一个框的长度太大时就会把另一个框顶到下一行,这个时候就可以用margin-right:-2px;将右外距设置为负数来解决!
css写表达式控制图片大小,当图片大小大于某一数值时,强制设置其宽 高为指定大小。
img { max-width: 163px; width:expression(this.width > 163 ? "163px":this.width); height:expression(this.width > 163 ? "163px":this.width); }
css <li> 横排显示,并指定宽度的方法。当直接用display:inline 的时候,<li>是横排了,但是指定不了<li>的宽度,这样在<li>有背景图片的时候不能够控制背景图片的偏离位置。这时候可以用display:block; float:left; 这样<li>依然是横排显示,而且还能够指定宽度,能够任意控制背景图片的位置了。
<li>的元素如何垂直对齐
/* 交集选择器 只对P且class为pp1的元素有效 */
p.pp1{ background-color:black; color:White; }
/* 并集选择器 所有选择到的元素都有效 */
.p1, .span1{ background-color:black; color:White; }
/* 直接后代选择器,用空格分开 这种空格为分隔符只影响所有后代元素 */
p b{ font-weight:700; background-color:White; }
/* 大于号,只影响直接后代元素 */
p>b{ font-weight:700; background-color:Maroon; }
一个盒子实际所占有的宽度是由 内容+内边距+外边距+边框组成。 注意border也是要占用宽度的。
border none与hidden都不显示边框,二者效果相同,只是运用在表格中时,hidden可以解决冲突问题。
当一个盒子设置了背景图片,背景图片覆盖的范围是padding和内容组成的范围(IE是这样,Firefox是padding + content _ border),并以padding的左上角为基准点平铺图像。
块级元素(block)会占一行,不管内容满不满一行。如:<ul li> <div>
行内元素(inline)占用的元素仅仅为内容的长度,当多个元素的内容都不满一行时,会自动显示在同一行。如:<span><a>
行内元素之间的水平margin为左边距+右边距(左边元素的margin-left + 右边元素的margin-right)。
块级元素之间的竖直margin为两者的较大者(上面的margin-bottom与下面的margin-top的较大者).
嵌套盒子之间的距离为子元素的margin+父元素的padding
块元素(block element) HTML标签分类明细
* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易,也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单 (只能用来容纳其它块元素)
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
* noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
内联元素(inline element) HTML标签分类明细
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器,定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量
可变元素 HTML标签分类明细
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本
float:inherit;从父元素中继承float属性;
clear:left/right;消除左/右浮动盒子对本盒子的影响。 clear:both;清除两侧浮动对本盒子的影响。
绝对定位position:absolute; 对其他盒子完全没影响,相当于从HTML代码中抽取了出来,会覆盖在其上面。其位置的设定是,当其有定位属性父元素(有position属性,且position属性不为static),以其父属性为定位基准,如果没有则以浏览器为定位基准。当两个块级元素设置为abosolute属性时,可以通过设置z-index属性的值来决定哪一个元素显示i在上面,值大的显示在上面。
!important 提升优先级,使该条语句不会被后面的语句覆盖。
IE6能识别*,但不能识别 !important, IE7能识别*,也能识别!important; FF不能识别*,但能识别!important; 另外再补充一个,下划线"_", IE6支持下划线,IE7和firefox均不支持下划线。
1em表示其父元素中字母m标准宽度。1ex则表示字母x的标准高度。 注意是跟父元素比。
font-size:4em; line-height:1.5; float:left; 这样的设置,可以使第一个字母,占三行显示。
text-indent:2em;可以设置为首行速进2父元素的大小个字位置。
verticla-align 垂直对齐方式,一般只是竖直方向上有效。如果文字放在DIV中不会有效果。如果文字只有一行,只要设置line-height与height一样就可以实现居中对齐。
技巧1 背景颜色设置得与渐变背景图片的最下面颜色一样,就可以实现整个页面无论多长都有和谐的效果。
PNG图片的位越小,文件体积越小。但是8位与24位在IE6中并不支持透明。
通过设置a 的 display:block就可以实现鼠标移入块内就变手形,而不是移动到文字上才行。
为了防止鼠标指针经过时造成边框的跳动,可以再通常状态添加于背景色相同边框,在移动时才变色。
css学习日记的更多相关文章
- 小白CSS学习日记-----杂乱无序记录(3)
1.后代选择器 .antzone li { } class='antzone' 所有子孙后代中的li 2.子选择器 .antzone > li { } class='antzone' 的子一 ...
- 前端学习日记之HTML、CSS 简单总结
前端学习日记之HTML.CSS 简单总结 标签(空格分隔): html css 前端学习日记 html超文本标记语言 一. h标题标签 h1-h7 <!DOCTYPE html> < ...
- Zend Framework学习日记(2)--HelloWorld篇(转)
Zend Framework学习日记(2)--HelloWorld篇 这一篇主要演示如何用zf命令行工具建立一个基于Zend Framework框架的工程,也是我初学Zend Framework的小练 ...
- JavaWeb学习日记----XML基础
1.XML基础: XML全称为eXtensible Markup Language;即可扩展标记型语言,同HTML一样使用标签来操作.它的可扩展性体现在标签可以由自己定义,可以是中文标签. XML用途 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- Linux学习日记-使用EF6 Code First(四)
一.在linux上使用EF 开发环境 VS2013+mono 3.10.0 +EF 6.1.0 先检测一下EF是不是6的 如果不是 请参阅 Linux学习日记-EF6的安装升级(三) 由于我的数据库 ...
- css学习归纳总结(三) 转
原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...
- css学习归纳总结(二) 转
原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...
- css学习归纳总结(一) 转
原文地址:CSS学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00; } 3.属性 ...
随机推荐
- Mac安装zsh oh-my-zsh
我们将安装 zsh ,其拓展功能和主题将由 oh-my-zsh 提供.其中Env.sh 文件用于维护别名(aliases),输出(exports)和路径改变(path changes)等等,以免影响 ...
- forget word _a
forget word a~ 一再,铺音前 1● ab 2● ac 3● ad 4● af 5● ag 6● an 7● as 8● at 9● ap 10● ar
- httpclient 连接参数
http.socket.timeout(读取超时) 套接字毫秒级超时时间(SO_TIMEOUT),这就是等待数据,换句话说,在两个连续的数据包之间最大的闲置时间. 如果超时是0表示无限大的超时时间,即 ...
- TMemo Ctrl + A
http://delphi.about.com/od/adptips2004/a/bltip0804_4.htm Here's how to implement the code for the CT ...
- 破解电视盒 运营商送的,各种型号。通用 TTL 破解电视盒,更新华为悦盒
ZTE ZXV10B860AV1.1 准备工作,准备一个优盘,里面放上当贝桌面的apk 准备ttl线,淘宝10元以内包邮. 把优盘插打盒子上,打开盒子,用ttl连接上,只连gnd tx rx ,V ...
- 拷贝构造函数(define)
1.拷贝构造函数是一种特殊的构造函数,具有单个形参,此形参是对该类型的引用. 当定义一个新对象并用一个同类型的对象对它进行初始化时,将显示使用拷贝构造函数. 2.当将该类型的对象传递给函数或从函数返回 ...
- ESXi6.5中将虚拟机从厚置备转换为精简置备
本文来自:https://blog.csdn.net/wangjingkaibear/article/details/77097041 用ESXi做虚拟化,创建了一个原始虚拟机并安装好系统做好基本设置 ...
- 解决:People下面选择分享可见联系人,选择多个联系人后通过短信分享,短信中只显示一个联系人
问题描述: [操作步骤]:People下导入导出中选择分享可见联系人,选择多个联系人后通过短信分享 [测试结果]:短信中只能显示一个联系人 [预期结果]:可以显示多个联系人 经过代码分析,从compo ...
- git的时候 WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!
更改Ubuntu服务器的时候,提交git出错: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ WARNING: REMOTE ...
- 降低版本安装flashPlayer
运行regedit,打开注册表. 搜索flash,找到FlashPlayer文件夹. 打开里面的safeversions,把里面高版本的项目删除就可以了. 安装低版本的并设置不自动更新.