134 lines
2.9 KiB
Plaintext
134 lines
2.9 KiB
Plaintext
html , css, javascript (全栈 语言)
|
||
|
||
|
||
css 三种写法：
|
||
|
||
内联写法 优先级最高
|
||
|
||
内部写法
|
||
|
||
外链写法
|
||
|
||
|
||
!important 改变css默认的优先级
|
||
|
||
选择器 {
|
||
css属性名: css属性值
|
||
}
|
||
|
||
// 同时选中
|
||
选择器, 选择器 {
|
||
css属性名: css属性值
|
||
}
|
||
|
||
// 嵌套的意思，后面的选择器是前面选择器的子元素
|
||
选择器 选择器 选择器{
|
||
css属性名: css属性值
|
||
}
|
||
|
||
// 选择同级别标签
|
||
选择器 + 选择器{
|
||
css属性名: css属性值
|
||
}
|
||
|
||
// 选择父元素内部第一层子元素
|
||
选择器 > 选择器{
|
||
css属性名: css属性值
|
||
}
|
||
|
||
|
||
|
||
选择器：
|
||
|
||
class .
|
||
|
||
id #
|
||
|
||
标签选择器
|
||
|
||
通配符符选择器 * 一般用来清除标签的默认样式
|
||
|
||
伪类选择器
|
||
|
||
|
||
盒子模型
|
||
|
||
外边距 margin
|
||
|
||
内边距 padding
|
||
|
||
边框 border
|
||
|
||
border: 边框的粗细 边框的类型 边框的颜色
|
||
|
||
内容 content
|
||
|
||
盒子模型真实宽高的计算规则？？
|
||
|
||
|
||
真实宽高 = 你写的宽高（content） + 边框 + 内边距
|
||
|
||
|
||
box-sizing: border-box; 改变盒子模型的计算规则
|
||
|
||
|
||
|
||
浮动：
|
||
|
||
让元素漂浮起来，可以左右的漂浮移动
|
||
|
||
子元素 漂浮后，父容器将没有高度，那么父容器后面div将挤上去
|
||
解决方案：
|
||
1：给父容器设置高度（等于子元素高度）
|
||
2：给父容器设置 overflow: hidden; （让浏览器自动设置父容器的高度）
|
||
3: 给子元素加 clear: both;
|
||
|
||
|
||
定位：
|
||
|
||
为了让元素产生堆叠（重叠），或者放在任意一个位置！
|
||
|
||
|
||
相对定位 relative
|
||
当元素设置 相对定位 后，元素原本位置还在（没有被删除）
|
||
|
||
定位参考对象：
|
||
他原本的位置·
|
||
|
||
绝对定位 absolute
|
||
当元素设置 绝对定位 后，元素原本位置不在，被删除了
|
||
|
||
定位参考对象：
|
||
父元素设置 定位，那么参考父元素的位置（当前位置）
|
||
父元素没有设置 定位，那么参考浏览器边框
|
||
|
||
固定定位 fixed
|
||
当元素设置 固定定位 后，元素原本位置不在，被删除了
|
||
定位参考对象：
|
||
浏览器边框
|
||
|
||
|
||
calc() 支持写数学表达式
|
||
|
||
元素垂直水平居中的N中场景和N方法：
|
||
|
||
定位
|
||
水平 子元素 left 50% , margin-left: -子元素宽度一半
|
||
垂直 子元素 top 50% , margin-top: -子元素高度一半
|
||
|
||
|
||
块标签内部的文字需要：
|
||
垂直（单行文字） line-height: 数值等于父元素的高度
|
||
多行文字：padding-top: 8.86px; 父元素高度一半 - 内部子元素高度一半
|
||
水平居中 text-align: center;
|
||
|
||
|
||
块标签内部的块标签需要：
|
||
垂直: 给父元素设置 padding-top: (父元素高度 - 子元素高度) / 2 ，还需要加上： box-sizing: border-box;
|
||
水平：margin: 0 auto;
|
||
|
||
|
||
两个行内标签设置垂直方向对象：
|
||
高度高的元素：vertical-align: middle;
|
||
|