7.8笔记

7.8笔记

小米侧边栏的 >: 通过css创建，简化html结构
：: before
：：after
用css创建行内元素，文档中找不带。。。。。伪元素

before 和 after 创建一个元素，但是属于行内元素新创建的这个元素在文档树中是找不到的，所以我们称为伪元素语法: element::before
before 和 after 必须有 content 属性before在父元素内容的前面创建元素，after在父元素内容的后面插入伪元素选择器和标签选择器一样，权重为1

放在父元素里边的最前面

结构伪类选择器

一类
E:first-child
E:last-child
E:only-child 匹配没有任何兄弟元素的元素E:nth-child[n/even(偶数)/odd (奇数)]
E:nth-last-child 从兄弟节点中从后往前匹配处于某些位置的元素
二类
E:first-of-type
E:last-of-type
E:only-of-type 选择没有其他相同类型的兄弟元素的元素
E:nth-of-type
三类
E:root 匹配元素E所在文档的根元素E:empty 选择没有任何内容的元素

盒子模型
border

内边距
padding-top:20px; //距离顶部二十距离 —文字距离外边框的距离

外边距
margin; //给外面添加一个盒子

外边距塌陷问题
margin-bottom：10px //对所有子元素进行间隔

margin-top：10px //对单个元素进行间隔

父元素会抢走第一个子元素的margin的值-----解决方法：对父元素加边框border 或者+overflow：hidden

文本溢出
overflow：auto/hidden //解决文本溢出问题

样式继承
对div类型进行继承1，2，4

css样式的继承性：不是所有进行继承，只改变对布局无影响的元素

flex布局
display：flex； //默认为主轴 排列方式从左到右

排列方式

flex-direction：row-reverse

flex-direction：column

flex-direction：column-reverse

布局变为多行

flex-wrap：wrap；

flex-wrap：nowrap； //换行

justify-content:space-between； //主轴上的布局

align-items：end； //存在结尾，设置单行 ----侧轴上的布局

：start //恢复默认

align-content //设置多行

order： ； //值越小，位置越靠前

float讲解
float：left //重叠，谁浮谁加

当子元素发生浮动时，其父元素会造成高度塌陷

渐变
background-image：linear-gradient（green，pink）

字体图标
改图标大小 在style中选中icon进行调节大小

媒体查询
@media screen and （min-width：700px） and（min-width：500px） //700至500的颜色是pink

默认外边距
conten=“width=device-width,initial-scale=1.0” //默认外边距16px

取消默认内外边距：padding：0 margin：0

2d转换
transform：translateX（70px) //向左平移70距离 ----水平

transform：roateZ(49deg) //顺时针旋转40 --旋转

3d变换
transform：rotateX（45deg） //X轴进行旋转

transform：rotate3d（1，1，0，45deg） //斜向旋转

transform-origin：top //沿着父元素盒子顶部旋转

过渡
transition：all 5s //鼠标指上之后图标烟左边进行延伸用时5s

需要设置鼠标.son{width:600px;}