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
🐳 作者:hiszm 📢 版权:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,万分感谢。 💬 留言:同时 , 如果文中有什么错误,欢迎指出。以免更多的人被误导。 |
![]() |