美文网首页
2019-02-23css布局定位

2019-02-23css布局定位

作者: 饥人谷_小霾 | 来源:发表于2019-02-24 00:16 被阅读0次

div高度由其内部文档流元素的高度总和决定
特别核心的知识点
什么是文档流
文档内元素的流动方向
1.内联元素从左往右流动如果流动遇到阻碍就换行继续
2.块元素就不从左往右了,每一块都占一行,另起一行从上往下

一个

一个span如果有border,流的过程被截断 一截在上一截在下

如果英文单词很长,不会换行 image.png

element.style {
word-break} 单词可以被分开

3.
div{
display:inline-block;}尽量用float布局

内联元素span的高度

文字的居中不是让两个字的中线居中,

.banner{
height:515px;
}
一旦把高度顶死,就有bug

让banner和nav重叠
1.相对于屏幕固定。脱离文档流
.topNavBar{
position:fixed;
top:0;
left:0;
}
脱离不脱离之影响一个,就是div的高度,body的高度
body的高度不会包含topnavbar,直接从banner开始算


image.png

脱离前后少了80px。topnavbar的高度
如果一个div是fix定位,那他的宽度就不会扩展

width100%也会出现问题,

相关文章

  • 2019-02-23css布局定位

    div高度由其内部文档流元素的高度总和决定特别核心的知识点什么是文档流文档内元素的流动方向1.内联元素从左往右流动...

  • 前端第五天

    前端第五天 目录 文档流 浮动布局 清除浮动 流式布局 定位布局应用 相对定位 绝对定位 固定定位 一、文档流 1...

  • css布局方案

    fixed定位 flex定位 栅格布局

  • 浅析 CSS 布局与定位

    浅析 CSS 布局与定位 较多内容参考:CSS布局与定位入门 一、左右布局 float + clearfix块级元...

  • position布局

    Position布局分为以下几种 static默认布局,没有定位 absolute绝对定位,如果一个元素绝对定位后...

  • css 布局

    预备知识: 定位,尺寸,浮动布局,flex布局,移动端时代 一. 定位:position: relative/a...

  • 控件布局方法

    方法1:相对父布局定位方法2:相对某个控件进行定位(依据id属性) 相对父布局定位: 效果: 相对某个控件进行定位...

  • css布局经典问题

    CSS 定位问题 主要就是经典的绝对定位,相对定位问题。 10个文档学布局:通过十个例子讲解布局,主要涉及相对布局...

  • CSS 布局经典问题初步整理

    CSS 定位问题 主要就是经典的绝对定位,相对定位问题。 10个文档学布局:通过十个例子讲解布局,主要涉及相对布局...

  • web前端之CSS 布局经典问题整理

    CSS 定位问题 主要就是经典的绝对定位,相对定位问题。 10个文档学布局:通过十个例子讲解布局,主要涉及相对布局...

网友评论

      本文标题:2019-02-23css布局定位

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