美文网首页
CSS布局基础

CSS布局基础

作者: 小废柴JH | 来源:发表于2019-04-27 09:05 被阅读0次
  1. 块级元素高度由其内部文档流元素的高度总和决定的。
  2. 文档流是文档内元素的流动方向,行内元素从左往右,块级元素从上往下。
  3. 行内元素从左往右流动。如果流动遇到阻碍,换行继续流。
  4. 行内元素,英语字母,则不会分开,会一直往前顶,但是可以使用word-break属性强行使英文分开。
  5. 块级元素每个块占一行,所有的块依次从上往下流。
  6. 可以使用display:inline-block属性把块级元素,一行多个,不推荐使用。使用float-left也可,推荐使用。
  7. 除非不得已,否则不用height和width,会出现bug。
  8. 行内元素不接受宽高。可以使用display:inline-block,把行内元素转换成块级元素,这样就可以了。
  9. 设置padding后,可能会造成在不同设备上值不同,可以设置一下line-height来确定行高。
  10. 块级元素里没有设置高度,就是0;但是不写width,会自适应。
  11. 目前了解到的脱离文档流的三种方法:position:fixed可以脱离文档流,相对于窗口定位;而position:absolute是相对于祖先的第一个position:relative定位;还有就是float。
  12. 写height会出现bug,可以通过不设置height,而去设置line-height,然后再去设置padding。
  13. position取值有static; relative; absolute; fixed; sticky.
  14. 给 display: inline 元素设置宽高是无效的。给 display: inline 元素设置 margin-top margin-bottom 是无效的。
  15. 文档流的英文是 Normal Flow。

相关文章

  • css

    css基础css选择器css常见样式1css常见样式2CSS布局上CSS布局下flex布局塔防小游戏flex布局青...

  • CSS学习资源

    基础篇 CSS 最核心的几个概念 CSS 简写指南 CSS样式基础 CSS样式设置 CSS布局模型 CSS文字排版...

  • 【2016年特别福利】史上最全CSS学习资料大全

    基础篇 CSS 最核心的几个概念 CSS 简写指南 CSS样式基础 CSS样式设置 CSS布局模型 CSS文字排版...

  • 前端学习路径,细化分讲。加深新手对前端技术的认知

    1、web前端基础 HTML+CSS----HTML5+CSS3,包括布局(栅格布局,流动布局,经典的弹性盒布局—...

  • CSS布局基础

    CSS布局基础 前言 本文的阅读对象主要是针对CSS零基础的设计与测试人员,帮助学习者快速了解一些CSS基础布局,...

  • 1.网页布局基础

    网页布局基础 什么是网页布局?网页布局是网页制作的基础(DIV+CSS网页布局) 分类:流式布局,浮动布局,绝对定...

  • CSS高级开发-----BFC(块格式化上下文)

    css布局基础单位 Box : CSS布局的基本单位 Box是CSS布局的对象和基本单位 , 直观点来说 , 就是...

  • 慕课网前端课程学习路线

    基础的 HTML & CSS 《HTML+CSS基础课程》 《从 psd 到 html》 页面布局(多练习) 《如...

  • 前端知识体系

    html基础 css基础 盒模型 BFC 布局(栅格概念、典型布局) js基础 基本数据类型,类型检测, 自动类型...

  • html、css学习笔记(五)

    布局模型是建立在盒模型基础之上在网页中,不同于CSS 布局样式或 CSS 布局模板。 元素有三种基本布局模型:1、...

网友评论

      本文标题:CSS布局基础

      本文链接:https://www.haomeiwen.com/subject/zvrhnqtx.html