CSS
美化页面用的,没有网页则毫无用处。
1.行内样式表
之作用于当前行
<p style="background:deeppink;color:white;">我是p标签</p>
2.内部样式表
3.外部样式表
优先级:谁离元素更近,优先显示谁
基础选择器
元素选择器:选择相同标签元素
.类选择器:选择不同标签元素,可重复
# id选择器:定义唯一的一个
*通配符:选中页面中的所有属性,清除浏览器默认样式
后代选择器:父级选择器 子级选择器
群组选择器:,连接多个选择器
优先级:id选择器>类选择器>元素选择器>通配符
盒子
能看到的:内容+内边距+边框
背景的样式会默认延伸到内边距上
设置值(内边距+外边距的方式)
一个值:四边
两个值:上下 左右
三个值:上 右 下 (左边和右边一样)
四个值:上 右 下 左
块元素上下的外边距会合并
边框
边框三要素:宽度 样式 颜色
定位 (配合方向值一起使用才有用)
position
relative 相对定位(不脱离文档流)
absolute 绝对定位,脱离文档流,飘起来了
子父集定位:父元素有设置相对定位,子元素相对父元素定位
相对窗体定位:父元素没有设置相对定位,子元素相对窗体定位
fixed 固定定位,脱离文档流
浮动
让元素按一定的方向进行移动,当遇到其他浮动元素或父级元素或浏览器边界的时候停止移动
clear:
left 我的左边不能浮动元素
right我的右边不能浮动元素
both我的两边不能浮动元素
清除浮动的三种方式:
1.使用clear属性
2.设置父级高度
3.在父级中定义:overflow:hidden
应用场景:被我们使用在让块元素一行显示
行元素一行显示:
1.浮动
2.display:
inline 行内元素
block 块元素
inline-block 行内块:行内与块的特点都存在,和浮动效果(需清除浮 动)几乎一致