Web前端css
Day3
一，选择器
1，伪类选择器
<style> （重要）a:hover{ font-size: 40px;(悬停字体变大) cursor：cell;（鼠标样式） } a:link{ color:颜色； } a:visited{ color:颜色；（访问后变颜色） } a:active{ font-size:70px;(字体变大) } </style>
2,结构伪类选择器
ul li:nth-child
父元素 子元素
- 1
- 2
- 3
3，结构伪类选择器
<style> ul li:nth-child(n){ 操作 }(总的第n行) ul li:nth-of-type(n){ 操作 }(同一类的第n行) </style>
<body>
1
- 2
- 3
</body>
4，伪元素选择器
<style> ul li::before{ content:"输入内容"; }(在<li>输入内容前面上方输入内容) input::placeholder{ 操作 }（表单提示词） ul li：nth-child：：selection{ 操作 }(选中时) </style><body>
<input type="text" name="" id="">
- 1
</body>
二，list
1，css具有层叠性，后面的覆盖前面的
- www
- 111
</body>
三，元素显示模式转换
222
111
</body>
四，背景
<style> body{ height:4000px； background-color:颜色； background-image: url(图片路径)图片背景 background-repeat:no-repeat(背景图片可以沿着水平或者垂直，或者不重复) background-attachment：fixed;(背景随屏幕) background-position： top left;(背景图片初始位置) background:fixed url() no-repeat; } </style>
五，边框
1，
<style> border-width:2px;(边框宽度) border-style:doubt;(边框样式) border-color:颜色；(边框颜色) border-radius：10px；(边框弧度) border:4px solid 颜色;(连写) </style>
2，合并相邻边框
<style> table{ border：5px solid； border-collapse:collapse } </style>
<body> <table> <tr> <td>111</td> </tr> </table> </body>
六，阴影
<style> div{ box-shadow:20px 20px 10px 10px 颜色; } p{ text-shadow:yanse 0 -2px; }(文字添加阴影) </style><body>
<div> </div> <p> 1 </p> </body>
七,轮廓线
<style> input[type="text"]{ outline:none } </style>
<body>
<input type="text" name="" id="">
</body>
八，放拖拽
<style> textarea{ resize:none(防止文本拖拽) vertical-align：top;(改变文本位置) } </style>
<body>
请输入自我介绍
</body>
九，隐藏元素
<style> .box1{ display:none;(隐藏：脱离文档流，原来位置不在保留) visibility:hidden;(隐藏：元素隐藏，位置保留) opacity:0;(设置透明度，数字为0看不见) } </style>
<body>
1
2
</body>
十，绝对定位
<style> 。father{ position:relative;(相对定位) width：800px height：800px } .son{ position：absolute;(绝对定位，不保留原来位置，父亲不加相对定位就相当于浏览器) top:300px; width:100px; height:100px; } </style><body>
<div class="father"> <div class="son1"></div> </div>
</body>
十一，固定定位
<style> body{ height:1000px; } div{ position:fixed;(固定定位，相对于可视区域进行定位) width:100px; height:100px; } </style><body>
<div> 小妲己 </div>
</body>
十二，粘性定位
<style> .one{ position:sticky;(与顶部一起滑动) top:10px; } </style><body>
<p class="one"> 111 </p>
</body>
十二，定位补充
z-index:1(定位中显示的优先级)
1，文字水平对齐方式
<style> div{ text-align：center; line-heigut：60px；（行高） } </style>
<body>
文字
</body>
2，文本装饰
<style> a{ text-decoration:none;(去掉默认下划线) text-decoration:dotted; text-decoration:overline； text-decoration:line-through;(划线) } </style><body>
<a href="http://www.baidu.com">去百度</a>
</body>
3，单行垂直居中
行高等于元素高度
line-height=height
4，文字阴影
<style> p{ text-shadow:颜色 0 -2px; } </style><body>
<p> 111 </p>
</body>
Day4
盒子大小：
结构
padding（内边距）:10px 30px 60px 90px(上 右 下 左)
margin-left(外边距)：5px（不影响盒子大小，同级元素之间相距5px）
外边距塌陷：1，给父元素加一个border(边框)
2，父元素的第一个子元素的magin-top值会被父元素抢走
3，偏方：overflow:auto（加滚动条）
overflow：hidden(隐藏逸出部分)
二，css样式继承
1，不是所有样式都继承，只有改变后对布局无影响的样式能继承，
a链接最好在自身更改样式
三，padding,border影响盒子大小问题
<style> div{ width:300px; height:300px; paddding:40px; border:2px solid; box-sizing:border-box; }
</style><body>
1111
</body>
四，flex布局
1，排列方式
flex-direction：row（横向排列）
flex-direction：row-reverse；（横向反转排列）
flex-direction：column；（竖向排列）
flex-direction：column-reverse（竖向反转排列）
2，让flex布局变为多行
flex-wrap：wrap；（换行）
flex-wrap：nowrap；（不能换行）
3，主轴上的布局
justify-content：center；
justify-content：end；
justify-content：space-between；
justify-contwnt；space-evenly；
justify-content：space-around；
4，侧轴
单行
align-items：center；
align-items：end；
align-items：start；（默认）
多行
align-content：start；
align-content:space-around;
<style> .header{ width：800px； height：100px； display:flex;(让div内容横向排列) flex-direction：row； flex-wrap：wrap；（换行） justify-content：center：
} .son{ width：100px； height：100px； }
</style><body>
<div class="header"> <div class="son">2</div> <div class="son">1</div> </div>
</body>
五，flex
1，平分,只设置一个的话就是把剩下部分全占
.son1{
flex:1;
}
.son2{
flex:2
}
2，order：值越小排列越靠前
.son{
order：-3；
}
六，浮动
1，文字环绕图片
float：left（向左）
2，float讲解
浮动会让元素脱离文档流，不在保留原来位置，会遭成在其下方的兄弟元素位置发生变化。
当子元素发生浮动时，其父元素会发生高度塌陷。
解决办法：
（最好）1，div{
clear：both；（从div向下开始不浮动）
}
1
七，渐变
background-image：linear--gradient（颜色）
八，字体图标
阿里巴巴iconfont库里下载
九，媒体查询
对于可视窗口大小改变
@media only screen and（min-width：320px）and（max-wdith：480px）{
div{
颜色
}
}
十，默认外边距
*{
magin: 0;
padding: p;
}
十一，2d转化
<style> .father{ margin:0 auto; (居中) } .son{ 沿x和y平移 transform:translate(40px,40px); 沿x轴平移 transform:translateX(70px); 旋转，正为顺，负为逆 transform：rotateZ(40deg); 复合写法旋转放最后 混合：transform：transform（40px）rotateZ（45deg） 缩放括号中数字为缩放几倍 transform：scale（1.5） 沿x轴缩放 transform：scaleX(1.5)
}
</style></father><div class="father"> <div class="son">
</div>
</div>
十三，3d
1，开启3d空间
给父元素添加 transfprm-style：preserve-3d
2，景深
perspective：800px
3，沿z轴改变相对物体位置
perspective-origon： 100px 200px；
4，旋转，正值顺时针
沿x轴transform：rotateX（45deg）
transform：rotate（1,1,0,45deg）
5，旋转到反面时隐藏
backface-visibility：hidden；
6，变换原点（换条线转）
transform-origin：bottom；
十四，过渡
.son{（谁变化给谁加）
transition: wdith 5s
}
.son:hover{
transform:rotate(45deg)
}
十五，@keyframes 自己命名{
from{
transform:translate(0%)
}
to{
transform：translate（）
}
div{
animatio:自己命名 ；
}
}