A今天学了什么
1.css盒子模型:
content 内容
padding 填充
border 边框
margin 边界
box-sizing：boder-box
设置padding和border时，宽度将保持不变
box-sizing： content-box ）（默认清晰）
设置padding和border时，它的宽度将会改变
盒子的总宽度=width+border+padding
2.float 浮动
目的：是为了让元素并排显示
如何清除浮动：
a.给下面的兄弟元素加：clear:both;
b.给父级加：overflow:hidden;
c.用伪元素，给a父级内容生成
.row:before{
display:table;
content:""
}
.row:after{
display:table;
content:""
clear:both;
}
3.position 定位
relative 相对定位
相对定位的元素是相对其正常位置
absolute 绝对定位
绝对定位的元素的位置相对于最近的已定位父元素，如果没有已定位的父元素，那么它的位置相对于<html>：都通过left,top ,right, bottom来移动
z-index：设置元素的堆叠顺序给position:absolute绝对定位的元素
比如：搜索框
当子元素没有设置宽度，如果设置了绝对定位，它就不会继承父元素的宽度
4.布局方式的总结
默认布局
浮动布局（左右安置）
定位布局
5.实现元素的垂直水平居中
父元素设置
parent{position:relative;}
子元素设置
child{
position:absolute;left:50%; top:50%;
margin-left:-50%*child*width;
margin-top:-50%*child*height;
}
6.拓展知识
p*10表示有10个p标签
p{abc}*10表示有10个<p>abc</p>标签
p{$$}*10表示有10个<p>01</p>~<p>10</p>标签
p.text#id${}*10<p class="text1" id="id1">01</p>~<p class="text10" id="id10">10</p>
ul >li*10=<ul>
里面有10个li
<ul>
7.拓展选择器
选择第一个子元素
div>p:first-child{} 选择div里面第一个子元素
选择最后一个子元素
div>p:last-child{} 选择div里面最后一个子元素
选择某一个子元素
ul li:nth-child(index) even为偶数 odd奇数
不选中某个
:not(selector)
B我掌握好的地方
1.css盒子模型:
content 内容
padding 填充
border 边框
margin 边界
box-sizing：boder-box
设置padding和border时，宽度将保持不变
box-sizing： content-box ）（默认清晰）
设置padding和border时，它的宽度将会改变
盒子的总宽度=width+border+padding
5.实现元素的垂直水平居中
父元素设置
parent{position:relative;}
子元素设置
child{
position:absolute;left:50%; top:50%;
margin-left:-50%*child*width;
margin-top:-50%*child*height;
}
6.拓展知识
p*10
=10个p标签
p{abc}*10
=10个<p>abc</p>标签
p{$$}*10
=<p>01</p>~<p>10</p>标签
p.text#id${}*10
=<p class="text" id="id01">01</p>~<p class="text" id="id10">10</p>
p.text#id${$$}*10>a[href=""]
=<p class="text" id="id1">01<a href=""></a></p>~<p class="text" id="id10">10<a href=""></a></p>
ul >li*10=<ul>
里面有10个li
<ul>
7.拓展选择器
选择第一个子元素
div>p:first-child{} 选择div里面第一个子元素
选择最后一个子元素
div>p:last-child{} 选择div里面最后一个子元素
选择某一个子元素
ul li:nth-child(index) even为偶数 odd奇数
不选中某个
:not(selector)
C我掌握不好的地方
都掌握了
网友评论