CSS

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 行内块：行内与块的特点都存在，和浮动效果（需清除浮 动）几乎一致