CSS基础

选择器

优先级：id》类》标签

层叠性

盒子模型

两个盒子区别在于width和height的包不包括padding和border，所以外间距margin不包括在盒子内
而IE改变长宽不会改变content

顺时针方向去记

margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个marign表达父子之间的距离。
不然会一起掉下来，父亲要加border属性

BFC

BFC就是一个独立的容器，不应该受到外部的影响，比如margin塌陷什么的，只计算一个margin-top
一般用visible：hidden解决

行高和列高居中对齐

height: 50px;
line-height: 50px;
min-width: 100px;
text-align: center;

margin: 0 auto;margin:0 auto;是让盒子居中，不是让盒子里的文本居中。文本的居中，要使用text-align:center;

区分 line-height，vertical-height，align-items

行内元素与块级元素

区别：行内元素span 并排但是不能调宽高

转换：display：inline 转成行内 block

关于浮动和清除浮动

1.float：left 向左浮动和向右浮动 贴边对齐
脱离了文本流 和行内以及块级元素无关

2.清除浮动 4种
1）给父元素加高度
2）clear：both margin失效
3）隔墙：内墙和外墙
新设的

在div内还是外，用一个把其撑开
4）overflow：hiddden 推荐使用

3。margin 标准流里垂直会取最大，塌陷；水平不会

相对定位的定位值
left：盒子右移

right：盒子左移

top：盒子下移

bottom：盒子上移

PS：负数表示相反的方向。

子绝父相

/* 第一个值是水平位置，第二个值是垂直 */
background-position: -108px 0px;

我们可以总结成一个公式：

子在父居中
left:50%; margin-left:负的宽度的一半

设置文字颜色

有四种方式
第一种是行内样式，就是给每个标签都添加上样式
<p style="color:red">欢迎来到牛客网</p>
第二种是内嵌式,在html文件内部添加<style>标签
<style>
    p{
        color:red
    }
</style>
第三种是在css文件中写和第二种一样的就OK
第四种是使用js,获取节点，更改颜***r />
let p = document.getElementsByTagName('p')
for(let i = 0;i < p.length;i++){
    p[i].style.color = "red"
}

浮动与清除浮动

浮动:将块级元素类似于div放到一级
float：left/right

清除wrap的浮动可以设置器成为BFC

float不设置成none;
position设置成absolute或者fixed;
overflow不设置成visible; hidden
display设置成inline-block

本题解法有多种； 在此我给出常用的几种。（就直接给“代码+分析”）

第一种：在style中，给父元素添加：overflow:hidden; 缺陷：假如父元素有需要溢出的元素显示，当父元素设置了overflow：hidden后，会导致这些溢出的元素内容无法正常显示。

第二种： 给类名wrap添加一个div子元素,然后给这个元素在style中设置"clear:left"; clear：left的作用是 清除左侧内容的浮动效果。

第三种：双伪元素法（个人比较推荐） 在style中父元素，给父元素添加伪元素 代码： .wrap::after { /*补全代码*/ content: ''; display: block; clear: both; } ```c 元素类别 水平居中 垂直居中 行内元素 text-align:center line-height: 外层盒子高度 块级元素 margin: 0 auto position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); } ```

隐藏元素

1.display：none
2.visibility：hidden 不隐藏字节流

外边界折叠，使段落间距一致

如果想要清除两个盒子之间的外边距折叠，可以给目标盒子设置以下属性：

1. display: inline-block
2. float属性值不是"none"的元素
3. 绝对定位
   现在给类名为"bottom"的盒子设置"position"属性为"absolute"，失效