定位的盒子居中显示

★:margin:0 auto;  只能让标准流的盒子居中对齐。

★定位的盒子居中:先左右走父元素盒子的一半50%,在向左走子盒子的一半(margin-left:负值。)

标签包含规范

◆div可以包含所有的标签。

◆p标签不能包含div h1等标签。

◆h1可以包含p,div等标签。

◆行内元素尽量包含行内元素,行内元素不要包含块元素。

规避脱标流

  

◆尽量使用标准流。

◆标准流解决不了的使用浮动。

◆浮动解决不了的使用定位。

图片和文字垂直居中对齐

vertical-align对inline-block最敏感。默认属性是:vertical-align:baseline;

Css可见性

overflow:hidden;   溢出隐藏

visibility:hidden;   隐藏元素    隐藏之后还占据原来的位置。

display:none;      隐藏元素    隐藏之后不占据原来的位置。

Display:block;     元素可见

Display:none  和display:block  常配合js使用。

css之内容移除(网页优化)

◆使用text-indent:-5000em;

◆将元素高度设置为0,使用内边距将盒子撑开,给盒子使用overflow:hidden;将文字隐藏。

 Css精灵图

属性选择器

 emmet快捷键:

emmet是我们在sublime中的一个插件在这个插件中集成很多的快捷键。

1 html:

1.1 生成结构的快捷键:

!+ tab,可以生成html5的结构代码。

1.2 生成id名和类名

标签名.类名#id名+tab

没有标签名.类名+tab ==>div

1.3 生成同级元素:

标签名+标签名+标签名 “+”tab

1.4 生成子类标签

标签名>子标签名>子标签名>子标签名+tab

标签名>子标签名>子标签名>子标签名^^子标签名+tab

1.5 带固定数量的标签:

ul>li*+tab

1.6 带有序号名称

ul>li.abc$* + tab

1.1 生成带有内容的标签:

ul>li>a{item}*5

2. css

width:30px==>w30+tab

  Height:30px==>h30+tab

  Margin:30px==>mg30+tab

Padding:30px==> pd30+tab

Line-height:12px==>lh12px+tab

Background==>bg+tab

8.css内容移出与精灵图的更多相关文章

  1. web前端sprite,精灵图,雪碧图

    css sprite 俗称:精灵图,雪碧图,指将整个页面不同的图片or图标合并在一张图上:优点:使用CSS Sprite 可以减少网络请求,提高网页加载性能,不会出现网页上端加载完毕下面还在加载中这一 ...

  2. CSS.05 -- 规避脱标 定位的盒子居中、CSS标签规范、溢出隐藏、内容移除(网页优化)、CSS精灵图

    规避脱标   定位的盒子居中显示 Margin:0 auto : 只能让标准流的盒子居中对齐 当A是B的父系,B可以使用 margin-left:auto: 来获得相当于定位right:0:的效果 M ...

  3. CSS入门(背景各种属性的详解、垂直居中和过渡效果的详解、渐变效果的简单讲解、雪碧图和精灵图)

    一.各种背景属性 1.background-image 属性为元素设置背景图像. 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距. 默认地,背景图像位于元素的左上角,并在水平和垂直方 ...

  4. CSS背景和精灵图

    如何设置背景图片? 1.在CSS中有个叫做background-image:url():的属性,就是专门用于设置背景图片的. 2.注意点: 1)图片的地址必须放在url()中,图片的地址可以是本地的地 ...

  5. 第9天:CSS精灵图

    今天重点学习了CSS精灵图. "CSS精灵",英语css sprite,所以也叫做"CSS雪碧"技术.是一种CSS图像合并技术,该方法是将小图标和背景图像合并到 ...

  6. Css - 精灵图

    Css - 精灵图css sprite 一个页面文档上总是会有N多的图标小图片,它们都是以背景图的方式嵌入文档,每个小图片需要一个url的css属性,每个url都指向一个服务器地址的链接,每个链接都代 ...

  7. CSS Spritec下载,精灵图,雪碧图,初探之原理、使用

    CSS Spritec下载,精灵图,雪碧图,初探之原理.使用 关于CSS Sprite CSSSprites在国内很多人叫css精灵雪碧图,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零 ...

  8. Uint 7.文本和字体属性,background,精灵图和3种定位

    一. 文本属性 CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. <!DOCTYPE html> <htm ...

  9. H5 40-CSS精灵图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. mysql 压缩方法

    show global variables like 'innodb_file_format%';alter table t row_format=COMPRESSED;

  2. Django报错:__init__() missing 1 required positional argument: 'on_delete'

    原因: 在django2.0后,定义外键和一对一关系的时候需要加on_delete选项,此参数为了避免两个表里的数据不一致问题,不然会报错:TypeError: __init__() missing ...

  3. CreateToolhelp32Snapshot 以及 EnumProcesses

    RT,请教如何获得Windows任务管理器中所显示的进程列表. CreateToolhelp32Snapshot 以及 EnumProcesses 这些方法我都试过了,但是这两种方法得到的结果和任务管 ...

  4. 专访UI中国认证设计师卤大湿 | 一位UI大师关于UI设计的思考

    现如今,设计师可以说是一个自带光环的Title,很多深藏不漏的UI设计师们都在以自己的方式为产品设计做出贡献,卤大湿便是这其中之一. 精分青年卤大湿,这个在UI中国上是张酷酷的鲁迅头像的UI设计师,是 ...

  5. .net判断当前时间是否在工作时间段内

    整理代码,判断当前时间是否在配置的工作时间段内,代码如下: public static bool getTimeSpan(string _strWorkingDayAM, string _strWor ...

  6. AJAX-URL-HTTP协议-缓存-DOM操作-HTML元素事件

    1.URL 1.URL的作用 用于来表示任意一个资源的位置(互联网上). 协议+主机名+文件目录结构+文件名称 2.详解 格式: <scheme>://<user>:<p ...

  7. one or more

    想到以后如果一直都是这样,那么以后的生活是多么多么可怕啊. 感觉毫无期盼.没有意义. 如果变得理所当然那是多么多么让人害怕的事,吓得让人发抖. 所以在以后漫长的岁月里,还是一个人吧 如果相互看不惯,感 ...

  8. swift - 导航设置总结加深记忆

    一.创建导航     let VC=ViewController()    let navigationC = UINavigationController(rootViewController: V ...

  9. Codeforces 1086 简要题解

    文章目录 A题 B题 C题 D题 E题 传送门 这场比赛原地爆炸了啊!!! 只做了两道. A题 传送门 手贱没关freopenfreopenfreopen于是wawawa了一次,死活调不出错. 题意: ...

  10. JSON_FORCE_OBJECT 数字索引数组 强转对象

    $abc = array('a','b','c','d','e','f','g'); echo '<pre>'; var_dump($abc); echo json_encode($abc ...