CSS学习笔记(float和盒子模型)

1、当元素或者是它的包裹层设置了绝对定位或者是浮动,那么margin:0 auto;自动居中的效果就不会实现。

2、盒子模型的三位立体结构图中从第一层到第五层依次为:border、content+padding、background-image、background-color、margin。

3、

设置了浮动属性(float)的元素:
1、会向指定方向(left或right)一直移动,直到容器边缘;
2、处于标准文档流中;
3、若不设置宽高,则以内容的宽高为准;
4、仅对紧邻的后续元素造成影响;

4、
清除浮动的常用方法
1、clear属性-常用clear:both;2、clear:left,或者clear:right; 清除元素左侧或右侧的浮动
3、同时设置width:100%(或固定宽度)+overflow:hidden;也是可以清除浮动的。一般给受到浮动的元素设定的。
p{width:100%; overflow:hidden}或p{width:both}4、在浮动元素的紧邻后续块元素之前加一个空标签(不推荐使用)
如果父包含层没有设置浮动,子包含层设置浮动,会对子包含层的父包含层和父包含层后面的会计元素产生影响!!所以要对父包含层设置清除浮动影响。
当父包含快缩成一条是,用clear:both清除浮动方法是无效的,clear:both一般用于紧邻后面的元素的清除浮动。
这种情况使用overflow:hidden会有效,
overflow:hidden 用来清除影响float对父级元素的浮动影响
clear:both;用来清除float对后面元素的浮动影响
 
时间: 2024-11-07 03:09:38

CSS学习笔记(float和盒子模型)的相关文章

CSS基础学习十五:盒子模型补充之外边距合并

今天继续接着CSS盒子模型补充,CSS基础学习十三:盒子模型和CSS基础学习十四:盒子模型补充之display属 性设置都是介绍了盒子模型中的内容概括.开始今天的主题:外边距合并. 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合 并的外边距的高度中的较大者. (1)外边距合并 外边距合并叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,外 边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的

CSS学习笔记09 简单理解BFC

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC</title> 6 <style type="text/css"> 7 .div1 {background-color: #FCE38A; width: 200px; height: 100px;}

CSS学习笔记总结和技巧

跟叶老师说项目,他叫我写一个静态首页,看起来挺简单的,但是下手才发现在真的不会怎么下手啊,什么模型啊模块啊都不懂,写毛线啊!! 如图:页面下拉还有侧栏,中间内容等. 可是答应跟老师做了,不能怂啊,于是硬着头皮,花两三天看在慕课网上学习Bootstrap(讲得挺好的,建议大白去看一下),其实我刚看完不久,里面很多东西其实作者都总结得很不错,还有演示. 收获很多,打算再看一下HTML的div+css布局,花一两天时间就可以写完那个界面.就是这么自信,哈哈哈~ 不逼自己一把,你永远不知道自己有多优秀.

css学习笔记三

定位: position:absolute; 绝对定位:设置该属性会脱离文档流,没有浮动效果,下面块会与上面重合.默认情况下,设置了绝对定位的块,它的top.left是相对于浏览器.当一个元素的父元素设置了绝对定位的时候,该元素在设置定位的时候(绝对.相对.固定),该元素的top和left相对的是父元素. position:relative; 相对定位:设置该属性不会脱离文档流,浮动有效果,设置了相对元素的块,不管它的父元素是否有定位,它的top,lef始终相对于它的父元素. 只有设置了定位的块

css 学习笔记 一

 css学习笔记1 1.选择特定元素的选择符: 上下文选择符 标签1 标签2 {声明}      其中标签2是要选择的目标,而只有在标签1是其祖先元素(不一定是父元素)的情况下才会被选中.     css代码: body代码: 理解:section标签 article标签就属于上下文的关系,即article为section的后代,只有应用了section的样式,才能应用article的样式.注意:继承关系中的空格问题,有空格的表示祖先与后代的关系,css写法,body的代码为,说明页面样式表文件

CSS(三)解析盒子模型的浮动

上篇博客遗留了浮动和定位两个问题,只是对他们进行了简单的描述,今天仔细透透他们的底细,此篇为浮动篇. 浮动在这个CSS排版流行的年代发挥着越来越重要的作用,如同aline对定位网页元素的重要性一样,但它比aline更加功能强大. float主要功能是帮助对象在网页中对齐的,通过不同的命令使对象左右浮动,直到遇到border.padding.margin或其他对象边缘为止.别看这简单的浮动,却可以为我们的排版设计出各种靓丽的风格,下面介绍几种. 我把它们归为了以下两大类:普通浮动和嵌套浮动. 普通

css学习笔记四

广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作(二列浮动布局) 3:w3cschool静态页面制作 4:垂直菜单,水平菜单(li设置float),圆角菜单(利用背景图片), 鼠标移上去菜单高度变化(margin-top以及line-height), 鼠标移上去菜单宽度变化 (用jq写是利用hover和hide,用原生js写是文档加载完,遍历li里

html+css学习笔记 3[浮动]

inline-block/float(浮动) 回顾:inline-block 特性:      1.块在一排显示 2.内联支持宽高 3.默认内容撑开宽度 4.标签之间的换行间隙被解析(问题) 5.ie6 ie7不支持块属性标签的inline-block(问题) float浮动: 1.块在一排显示     2.内联支持宽高     3.默认内容撑开宽度      4.脱离文档流     5.提升层级半层 文本流 float:left | right | none | inherit; 文档流是文档

html+css学习笔记 4[定位]

如何让图1中的div2移动到如图2上的位置: 思路:哪些css命令能够影响盒子显示的位置呢? relative相对定位/定位偏移量 position:relative;  相对定位         a.不影响元素本身的特性: b.不使元素脱离文档流: c.如果没有定位偏移量,对元素本身没有任何影响: 定位元素位置控制         top/right/bottom/left  定位元素偏移量. absolute绝对定位/定位层级 osition:absolute;  绝对定位 a.使元素完全脱

css学习笔记.1--以校园资讯平台为例

#id .class 这两个是最先要记住的..id是<a id="Sth">中的Sth,class是<ul class="Oth">中的Oth,挺好记得 margin 老记成marign...看来是align害的,介绍是"层的边框以外留的空白"-以下图片来自 这里 如图: 就是说最外层的是margin,最内层的是padding,是盒模型{主要定义四个区域:内容(content).边框距(padding).边界(border