CSS基础第五天

1、定位的盒子居中显示

★:margin:0 auto; 只能让标准流的盒子居中对齐。
★定位的盒子居中:先左右走父元素盒子的一半50%,在向左走子盒子的一半(margin-left:负值。)

2、标签包含规范

◆div可以包含所有的标签
◆p标签不能包含div h1等标签
◆h1可以包含p,div等标签
◆行内 元素尽量包含行内元素,行内元素不要包含块元素

3、规避脱标流

尽量使用
标准流解决不了的使用浮动
浮动解决不了的使用定位

margin-left:auto;

4、图片和文字垂直居中对齐

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

5、Css可见性

overflow:hidden; 溢出隐藏
visibility:hidden; 隐藏元素  隐藏之后还占据原来的位置
display:none; 隐藏元素  隐藏之后不占据原来的位置
display:block; 元素可见
display:none和display:block 常配合js使用

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

使用text-indent:-5000em;


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

7、属性选择器

8、emmett快捷键

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

8、html

8.1生成结构的快捷键:

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

8.2、生成ID名和类名

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

8.3、生成同级元素

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

8.4、生成子类标签

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

8.5、带固定数量的标签

ul>li*5+tab

8.6、带有序号名称

ul>li.abc$*3 + tab

8.7、生成带有内容的标签

ul>li>a{item}*5

9、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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,179评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,891评论 32 459
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,454评论 0 5
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,750评论 0 30
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 1,128评论 0 1

友情链接更多精彩内容