一、盒模型
1.1 盒子的区域
一个盒子的主要属性5个:width、height、padding、border、margin
padding:内边距
border:边框
margin:外边框
1.2 认识width、height
一个盒子的真实占有的宽度:左border+左padding+width+右padding+右border
一个盒子的真实占有的高度:上border+上padding+height+下padding+下border
如果想保持一个盒子的真实占有宽度不变:那么加width要减padding,加padding要减width
高度同理。
6.3 padding
padding 就是内边距。padding的区域有背景颜色,background-color填充的是border以内的所有区域
padding是四个方:两种描述padding的方法。
1)小属性:
padding-top:30px;
padding-right:20px;
padding-bottom:40px;
padding-left:100px;
2)综合属性:
padding:30px 20px 40px 100px;
上 右 下 左
要懂得小属性层叠大属性:
padding:20px;
padding-left:30px;
很多元素都带有默认的padding,比如ul,所以在做网站的时候便于控制,需要清除默认的padding,*效率不高,采用并集选择器罗列所有的标签清除padding(专业的样式表)
1.4border
就是边框。有三要素:粗细,线型,颜色
颜色默认黑色,其他两个如果不写,就显示不出边框。
border:1px dashed red;
dashed:虚线 solid:实线 dotted:圆点
border 属性可以被拆分为两种方式:
1)三要素拆分:
border-width、border-style、border-color
border-width:1px;
border-style:solid;
border-color:red;
等价于:border:1px solid red;
2)方向拆分:
border-top、border-right、border-bottom
二、标准文档流
标准文档流的微观现象:
1)空白折叠现象
2)高矮不齐,底边对齐
3)自动换行
2.1块级元素和行内元素
标签分两种等级:
1)块级元素
霸占一行,不与其他任何元素并列
能接受宽高
如果不设置宽度,宽度将默认为父亲的100%
2) 行内元素
与其他行内元素并排
不能设置宽高,默认就是文字的宽高
1、HTML将标签分为容器级和文本级:
容器级:div h dt dd li 等
文本级:p span b a em u i 等
2、CSS将标签分为块级元素和行内元素:
块级元素:div h dt dd li p等
行内元素:a span em b u i 等
注意:不要将两者混淆!
2.2块级元素和行内元素的相互转换
div {
display:inline;
width:50px;
height:500px;
}
此时,div将变成行内元素,这是将不能设置宽高。
span {
display:block;
width:200px;
height:200px;
}
此时,这个标签可以设置宽高,独占一行。
脱离标准流:css中的三种手段
1)浮动
2)绝对定位
3)固定定位
三、浮动
浮动是css里面布局最多的属性
3.1 浮动的元素脱标
一个span标签不需要转变成块级元素就能设置宽高。一旦一个元素浮动了,就能并排了,并且能设置宽高,不论原来是什么。
span{
float:left;//左浮
width:200px;
height: 200px;
}
3.2浮动的元素相互贴靠
3.3浮动元素有“字围”效果
<div>
<img src="images/1.jpg"/>
</div>
<p>文字文字...文字 </p>
让div浮动,p不浮动,会出现文字围着图片的效果。
3.4 浮动元素的收缩
收缩:一个浮动的元素,如果没有设置width,那么将自动收缩为文字的宽度
比如:
div{
float:left;
background-color:gold;
}
<div>
文字
</div>
这个div浮动了,并且没有设置宽度,那么将自动缩紧为内容的宽度。