HTML5布局之路 整体布局

1.div是一个块元素,块元素默认占据腹肌元素的宽度,由内容撑开高度。

2.外部引入css的时候,可以在第一行加入:
@charset"UTF-8"

3.css的引入:
行内:特殊情况
内部:大型网站的首页,写在头部
外部引入:小型网站

4.css优先级:范围越大,优先级越小
行内 》id 》类 》 标签

5.id一般给js操作用,类名多单词建议用-连接,id用小驼峰

6.样式书写顺序:
显示样式(浮动,定位,展示方式,超出状态以及可视化)
自身样式(宽度高度等)
文本样式
css新样式

7.margin特殊应用:对于有高度的块元素,水平设为auto居中 。

8.当两个快元素均设置纵向外边距的时候,第一个元素的下外边距会和第二个元素的上外边距可能会重合。

9.父子之间用padding,兄弟之间用margin会减少代码量。

10.边框是从两个角,45度延伸,最后两条线的延伸线会交叉成一点。

11.浮动的原因:既能设置宽高,又能够跟其他元素处于同一行。

12.左浮动,从右下开始,右浮动从左下开始,左右浮动互不影响。

13.浮动影响父级高度元素,脱离文档流,影响兄弟元素布局。

14.清理浮动:
a.为接下来的兄弟元素设置clear样式,当下一个元素有顶外边距的时候,设置完clear会它失效,可以让上方的设置下外边距。
b.为当前浮动元素的父级元素添加after伪元素清除浮动:

.clearfix:after {
  content: '\200B', /* 内容,伪元素没有内容不会显示,它是一个零宽度的空格*/
  clear: both;
  display: block;
  height: 0;
}
.clearfix {
  * zoom: 1;
}

它可以写入样式重置的css当中。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,868评论 1 92
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,928评论 0 6
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,241评论 0 8
  • 我看过一个MV, 一个满脸是泪水、眼睛红红、鼻子红红的姑娘, 她用隐忍悲伤的眼睛, 看着过去她和他的故事。 开始总...
    Rose云凉阅读 765评论 0 1
  • 第一次去海边玩的时候,只看到沙滩上密密麻麻的小沙球,只那是沙蟹挖出来的,小小的沙蟹飞奔而去,我两手空空。然后看到有...
    耳聆心阅读 374评论 0 0