CSS小结
一、
1. css必须写在<head></head>里面的<style></style>里面
2. css 由选择器 + 规则组成, 规则由属性和值组成 ,格式示例:div{color:red;}
3. 常用的选择器有:标签选择器(类型选择器)、class选择器(类选择器)、id选择器、后代选择器、 组合选择器和并列选择器等等
4. class选择器与id选择器的区别是,class可以样式重用,而id不行,因为id就像是人的身份证,是唯一的
5.层居中的要决:1、有宽度 2、左右外补丁要为auto 例如div{width:200px; margin:auto;}
6.边框三要素:颜色 大小 形状 例如 div{border:#F00 1px solid;}
7.高度=行高,字就可以垂直居中 例如div{height:200px; line-height:200px;}
8. 标签还可以分为行内标签和块级标签,行内标签的占用空间取决于内容(例如 a、span),块级标签不管内容多与少都会占用一整行(例如 div、 p)。由于行内标签一般不支持
width、height,所以排版过程中都会用块级标签来布局;如果有需要时,可以将行元素转换为块元素。
9.如果需要块级标签排版在同一行,只需要给它们都加上float:left的规则即可
10.背景图默认会平铺(也叫重复),如果想背景图水平居右,垂直居中,不重复的话,可以写background:url(bg.jpg) right center no-repeat
11.外部文件用<link href="XXX.css" rel="stylesheet" type="text/css" />
12.优先级算法: 选择器的总分数高,优先级就高。 100分/id选择器 10分/class 选择器 1分/标签选择器 分数相等的,后面的覆盖前面的(就近原则)
13.清除浮动有四种常用的方法
1)给父亲层加一个子层<div class="clear"></div> 其中 .clear{clear:both;}
缺点:多一个空节点
2)给父亲层加一个高度
缺点:不适合内容高度不确定的情况
3)给父亲层加一个float属性
缺点:不适合父亲层需要居中的情况
4)给父亲层加 overflow:hidden; _height:1%;
缺点:_height:1%;的写法不符合W3C规范
14.一个标签(容器)与另外一个标签之间的距离,要靠外补丁margin来实现,而一个标签内部如果有多行文本,每行文本之间的距离要靠行高line-height来实现
15.行高的特点是文本的上下空白会相等,因此当一个容器里面只有一行文本,容器的height等于line-height时,文本便可以垂直居中
CSS小结的更多相关文章
- CSS 小结笔记之解决flex布局边框对不齐
在使用flex 进行伸缩布局的时候,经常会给子盒子设置边框,这时经常会出现上下边框对不齐的情况.本篇文章来探讨并解决这个问题. 具体出现的问题如下图所示 具体代码如下 <!DOCTYPE htm ...
- CSS 小结笔记之浮动
在css中float是一个非常好用的属性,float最基本用法是用来做文字环绕型的样式的. 基本用法:float:left | right 例如 <!DOCTYPE html> <h ...
- 2015第10周四-CSS小结
这两天做前台页面发现个人在CSS前端方法很多基础知识都忘了,晚上又搜索学习了下,把相关内容摘录总结. CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector {declara ...
- ASP.NET CSS 小结
1.ASP.NET 引用CSS 1.Site.master里面设置webopt <webopt:bundlereferencerunat="server"path=" ...
- CSS 小结笔记之图标字体(IconFont)
本篇主要介绍一种非常好用的图标大法——图标字体(IconFont). 什么是图标字体?顾名思义,它是一种字体,只不过这个字体显示的并不是具体的文字之类的,而是各种图标. 网站上经常会用到各种图标,之前 ...
- CSS 小结笔记之em
1.为什么使用em em也是css中的一种单位,和px类似.很多人会疑惑为什么有了px之后还要使用em,而且em使用起来相对于px来讲比较麻烦. em主要是应用于弹性布局,下面给出一个小栗子说明em的 ...
- CSS 小结笔记之伸缩布局 (flex)
CSS flex 是一种伸缩布局,之前块级元素布局在同一行,可以通过display或position或float来实现,而本篇介绍一个新的方法——flex(弹性布局). flex 为和模型布局提供了极 ...
- CSS 小结笔记之定位
定位也是Css中一个非常强大的属性.定位主要是用来移动盒子,将其移动到我们想要的位置. 定位分为两部分 1.边偏移 left | right |top |bottom:偏移大小:(边偏移一般制定上就不 ...
- CSS 小结笔记之清除浮动
浮动是一个非常好用的属性,但是有时会出现一些问题,需要进行清除浮动.例如 <!DOCTYPE html> <html lang="en"> <head ...
随机推荐
- 用Maonry如何实现UIScrollView
一,使用UIScrollView 与其他View 布局不同的地方在于, ScrollView的高度/宽度不固定: ScrollView的高度和宽度由其内容决定(即 Scroll View 的 cont ...
- SqlSever基础 select cast 将一个int类型数据转换为char
镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...
- Windows安装Python包下载工具pip遇到的问题
到Python的官网下载get-pip.py文件,然后按照说明进行安装. 在安装过程中,我遇到以下问题: cmd的codepage引起的编码错误,提示65001编码错误,通过chcp 936切换到默认 ...
- hdu 4828 Grids 卡特兰数+逆元
Grids Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others) Problem D ...
- loutsScript 常用代码
1.FTSearch搜索: Set dc=db.Ftsearch("name",0) '0位置为最大的查询数,0为所有匹配的文件 FTSearch必须创建数据库索引 Set doc ...
- T-SQL排名函数
提到排名函数我们首先可能想到的是order by,这个是排序,不是排名,排名需要在前面加个名次序号的,order by是没有这个功能的.还可能会想到identity(1,1),它也给了一个序号,但是不 ...
- [poj2785]4 Values whose Sum is 0(hash或二分)
4 Values whose Sum is 0 Time Limit: 15000MS Memory Limit: 228000K Total Submissions: 19322 Accepted: ...
- LTE Module User Documentation(翻译6)——物理误差模型、MIMO模型、天线模型
LTE用户文档 (如有不当的地方,欢迎指正!) 9 PHY Error Model 物理误差模型包含数据误差模型和下行控制误差模型,两者默认为激活.可以使用 ns-3 属性系统去激活,具体为: ...
- asp.netMVC4(基础知识----传值问题分析)
(1)一般在数据交互的时候,都会涉及到前后台间的相互传值,一般的情况下,方法也有多种,下面就后台定义变量往前台传值: 以下是后台代码: /// <summary> /// 展示举报信息 / ...
- Java、fileless恶意软件威胁桌面安全
工作原理:用户访问一个受侵的网站,不小心下载了最新类型的恶意软件.如果你的杀毒软件运行良好的话,就会阻止下载,至少能够检测到并隔离硬盘上的入侵文件.但是如果硬盘上没有文件监测呢?如果恶意软件只入侵内存 ...