美文网首页
学习笔记(盒子模型)

学习笔记(盒子模型)

作者: 乳酸菌_c966 | 来源:发表于2017-10-14 14:22 被阅读0次

盒子模型初步

盒子模型

margin:0 auto;让一个盒子在其父盒子中水平居中

盒子的两种初始状态

1.类似div的盒子一个盒子自动占据一行
特点:可以设置固定的宽高,margin,padding。
2.类似span盒子一个盒子中的内容会跟同类的盒子并排在一行出现-----类似文字的表现特性。
特点:宽高不能设定,而是由其内容“撑出”,margin和padding没有上下方面的表现。

布局初步

1, 将“当前版面”以视觉上界限明显的方式进行划分若干个区块,划分只用两种方式:
a) 上下结构:此时,只要使用若干个盒子,自然就是上下结构,无需其他设置。
b) 左右结构:此时使用若干个盒子,并进行相应的浮动,通常的模式:
i. 2个盒子:一左一右
ii. 3个盒子:两左一右或两右一左,或一边倒。
iii. 更多盒子:通常一边倒。

浮动

则最好总结:布局需要左右排列,左右排列需要浮动,浮动需要修正其破坏效果——让父盒子合理包住其子盒子。
1, 给父盒子设置一个固定的高度——通常设计时已知高度且不回改变的时候。
2, 给父盒子的内部最末尾加一个清除浮动的空盒子,如下:<div style=”clear:both”></div>
3, 给父盒子设置一个css属性:overflow:hidden;

相关文章

  • CSS盒子模型

    CSS盒子模型 1.盒子模型 页面布局要学习三大核心,盒子模型,浮动和定位,学习好盒子模型能非常好的帮助我们布局页...

  • 04-CSS盒模型

    学习目标 1、认识盒子模型2、盒子模型的组成部分3、学习盒子模型的相关元素 margin padding 一、认识...

  • 学习笔记(盒子模型)

    盒子模型初步 margin:0 auto;让一个盒子在其父盒子中水平居中 盒子的两种初始状态 1.类似div的盒子...

  • 盒子模型

    学习笔记(二):盒子模型 对于这部分,在CSS样式中,我从刷慕课网开始,就是有点懵的。对于各种模型:流动模型、浮动...

  • 前端盒子模型学习

    内容概要 本文主要学习盒子模型,以及两种盒子模型有什么区别,如何使用,如何变化。 盒子模型 CSS中的盒子模型就是...

  • 十六、盒子模型

    一、盒子模型 页面布局要学习三大核心,盒子模型,浮动和定位。学习好盒子模型能非常好的帮助我们布局页面。、 1.1 ...

  • 盒子模型

    1.盒子模型 页面布局要学习三大核心,盒子模型,浮动和定位。学习好盒子模型能非常好的帮助我们布局页面。 网页布局过...

  • 【Web前端】3.0 CSS(下)——盒子模型

    css学习三大重点: css 盒子模型 、 浮动 、 定位 div是典型的盒子类型,但是盒子模型包括很多...

  • CSS:盒子模型(box)

    盒子模型(CSS 重点) css 学习三大重点: css 盒子模型 、 浮动 、 定位 主题思路: 目标...

  • 面试题(DAT)

    1.什么是盒子模型?盒子模型有两种,标准盒子模型和IE盒子模型。标准盒子模型:width = content + ...

网友评论

      本文标题:学习笔记(盒子模型)

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