05005 学习笔记 盒子深入 布局思想 – 恵玩科技

昨日回顾
文字样式:
color:  文字颜色
font-size: 
font-style:
font-weight:
font-family:
text-decoration:  文字修饰:下划线(underline) 中划线  上划线  无(none)
text-indent: 首行缩进
text-align: 文字水平对其
letter-spacing: 字母间距,含中文字间距
word-spacing: 单词间距。
line-height:  行高
vertical-align:  文字垂直对齐
盒子模型:
	margin:外边距:
	border:边框
	padding:内边距
	内容区:width,height
	 
如果盒子上下放置,则可以直接实现。
如果盒子要想实现左右放置,则需要进行浮动:
float:left:
float:right:
则此时需要对外层盒子(父盒子)进行高度处理:
1,	设定固定高度
2,	清除浮动以获得自然高度:
a)	给父盒子设置:overflow:hidden
b)	给父盒子额外添加一个清除浮动的空div

布局思想:
	我们的整个网页无非是一级一级往下分割的过程,分隔只有两个模式:
1,	上下分割:只要使用几个div,自然就分开了
2,	左右分割:需要使用几个div并对他们进行浮动处理。
a)	分为2个:通常是一左一右进行浮动
b)	分为3个:通常是两左一右浮动,也可也两右一左浮动。
c)	如果更多,通常是往一个方向浮动
3,	对浮动元素,我们需要对其父盒子进行高度的特别处理:
a)	设定固定高度:使其能够包住子盒子
b)	清除浮动以获得自然高度:
i.	给父盒子设置:overflow:hidden
ii.	给父盒子额外添加一个清除浮动的空div

overflow: hidden的两个用处:
1,如果一个盒子设定的固定宽高,则其overflow会使其内部的盒子(如果超出了该盒子的边界)超出部分不可见(hidden含义).
2,如果一个盒子没有设定固定宽高,且其子盒子有浮动,则其本身会获得“自然高度”,这就是所谓的“清除浮动的效果。

页面的css初始化
在html的原始表现上,实际上每个浏览器或多或少总会有差别。
我们的目标是:我们开发的网页应该在用户面前(不管是用什么浏览器)都表现一致。
则我们的处理办法是:
	将所有html的原始表现(即其“表形功能”)全部去除,其每一个外观表现都由我们自己来使用css设定。
这样,我们就会使用一个“清除原始html格式”的css文件来达到“去除初始样式”的目的。
	我们可以使用link标签来引入一个外部的css文件:
<link rel="stylesheet" type="text/css" href="init.css" />


样式分类:
行内样式: 在标签上使用style属性设定的样式——偶尔临时用。
	<标签  style=”声明1;声明2;…… ” >….</标签>
页内样式:在网页中使用style标签设定的样式:
	<style>
		选择器 {声明1;声明2;…… }
	</style>
外部样式:在网页中使用link标签导入一个外部的css文件:
	<link type=”text/css” rel=”stylesheet” href=”外部css文件url” />
导入样式:在css文件中使用import命令引入一个其他css文件。注意,该命令必须在最前面出现,且分号结束:——不推荐使用。
	@import  url(“其他css文件url”); 

两个样式细节语法:
	格式:标签名.类名 {  声明1;声明2;……   }
	含义:指具有该类名的该标签。

盒子深入
盒子实际占据的“版面区域”其实是由以下几部分构成(从外到里):
	margin(外边距) border(边框) padding(内边距)  内容区(width, height)
一个盒子的实际占宽构成:
	margin-left  +  border-left  +   padding-left  +  width + padding-right + border-right + margin-right
一个盒子的实际占高构成:
	margin-top  +  border-top + padding-top + height + padding- bottom + border- bottom + margin-bottom

margin分解:
	margin-top: 
	margin-right:
	margin-bottom:
	margin-left:
	margin的设定可以有如下形式:
		margin: 5px;	—— 四周的margin都是5px
		margin: 5px  10px;  ——上下为5px,左右为10px
		margin: 5px  10px  15px ——上5px,下15px, 左右为10px。这个语法不推荐
		margin:5px  10px  15px  20px  ——上右下左分别是5,10, 15, 20
	此时,margin其实就是我们常说的“复合属性”
padding分解:
	同上。
border分解:
	border-top: solid 2px blue;	也可以单独写,比如:
		border-top-style: 设定线型,比如 solid, dashed, dotted
		border-top-width: 设定线宽
		border-top-color::设定线颜色
	border-right:
		同上
	border-bottom: 
		同上
	border-left: 
		同上
	还有:
	border-style:设定4个方向的线性,也可以使用1-4个值,含义同margin。
	border-width: 设定4个方向线宽,同上。
	border-color: 设定4个方向线颜色,同上。
	border:线性 线宽  线色:设定4个方向的3个特性。

背景
一个盒子可以设定其背景,背景包括背景颜色和背景图。
background-color: red; 	设定背景颜色;
background-image: url(图片路径);  设定背景图
background-repeat: 设定背景图的重复性,有:repeat-x(x方向重复),repeat-y(y方向重复), no-repeat(不重复);——默认不设置的时候是双向重复的(repeat)
background-pisition: 设定背景图的定位(x和y方向)。其定位的初始位置(原点)就是盒子的左上角。其可以使用左中右(left,center,right) 上中下(top, center,  bottom)来设定其水平和垂直方向的位置。也可以使用具体的数值,比如:5px 10px;含义是离左边5px,离顶部10px
	形式: background-position:  水平位置  垂直位置。
	举例:background-position: center center;     水平和垂直都剧中
		background-position: center  top;		水平居中,垂直靠上
		background-position: 5px  10px;			x方向向右出来5个px,y方向向下出来10个px
		background-position: -5px  -10px; 同上,方向相反
背景的复合属性:
background: 背景颜色  背景图   背景重复性  背景位置。
	注:背景复合属性的几个属性值可以任意给定其中的某些,而其他不给定。

块盒子和行内盒子的相互转换:
块盒子和行内盒子的区别:
	块盒子通常是“较大”的盒子,里面可以放置其他盒子(包括块盒子和行内盒子)以及普通文字。
	行内盒子通常是“较小”的盒子,里面通常不能放其他块盒子,以及普通文字。
	块盒子可以设定其宽高以及其他margin,padding,border属性等等。
	行内盒子不可以设定宽高,其宽高都是由其内部的内容所决定(撑出来的)
	行内盒子还不可以设定其上下边距(margin-top,margin-bottom, padding-top, padding-bottom)

不过,实际上,行内盒子和块盒子并没有本质的区别,无非是他们的一个固有属性的初始值不同罢了:
	对块盒子:display的初始值为:block;
	对行内盒子,display的初始值为:inline;
我们也可以人为将他们设定为另一个值,这就是相互转换问题:
	<span style=”display: block;”>abc </span>	——此时该span就成为块元素(块盒子)了
	<div style=”display: inline;”>abc </div>	——此时该div就成为行内元素(行内盒子)了

列表样式:
	
设定前导符类型:	list-style-type: circle // disc // square //  lower-roman // lower-alpha …..;
设定前导符位置:	list-style-position:inside // outside;——在li里还是外
设定前导图:		list-style-image:url(呱呱/images/wenhao..jpg); ——此时前导符就失效了。
复合属性:			list-style: 前导图 位置 前导符;

浮动的其他特性:

clear:left;		声明本盒子(元素)左边不要出现浮动元素
clear:right;	声明本盒子(元素)右边不要出现浮动元素
clear:both;	声明本盒子(元素)右边不要出现浮动元素





	

 

打赏作者