HTML_06_css_定位_布局思想_优先级

清除格式

清除所有的html的格式

*{

margin：0；

paddin：0；

}

body，li，div,ul,h1{

margin：0；

paddin：0；

}

网页的布局思想

1，清除格式

2，设置页面属性body{ }

body{

font-size：12px；

font-family：宋体；

color：#000；

background-color：#e2e;

line-height:150%;

}

3,布局格式

行内元素： 输入标签后，不是自己占一个元素

span b i u strong a

块状元素 ：输入完成后，自己独占一行

div p table dl dt dd h1

行内无法设置高度 默认 display：inline；

块状元素可以设置高度 display：block；

两者可以互相转换

img可以设置

内容溢出处理

overflow 内容溢出如何处理

hidden：隐藏

overflow：hidden；

overflow：auto；

、

继承

外层元素的样式，会被里面的元素继承即是覆盖

标签可以被继承 文本的属性可以被继承的有font-size family weight style text-decoration：none/underline color

自己有属性话 就不会继承

优先级

单个选择器

标签 <类< id<行内样式表

复合选择器

写的越精细优先级越高

清除浮动

clear：left；

clear：right；

clear：both；

盒子的深入

注意间距margin padding

定位

position：

static：默认

fixed：固定；做扫码

相对于浏览器窗口的定位

层级比较高

如果不设置坐标，就在原来的位置

left

right

top

bottom

relative： 相对定位

占空间 层级较高

如果不设置坐标，就在原来的位置

设置坐标的话 相对于原来的位置

absolute：绝对定位

设置了绝对定位

不占空间 层级较高

如果不设置坐标，就在原来的位置

设置坐标的话 以祖先元素（祖先也要设置相对定位或者 绝对定位）没有的设置相对定位 最后相当于body