清除标签默认格式:
清除所有的html标签的格式,后期如果使用,在重新设置:
*{margin:0;padding:0; }
Body,table,p,ul,li,h1,h2,h3,h4,h5,h6,dd,dl,dt,I,b,a….{margin:0;padding:0; }
网页的布局思想
1. 清除格式
2. 设置页面属性设置 body{ }
body{font-size:14px; font-family:宋体; color:#000000; background-color: #e2e2e2; line-height:150%;}
body{背景颜色/背景图片 文本的大小 文本的颜色 文本的字体 行间距}
3. 把整个页面划分结构
行内元素和块元素
行内元素:输入完标签之后,不是自己占一行,行内元素的宽度和高度是由内容来决定,
宽度和高度width height 不能用
css样式是display:inline;
Span b I u strong a
块元素 :输入完标签之后,自己独占一行,可以设置宽度和高度,width和height
Css样式 display :block;
Div p table ul li ol dl dt dd h1….
块—转换---行内
display:inline;
行内—转换---块
display:block;
display:inline-block; 行内块元素
Body中的代码
Overflow
当内容溢出,如何显示
white-space:normal 规定段落中的文本不进行换行
text-overflow:ellipsis 溢出之后用……显示
hidden; 隐藏
auto;如果盒子装不下,就会出现滚动条(默认)
scroll,无论是否能装下都有滚动条边框
继承
外层元素的样式,会被里面的元素所继承
那些标签可以继承
文本的属性的可以继承 font-size font-family font-weight font-style:italic ; text-decoration:none/underline; color:red;
注意:自己有的属性,不向外继承,不会继承祖先元素的属性
标签选择器 类选择器 id选择器
比喻 1 10 100
复合选择器优先级
Li -------1
.box ul li{ } ----12
.box .one .two ul li{ } ----32
#myid ul li{ }----102
写的越精确,优先级越高
盒子的深入
最外面蓝色的盒子内容区的宽度为1000px,width=1000
红盒子width=500,border=2px padding:5px; margin:10px;
红盒子总的宽度是 =内容区的宽度+边框的宽度+padding+margin(左右)=534px
黑盒子width=400 ,border=2 padding=10px :margin:10px;
400+2+2+10+10+10+10=444px
蓝盒子width>=红盒子+黑盒子
注意:里面所有的值加到一起一定不能大于父盒子的内容区的宽度width
总的宽度=内容区的宽度width+border(左右)+padding(左右)+margin(左右)
如果是上面的结构,正常的文档流,设置margin,如果有叠加取叠加部分的最大值40
如果设置了浮动,不是正常的文档流,要把所有的margin值相加,之间的距离是10+40=50px
盒子定位
Position:定位方式有:static默认 fixed固定 relative相对定位 absolute绝对定位
默认 如果你不设置就是static
坐标:偏离目标元素多远的距离
坐标的属性:
Left:数值;
Right:数值;
Top:数值;
Bottom:数值;
Fixed 固定定位
l 相对于浏览器窗口来进行的定位
l 如果不设置定位坐标,就在原来的位置
l 层级要被普通标签高
l 如果结合定位坐标,就是相对于目标位置的距离
l 设置固定定位之后,一定是块元素
Relative相对定位
保留原来的位置进行定位
l 相对定位占空间
l 如果不结合定位坐标,就是在原来的位置
l 如果结合定位坐标,相对【自身】,作为参考点
l 层级要高于普通的元素
绝对定位(absolute)
脱离了原来的位置进行定位(跟原来的位置不在同一个层面),形成层叠,后面的会把上一个定位的绝对定位给填充上以至于看不到后面的
设置绝对定位,不占空间
设置层级高于普通的元素
不结合定位坐标,就是在原来的位置
最近的有定位(只要是定位就可做参考)的父级进行定位,如果父级没有设置定位,一直往上找,直到找到body,就以body来进行定位,相对于整个窗口来进行定位
如有问题请多多指教!希望给您带来帮助!祝您生活愉快。