美文网首页
浮动。布局

浮动。布局

作者: 林筱优 | 来源:发表于2016-12-29 09:08 被阅读0次

布局属性:

float:left/right/none

clear:left/right/both

设置一个元素左浮动时

图文混排效果

导航

设置一个元素右浮动时

"更多"右侧浮动显示

"时间"右侧浮动显示

设置多个元素动,多数用在布局上

两个元素同时左浮

块元素横向显示

两个元素同时右浮(几乎不用)

一个元素左浮    一个元素右浮

布局:流体布局

固定宽度且居中布局**

混合式布局

页面结构:

头部

导航

banner

主体

脚步

****

栏目标题

导航

文章列表

图片列表

布局的第一步:

 1.写全局样式

注:1只要是浮动的元素都会变成块级元素

   2浮动的元素没有宽和高

   3浮动的元素的父元素高度会塌陷(暂时解决高度的方法是:给父元素增加高度)

border-radius:圆角边框

>  >  

<  <

相关文章

  • css经典布局总结

    布局类型 浮动布局 流式布局 定位布局 flex布局 grid布局 布局详解 1.浮动布局。 浮动布局是利用flo...

  • iOS的布局体系-浮动布局MyFloatLayout

    iOS的布局体系-浮动布局MyFloatLayout iOS的布局体系-浮动布局MyFloatLayout

  • 前端开发-常见CSS布局

    常见的两列布局 float浮动布局 flex布局 常见的三列布局 float浮动布局 position定位 fle...

  • CSS的浮动属性

    CSS浮动和清除浮动 1.浮动float div配合float浮动来做页面的布局,浮动最常用的地方就是用来做布局。...

  • CSS布局与居中

    1.左右布局 双浮动|左右布局: 双浮动,左右布局,右边自适应 双浮动: 在子元素下面添加float,在父元素上面...

  • CSS布局套路

    CSS布局 布局套路 浮动布局 宽度百分比浮动布局http://js.jirengu.com/yobiq/1/ed...

  • CSS 布局与居中

    一、常见布局 1. 浮动布局 可以通过盒模型的 float 属性实现浮动布局,使元素脱离文档流,浮动起来。(1)使...

  • 前端面试复习要点

    一、HTML和CSS 页面布局的方法 1、浮动布局(布局简单,兼容性好,但是浮动元素脱离文档流) 2、绝对定位布局...

  • 浅谈CSS关于清除浮动的三种方法

    浅谈CSS关于清除浮动的三种方法 CSS中,因为布局需要,我们常常希望出现一些浮动布局,比如图文环绕。这些浮动布局...

  • CSS 布局实现左边固定宽度,右边占满剩余宽度

    float 浮动 浮动是最普遍实现的方式,但 css 浮动的初衷并不是用于布局的,所以浮动布局迟早会被淘汰,应该作...

网友评论

      本文标题:浮动。布局

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