css
清除浮动的三种方式
为什么清除浮动：
- 父盒子如果一般不会设置高度，里面有宽高的盒子因为设置了浮动脱标不占位置，所以撑不开父盒子，导致了父盒子下面的兄弟盒子，会跑到父盒子的下面。
- 解决方式是：预先定义好.clearfix清除浮动，将该类名添加到父盒子上。父盒子就有了自己高度。
- 解决方式是：预先定义好.clearfix清除浮动，将该类名添加到父盒子上。父盒子就有了自己高度。
<style>
.parent {
width: 300px;
border: 1px solid red;
/* overflow:hidden; 1：父级：overflow:hidden; */
}
.children {
float: left;
width: 100px;
height: 100px;
background-color: pink;
}
/* 2: 父级：after伪元素：<div class="clearfix"></div>（推荐） */
.clearfix:after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
/* 3：父级：双伪元素： */
.clearfix:before,
.clearfix:after {
content: '';
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
</head>
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>
块级父盒子嵌套图片底线会空白缝隙
一般块级父盒子是不会设置高度的，是由内容撑起来的，但是嵌套子元素图片，默认底线会有空白
- 解决方式一：设置vertical-align: top | bottom | middle都可以 （推荐）
- 解决方式二：把图片转换为块级元素： display: block;
<style>
* {
margin: 0;
padding: 0;
}
.container {
border: 1px solid red;
}
img {
width: 300px;
vertical-align: top; /*解决方式一：设置vertical-align: top | bottom | middle都可以 （推荐）*/
display: block; /*解决方式二：把图片转换为块级元素： display: block;*/
}
</style>
</head>
<body>
<div class="container">
<img src="../image/student.jpg" alt="" />
</div>
</body>
新增选择器
属性选择器：
- input[type=text] //选择text文本类型的输入框
- div[class^=icon]//icon开头的类名
- span[class*=nav]//包含nav的类名
结构伪类选择器：
- ul li:first-child{}
- ul li:last-child{}
nth-child选择器：
- ul li:nth-child(even) //偶数
- ul li:nth-child(odd) //奇数
伪元素选择器：
- div::before {} // div前面添加伪元素
- div::after {} // div后面添加伪元素
<style>
li[class*='icon'] {
background-color: yellow;
}
li:first-child {
background-color: deeppink;
}
li:nth-child(odd) {
background-color: greenyellow;
}
.box::before {
content: '';
display: block;
width: 20px;
height: 20px;
background-color: pink;
}
</style>
</head>
<body>
<ul>
<li>第01条数据</li>
<li class="icon">第02条数据</li>
<li>第03条数据</li>
<li class="icon">第04条数据</li>
<li>第05条数据</li>
<li class="icon">第06条数据</li>
<li>第07条数据</li>
<li class="icon">第08条数据</li>
<li>第09条数据</li>
<li class="icon">第10条数据</li>
</ul>
<div class="box">box</div>
</body>
浏览器私有前缀
-moz- firedox 火狐
-ms- ie
-webkit- safari chrome
-o- Opera欧朋
Flex 弹性伸缩布局
1：主轴方向：flex-direction: row 水平 | column 垂直 列
2：设置主轴上元素的排列方式：justify-content:
flex-start 默认的，从头开始
flex-end 从尾部开始开始
center 主轴上居中， 如果主轴是flex-direction: row ，就是水平居中， 如果是column就是垂直居中
space-around 平分剩余空间
space-between 先贴两边， 再平分剩余空间
实例代码：
div{ diaplay: flex; flex-direction: row; justify-content: space-between } flex布局，子元素水平，然后先贴两边再平分剩余空间
3：flex-wrap 子元素是否换行
nowrap 不换行
wrap 换行
4：align-items 另外一轴子元素排列方式 (让子元素水平垂直居中)
ul {
display: flex;
flex-direction: column;
justify-content: center; /*垂直上下居中 */
align-items: center; /*相对于父元素水平居中 */
}
5：align-content 另一轴子元素的排列方式 (多行) 单行情况下是没有用的
justify-content: center; /*垂直上下居中 */
align-content: space-around; 先贴两边， 再平分剩余空间
6：复合属性flex-flow
flex-flow: row wrap // 相当于 flex-direction: row + flex-wrap: wrap;
媒体查询+rem改变页面背景颜色
使用媒体查询拿到页面尺寸的变化，根据不同屏幕设置html不同的font-size,页面的盒子大小跟随页面大小改变而发生改变。
- @media screen and (min-width: 320px) { html{ font-size: 50px; }} // 大于等于320
- @media screen and (min-width: 640px) { html{ font-size: 100px;}} // 大于等于640
@media screen and (min-width: 640px) {
body {
background-color: yellow;
}
}
@media screen and (max-width: 1200px) {
body {
background-color: pink;
}
}
css优先级如何计算
- 元素选择器： 1
- class选择器： 10
- id选择器： 100
- 元素标签： 1000
- !improtant 优先级最高
如果优先级一样， 则最后出现的会覆盖之前的，就近原则。 继承得到的样式，优先级最低。
三句话： 越具体优先级越高 同样优先级写在后面的覆盖写在前面的 !important 优先级最高，但是要少用
Bootstrap的使用
1:在项目中导入下载好的bootstrap文件： <link href="bootstrap/css/bootstrap.min.css">
2:使用bootstrap现有的组件测试， 如果样式想修改，自己在class添加一个类名，注意权重问题，去覆盖原有样式即可。
3：布局容器：.contaner不同屏幕下有不同大小适合做响应式（推荐） | conatiner-fluid百分百宽度，适合单独做移动端开发。
注意container是路由手动修改宽度的：
@media screen and (min-width: 1280) { .container { width: 1280px } }//根据设计稿设计容器的大小。
4：栅格系统：栅格系统分为12列
.col-xs-*n 手机 小于750px
.col-sm-*n 平板768-992之间
.col-md-*n 大于等于992笔记本
.col-lg-*n 大于等于1200px桌面显示器
5：列嵌套：12等份：
<div class="container">
<div class="row>
<div class="col-md-4">
<div class="row> // 必须加上row，这样就可取消父元素的padding值
<div class="col-md-6"></div>// 继续自己的列嵌套，可以无限嵌套下去。
<div class="col-md-6"></div>
</div>
</div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
6：列偏移：col-offset-6
7：列排序：col-lg-push-*n 推 | col-lg-pull-*n 拉， 相当于换位。
8：响应式工具：
.hidden-xs 手机端隐藏
.hidden-sm 平板端隐藏
.hidden-md笔记本端隐藏
.hidden-lg桌面显示器中隐藏
css3有哪些新特性
- text-shadow 文字阴影
- border-radius 圆角
- border-image 边框图片
- box-shadow 盒子阴影
- gradient 线性渐变
- rotate旋转
- scale 缩放
- translate
- 2D - 3D ···
- @media screen and(min-width | max-width)媒体查询， 当浏览器尺寸发生改变时，会采用不同的属性。
animation动画
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}
@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
