day04
2017-10-31 本文已影响0人
鄂xj
1.今天学了什么
1.css盒子模型
1.盒子尺寸 box-sizing：border-box
①当设置box-sizing：border-box；设置padding和border它的宽度保持不变
②当设置padding和border时宽度会发生改变。（ 盒子被撑大）(box-sizing：content-box；默认清晰)
③总宽度=width+border+padding
2.1浮动
实现元素水平居中：
margin-left:auto;
margin-right:auto;
float:left(向左浮动)
float：right(向右浮动)
目的:为了让元素并排显示
原理:浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。
2.2如何清除浮动
①给下面的兄弟元素加clear：both；
②给父级加overflow（溢出）：hidder；
③用伪元素，给a父级内容生成
.box:before{
display:table;
content:””
}
.box：after{
display：block
content：" "
clear：both
}
2.3定位
position：absolute|relative
relative定位
相对定位(position：relative)的元素的定位是相对其正常位置。
绝对定位(position：absolute)的元素的位置相对于最近的已定位父元素，如果没有已定位的父元素，那么它的位置相对于<html>：都通过 left right top bottom 移动
z-index：设置元素的堆叠顺序给position：absolute （数字大小 前后）
当子元素没有设置宽度，如果设置了绝对定位，他不会继承父元素的宽度
2.4布局方式的总结
1.默认布局
2.浮动布局（左右）
3.定位布局（定位）
2.5实现元素的垂直水平居中
父元素设置parent{position:relative;}
子元素设置child{
position:absolute;left:50%;top:50%;
margin-left:-50%*child*width;
margin-top:-50%*child*height;
}
例：
.box{
width: 500px;
height: 500px;
background-color: red;
position: relative;
}
.one{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
top:50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
.box是父元素,.one是子元素
3扩展选择器
3.1.选择第一个子元素
div>p:first-child{}
3.2.选择最后一个子元素
div>p:last-child{}
3.3.选择某一个子元素
ul li:nth-child""(index) even偶数 odd基数
3.4.不选某一个
:not(selector)
:not(first-child)不选第一个
:not(last-child)不选最后一个
4.emmet语法
p*3 +tab
<p></p>
<p></p>
<p></p>
p{$$}*3 自增长
<p>01</p>
<p>02</p>
<p>03</p>
p#exj${$$}*3
<p id="exj1">01</p>
<p id="exj2">02</p>
<p id="exj3">03</p>
2.我掌握的
1.css盒子模型
1.盒子尺寸 box-sizing：border-box
①当设置box-sizing：border-box；设置padding和border它的宽度保持不变
②当设置padding和border时宽度会发生改变。（ 盒子被撑大）(box-sizing：content-box；默认清晰)
③总宽度=width+border+padding
2.1浮动
实现元素水平居中：margin-left:auto;margin-right:auto;
float:left(向左浮动)
float：right(向右浮动)
目的:为了让元素并排显示
原理:浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。
2.2如何清除浮动
①给下面的兄弟元素加clear：both；
②给父级加overflow（溢出）：hidd；
③用伪元素，给a父级内容生成
.box:before{
display:table;
content:””
}
.box：after{
display：block
content：" "
clear：both
}
2.4布局方式的总结
1.默认布局
2.浮动布局（左右）
3.定位布局（定位）
2.5实现元素的垂直水平居中
父元素设置parent{position:relative;}
子元素设置child{
position:absolute;left:50%;top:50%;
margin-left:-50%*child*width;
margin-top:-50%*child*height;
}
例：
.box{
width: 500px;
height: 500px;
background-color: red;
position: relative;
}
.one{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
top:50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
.box是父元素,.one是子元素
3.我没有掌握的
2.3定位
position：absolute|relative
relative定位
相对定位元素的定位是相对其正常位置。
绝对定位的元素的位置相对于最近的已定位父元素，如果没有已定位的父元素，那么它的位置相对于<html>：都通过 left right top bottom 移动
z-index：设置元素的堆叠顺序给position：absolute （数字大小 前后）
例子：搜索框
当子元素没有设置宽度，如果设置了绝对定位，他不会继承父元素的宽度
2.5实现元素的垂直水平居中
父元素设置parent{position:relative;}
子元素设置child{
position:absolute;left:50%;top:50%;
margin-left:-50%*child*width;
margin-top:-50%*child*height;
}
例：
.box{
width: 500px;
height: 500px;
background-color: red;
position: relative;
}
.one{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
top:50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
.box是父元素,.one是子元素
