css的一些常用知识点

层叠样式表 又叫css，css是对HTML的补充，是对样式和结构的分离便于维护

布局：需要预习一下flex布局

css引入到html的方式有三种：内联样式，内嵌样式，外联样式

注：外联样式，中需要把html与css文件关联需要在title上面用link的rel=''stylesheet'' href="css文件地址"即可

css引入的优先级：内联>内嵌>外联 注：这里的内联就是行内样式 遵循就近原则，需要注意的是css样式的优先级，是需要同一元素的同一属性才能比较其优先级的。

注：class属性如果有多个值 则需要用空格隔开

css中常用选择器：标签选择器 类选择器 id选择器 通配符选择器

注id一般给js用的

选择器的优先级 ：内联样式>id>class>标签（选择器）<通配符选择器 注： 选择器选择的范围越广优先级越低

子代选择器 > 只有儿子才会被选择

后代选择器 空格 子孙代都会被选择

id的命名规则通常使用驼峰命名法

并集选择器：用逗号分隔不同的选择器即可

想要一个div需要有背景色则需要给他们宽高

css的相关属性

文本字体属性：font-size字体大小 font-family 字体样式 （默认微软雅黑）

font-weight 字体粗细 font-style 字体倾斜 color字体颜色（单词 rgb 十六进制 ）

注：rgba（四个值）最后的a是透明度由0到1 0表示完全透明

文本位置属性： 文本对齐方式：text-align 行高：line-height（可以给行内标签加行高）

文本缩进：text-indent：2em；

下划线：text-decoration：underline；中划线：text-decoration：line-through

上划线：text-decoration：overline

元素宽高的单位 px %

注：这里的%是基于父元素的百分之多少

想要页面全部被撑满则需要对html与body都设置成height:100%,之后在其子div中设置width:100% height:100% 即可，其实行原理就是%是基于父亲宽高的百分比，而body与html高度都是由内容撑开的，故想要一个盒子能够占满屏幕故此需要对body与html设置高度为100%

outline: red solid;可设置边框 其边框没有实际宽度

transparent可以在border-color中设置为透明属性

背景属性 background-repeat：；控制背景图片是否平铺，如果是平铺则会用相同的图片铺满整个盒子

background-size：；一般只设置一边的宽or高 用来控制背景图片的大小，因为设置了一边另一边会随机进行等比例改变的

在使用前需要先插入背景图片

background-size：cover；会填满，但是比例不同可能会有些部分缺失；

注：背景图与图片的区别是背景图是个背景可以在图片上加东西，而图片是一个独立的元素

图片固定属性：background-attachemnt:fixed;

注意在html中不给一个盒子设置宽度，该盒子的宽度不为零，其宽度会变为自适应宽度，想要让他的宽度为零必须要明确设置出来其宽度为零，如果不给该盒子设置高度，该盒子的高度是由该盒子内的内容支撑起来的，要让其高度为零则必须要明确写出来

函数如果想要返回多个结果：可以通过返回数组，或者返回一个对象

对背景图片定位：background-position：水平方向 垂直方向注意是反方向的；

使用背景图片的定位的好处（雪碧图）：可以减少请求次数，便于图片的管理 但是放大就会模糊 后面一般用字体图标

布局

盒模型：内容 padding border margin

元素的占用宽度：content+padding+border+margin

盒模型分类：默认的盒模型 ie盒模型（box-sizing：border-box）

背景颜色只作用于内容和内边距

ie盒模型与默认盒模型的区别：ie盒模型向内压缩 ，默认盒模型向外扩张

margin与padding的区别：padding是所有元素都能设置的 margin除了特殊行内标签，其他行内标签上下边距不会生效

父元素加了display：flex ；后其子元素全都会变成块级元素

块级标签上下排列margin会重合 且取其最大值，使用弹性布局可以解决这个问题或者通过浮动解决

如果一个块级父元素嵌套一个块级子元素，子元素的margin-top会作用到父元素上，即父元素移动，子元素不动

解决方法：触发bfc即可 或者引用到弹性布局

布局主要使用flex弹性布局（想要布局找父亲display：flex；)

弹性盒属性：flex-direction：row;默认属性横向布局

flex-wrap:wrap；弹性盒容器变为多行，即第一行如果溢出则会自动换行

上面两个属性简写：flex-flow:row nowrap;第一个属性值确定主轴方向 第二个决定了是否换行

注意：在弹性布局中 最重要的只需关注flex-driection 和 justify-content （控制主轴方向的元素） 与 align-items这个控制侧轴

总结：要布局就找父亲，把父盒子变成弹性容器 display：flex;

之后利用flex-direction：row colum控制主轴的方向

在确定好主轴方向后 即可利用justity-content设置主轴方向的元素位置

而align-items却可以设置侧轴方向的元素位置

如果弹性容器中的元素过多则需要对其换行 则用flex-wrap

设置弹性盒后 对子元素margin:auto;可让其上下左右相对于父亲居中

标签转换：

一般都是行内与块级标签的转换

