A我今天学习到了什么
1温习day04的知识点
1.1.盒子模型
盒子模型:box-sizing:border-box
当设置box-sizing:border-box;
设置padding,和border,//它的宽度还是会保持不变
box-sizing:content-box;(默认清晰)
//当设置padding和border时宽度会发生改变
//总宽度=width+border+padding
1.2.浮动float
1.目的:为了让元素并排显示
float：lest|right；
（postion:relative// 相对的位置移动
top|left|right|bottom：1px；）
2如何清除浮动
(1)给下面的兄弟元素给clear:both;
(2)给父级加overflow:hidden;
(3)用伪元素,给父级内容生成
.row:before{
display:table;
content:“”}//前面加
.row:after{
display:table;
content:“”
clear:both;}//后面加
1.3.定位:position
position:absolute | relative
//绝对定位，相对定位
Relative 定位
相对定位元素的定位是相对其正常位置。
postion:relative//父级专属位置设定
Absolute定位 （fixed固定//没有父级只有）
绝对定位的元素的位置相对于最近的相对定位的父元素，
如果没有已定位的父元素，那么它的位置相对于
****定位的调试都通过left,top,right,bottom移动
z-index:设置元素的堆叠顺序 给position:absolute绝对定位的元素
当子元素没有设置宽度，如果设置了绝对定位,它不会继承父元素的宽度
1.4.布局方式的总结
1.默认布局
2.浮动布局(左右安置)
3.层级布局(定位)
1.5.实现元素的垂直水平居中
（相对）父元素设置parent{position:relative;}
(绝对）子元素设置child{
position:absolute;left:50%;top:50%;
margin-left:-50%*child*width;
margin-top:-50%*child*height;}
1.6:CSS样式的几种引入方式
外部样式表
内部样式表（位于 标签内部）
内联样式（在 HTML 元素内部）
hello world
//给同一选择器设置同一样式,离元素近的样式设置方式优先级高
2拓展day04的知识点
2.1 p:margin的一点漏洞问题
给子元素margin-top:父元素移动,子元素不移动
解决方案：1.给父元素overflow:hidden;
2.给父元素设置伪元素parent:before{content:'‘”;display:table}
上面的元素的margin-bottom和下面元素的margin-top会重合
//取两者的最大值
2.2一个登陆页面
//定义和用法
2.3单选框
2.4复合选框
游泳
开车
2.5下拉选框
2.6预选的下拉选框
//在想要的option上加selected这个属性
2.7文本域
文本域
*****拓展
空格 << >>
特殊案例
1.input 输入框
input type=”text”
type=”submit”之间的区别
一个文本是content box，一个按钮是border box
2.display和visibility的区别
display:none;//块不存在
visibility:hidden;//只是隐藏起来了
3.讲解登录框下面的几个icon
image.png
//是背景图片的取图定位，左负右正background-position: -18px 0
B我掌握了的
1.1 p:margin的一点漏洞问题
给子元素margin-top:父元素移动,子元素不移动
解决方案：1.给父元素overflow:hidden;
2.给父元素设置伪元素parent:before{content:'‘”;display:table}
上面的元素的margin-bottom和下面元素的margin-top会重合
//取两者的最大值
1.2一个登陆页面
//定义和用法
1.3单选框
1.4复合选框
游泳
开车
1.5下拉选框
1.6预选的下拉选框
//在想要的option上加selected这个属性
1.7文本域
文本域
*****拓展
空格 << >>
特殊案例
1.input 输入框
input type=”text”
type=”submit”之间的区别
一个文本是content box，一个按钮是border box
2.display和visibility的区别
display:none;//块不存在
visibility:hidden;//只是隐藏起来了
3.讲解登录框下面的几个icon
image.png
//是背景图片的取图定位，左负右正background-position: -18px 0
C我没有掌握的
全部不掌握了，不熟练要多练习。
margin: 0;
padding: 0;
}
.wai{
position: relative;
height: 100px;
}
.wa{
box-sizing: border-box;
position: absolute;
left: 400px;
top: 30px;
clear: both;
}
.wa>img{
width: 49px;
height: 49px;
background: #f56600;
}
.wa>.wa1{
display: inline-block;
overflow: hidden;
padding-left: 10px;
}
.wa1>.wa-1 {
font-size: 28px;
position: absolute;
top: -5px;
}
.wa1>.wa2{
font-size: 10px;
}
.bac{
position: relative;
background: url("../images/banner.png") no-repeat center;
height: 600px;
/*margin: 30px 0;*/
}
.den{
position: absolute;
width: 350px;
height: 500px;
right: 430px;
top:50px;
background: #ffffff;
text-align: center;
}
.login{
margin: 30px 0;
}
.login span{
font-size: 24px;
margin: 0 10px;
}
form p{
margin: 10px 0;
box-sizing: border-box;
}
form input{
width: 280px;
height: 50px;
border: 1px solid #e0e0e0;
outline: none;
}
.password>input{
padding-left: 15px;
}
.phone>input{
padding-left: 15px;
}
.login .active{
color: #f56600;
}
.submit>input{
width: 297px;
height: 50px;
background: #f56600;
color: white;
font-size: 18px;
margin: 20px 0 10px;
}
.register {
margin-bottom: 70px;
}
.register .wang{
background: blue;
color: white;
}
.footer {
width: 300px;
margin-left: auto;
margin-right: auto;
}
.footer .line{
border-bottom:none;
border-right: none;
border-left:none;
}
.All{
overflow: hidden;
margin-top: 15px;
}
.All a{
width: 20px;
height: 20px;
display: inline-block;
background: #747474 url(../images/icons_type.png) no-repeat;
margin-left: 30px;
}
.All .one {
margin-left: 0;
background-position: -18px 0
}
.All .two {
background-position: -37px 0
}
.All .three {
background-position: -57px 0
}
.All .four {
background-position: -85px 0
}
.xia{
height: 200px;
position: relative;
}
.xia1{
text-align: center;
position: absolute;
top: 50%;
left: 50%;
margin-top: -37px;
margin-left: -379px;;
}
.xia1 p{
margin: 10px 0;
}
.xia1 span{
margin: 5px;
}
小米商城
让每个人都能享受科技的乐趣
注册小米账号
|
忘记密码?
简体
|
繁体
|
English
|
常见问题
小米公司版权所有-京ICP备10046444-
京公网安备11010802020134号-京ICP证110507号