110 lines
1.9 KiB
Plaintext
110 lines
1.9 KiB
Plaintext
css 做美化的（层叠样式表）
|
||
|
||
写css三种方式：
|
||
|
||
1：内联写法
|
||
|
||
2: 内部写法
|
||
|
||
css 选择器：
|
||
|
||
标签选择器
|
||
作用：一般用于清除标签的默认样式
|
||
|
||
|
||
class选择器 .
|
||
class="名字"
|
||
|
||
id选择器（不常用） #
|
||
id="名字"
|
||
|
||
区别：
|
||
1：id使用的时候不要出现重复，全局只有一次
|
||
|
||
*（通配符）选择器
|
||
作用：一般用于清除标签的默认样式
|
||
|
||
伪类选择器
|
||
hover
|
||
before after 用于绘制图标，1像素的线条
|
||
:first-child
|
||
:last-child
|
||
:nth-child
|
||
|
||
|
||
选择器 可以合写
|
||
|
||
空格 表示嵌套关系
|
||
+ 表示同级关系
|
||
> 表示嵌套关系
|
||
|
||
|
||
css 优先级
|
||
|
||
3：外链
|
||
|
||
|
||
盒子模型
|
||
|
||
margin 外边距
|
||
|
||
padding 内边距
|
||
|
||
border 边框
|
||
|
||
content 内容
|
||
|
||
盒子模型的宽高计算规则：
|
||
|
||
实际宽高（肉眼看到的） = 你设置的content 宽高 + padding 和 border
|
||
|
||
box-sizing: border-box;
|
||
|
||
改变盒子模型的计算规则：
|
||
|
||
你设置的content 宽高 = padding 和 border + content （适当减小）
|
||
|
||
|
||
浮动
|
||
|
||
目的：让块元素排在一行
|
||
|
||
float: left, right
|
||
|
||
清除浮动
|
||
clear: both;
|
||
|
||
父元素高度怎么来的？
|
||
|
||
1：大部分情况下是被子元素撑开
|
||
2：你自己设置的height
|
||
|
||
问题：
|
||
|
||
如果父元素中的子元素设置了浮动，那么父元素将没有高度 0
|
||
|
||
如何解决：
|
||
|
||
1：手写高度 height 父元素
|
||
2：清除浮动 clear: both; 父元素 下面的那个元素
|
||
3：overflow: hidden; 父元素
|
||
|
||
|
||
display：实现块标签和行标签的相互转换
|
||
inline 转换为行 可以放在一行，不能设置宽高
|
||
block 转换为块 不可以放在一行，可以设置宽高
|
||
inline-block 转换行内块标签 可以放在一行，可以设置宽高
|
||
|
||
font-size: 0
|
||
|
||
|
||
水平居中：
|
||
text-align 块div中内容的对齐方式
|
||
padding-top
|
||
margin: 0 auto; 让块div在其他div中居中
|
||
|
||
垂直对齐：
|
||
line-height 设置单行文字的垂直对齐（数值应该是当前元素的高度）
|
||
padding-top
|
||
|
||
|