display：block;inline;img，button等(就是块级行内标签，可设置宽高却不会换行inline-block）

伪元素：两个冒号（虚假的元素，每个标签都可以连接伪元素）

一般用于给元素加符号，就是在一个标签前面加什么内容即可用到伪元素

是天生的行内元素

1..box::after{ 在box后面加一个元素

content: “ ”;

}

伪类：给任意中一种状态加属性

例：.box：hover{ color：red；
}

伪类中常用的状态：

未访问状态 a:link{}

鼠标形状:cursor:pointer;

给儿子加伪类：.father:hover .son{} 这个是鼠标放在father上儿子会发生变化

给兄弟加伪类：.box1:hover + .box2{} 这个放在box1上让兄弟box2发生变化

浮动：文字和图片写一起后对图片浮动可形成文字环绕效果

浮动会导致父元素高度塌陷

解决方法：1.overflow：hidden；触发bfc（块级格式化文档），创建一个独立封闭的盒子。

2.清浮动 加在浮动元素的后面的兄弟元素上 clear：both；注意自己添加的兄弟元素不能是行内元素

margin会让盒子向外扩张，尽量居中的盒子不用margin-left让他强行居中

一般body的子元素让他100%，然后该子元素里面装个盒子定好宽度后让他在该子盒子中居中

隐藏：1.display：none 可以让标签消失 且隐藏后不占位置

但是一般会与overflow：hidden;结合使用且用在父盒子上，防止子元素隐藏后改变父元素的位置

2.opacity：0；设置一个透明度0 让他消失 但是还是会占位置

3. visibility ：hidden；也可以隐藏但是会占据位置

4.还有个用背景色rgba透明 但是背景中的内容不会受到影响

溢出处理：overflow（加在父元素上）

overflow：hidden；子元素溢出的内容隐藏

overflow-x: hidden;

overflow-y: scroll;一起用后子元素溢出时才只有y轴出现滚动条

定位：（每一个定位都有自己的默认基准）

固定定位：position：fixed（他的基准在浏览器窗口）；

sticky（这个固定定位，会让固定的元素随着窗口的宽度与高度而变化）；

定位后必须设置坐标否则不生效

脱离文档流后，其他布局会忽略它，fixed布局后会脱离文档流，需要在固定定位的兄弟元素哪里添加一个margin-top，把位置给被定位的元素留出来

子绝父相：会让儿子以父亲为基准进行定位，在父亲内部进行定位 儿子会脱离文档流

所以只要元素之间发生重叠 就要定位（子绝父相）

再写下拉框的时候如果 下面有元素存在，当下拉框展开会把该元素顶下去，如果要让下拉框张开后覆盖该元素 则只需让下拉框展开的位置相对于选项主页绝对定位，而选项主页位置则需要相对定位 则可以让下拉框出现后脱离文档流，让下面的元素上来 而下拉框出现时又会把它给挡住。

多个图片定位会发生重叠可用属性z-index：5；值越大图片越靠上

注意再用cacl（）算法时 算式的前后都要有空格 例如 cacl（50% 空格 - 空格12px）

margin：0 auto 失效原因

1.没有指定宽度

解决：设置width

结论：分别给要居中的元素添加了指定宽度，没变化，说明不是这个原因

2.浮动、绝对定位、固定定位的盒子失效

结论：看不见有这方面的设置啊，排除

3.行内元素失效

解决方法：①设置display:block；②给定要居中的行内元素的宽度。（自带宽度的input/button等元素无需设置宽度）

结论：我设的div啊，排除

4.display:table-cell;只要display不是block就会失效

结论：因为我引进的类库有关于相关类的设置，display：inline-block，所以失效了

解决方法：display:block,然后margin:0 auto生效。

最好的解决方法

①所有元素也可以通过对父元素设置 text-align：center；的方式来实现居中。

刚开始没找到原因，就是使用这个方法实现水平居中的。

居中定位：法一: .conter{ width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; margin-top: -200px; /*自身高度的一半 */ margin-left: -300px; /* 自身宽度的一半 */ }让子元素在父元素中居中定位

平移：.conter{ width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* transform: translate(-50%, -50%); 中的50%为自身尺寸的一半 */ }

transform：translate（x,y) transform:translateX(25px)

变换：平移 放大 缩小 旋转

旋转：行内元素不能旋转 transform:rotate(25dge);

过渡：transition：2s；只要那个元素变了 即可给那个元素加过渡

在弹性盒中可以用flex进行自定义布局 注意：flex加载需要自定义布局的盒子上 而不是父元素上

在弹性盒中可以用flex进行自定义布局 注意：flex加载需要自定义布局的盒子上 而不是父元素上。

align-content：是用来调整换行后的元素的总体排列位置的

动画:在使用动画前 必须要先设置关键帧from开头to结尾 或者使用百分比0%开始，100%结束

最后在要改变的属性中加入动画属性：animation：circle1(名字) 动画持续时间 input[type="text"i] {

padding: 4px12px;

}

这个可以改变input内部placeholder中字与边框的距离