day04
2017-08-02 本文已影响0人
向钱看丷向厚赚
A.今天掌握了什么
1.css盒子模型
1.1box-sizing:border-box
image.png
当设置box-sizing:border-box
设置pandding,和border,它的宽度还是会保持不变
box-sizing：content-box(默认清晰)
当设置pandding和border时宽度会发生改变
总宽度=width+border+pandding
//html
<div><div>
//css
div{ border:10px;solid;#333;
padding:10px;
box-sizing:content-box
width:100px;
height:100px;
background-color:red
}
1.2实现元素居中
display:block
margin-left:auto;margin-right:auto;
2.浮动
float：left/right/center/bottom
目的：为了让元素并排显示
>#####2.1如何清除浮动
（1）给下面的兄弟元素给clear：both
//html
<div class=“one”><div>
<div class=“two”></div>
//css
.one{ width:100px;
height:100px;
background-color:red;
float:left;
}
.two{ clear:both;
width:200px;
hedght:50px;
background-color:yellow;
}
（2）给父级加overflow:hidden
//html
<div class=“one”></div>
<div class=“two”></div>
//css
.two{
width:100px;
height:100px;
background:red;
float:left;
}
/*子级float，父级有高度，如何让父级有高度*/
.one{
overflow:hidden；
width：200px;
background:yellow;
}
（3）用伪元素，给父级内容生成
.row:before{display:table;content" "}
.row:after{display:table;content:" "
clear:both}
//html
<div class=“one”></div>
<div class=“two”></div>
//css
.two{
width:100px;
height:100px;
background:red;
float:left;
}
/*子级float，父级有高度，如何让父级有高度*/
.one{
overflow:hidden；
width：200px;
background:yellow;
}
.one,two:ofter{content:“”;
display:table;
cear:both;
}
3.定位
postion:absolute/relative
(1)relative
相对元素的定位是相对其正常位置
position：relative
(2)basolute
绝对定位的元素的位置相对于最近的已定位父元素，如果没有已定位的父元素，那么他的位置相当于<HTML>
//html
<div class=“one”>
<div class=“two”><div>
</div>
//css
*{margin:0px;padding:0px;}
/*相对定位：就是元素在页面上的位置*/
.one
{margin-left:100px;
width:100px；
height:100px;
background-color:red
}
.two
{width:50px;
height:50px;
background-color:yellow;
position:absolute;
left:0;
}
都通过left,top,right,bottom移动
z-index:设置元素的堆积顺序 给position:absolute绝对定位的元素
例子：搜索框
input当子元素没有设置宽度，如果设置了绝对定位，他不会继承父元素的宽度
4.布局方式的总结
1、默认布局
2、浮动布局（左右安置）
层级布局（定位）
5.实现元素的垂直居中
父元素设置parent{position:relative}
子元素设置child{position:absolute;
left:50%;top:50%;
margin-left:50%*child*width;
margin-top:50%*child*height;}
6.css样式的几种引入方式
外部样式
<link rel=""“stylesheet”type=text/css“href”=/c5.css>
内部样式表（位于<head>标签内部）
<style>
给同一选择器设置同一样式，离元素近的样式设置方式优先级高
B.我掌握了什么？
>##### .css盒子模型
1.1box-sizing:border-box
当设置box-sizing:border-box
设置pandding,和border,它的宽度还是会保持不变
box-sizing：content-box(默认清晰)
当设置pandding和border时宽度会发生改变
总宽度=width+border+pandding
//html
<div><div>
//css
div{ border:10px;solid;#333;
padding:10px;
box-sizing:content-box
width:100px;
height:100px;
background-color:red
}
实现元素居中
display:block
margin-left:auto;margin-right:auto;
C今天没掌握什么？
.浮动
float：left/right/center/bottom
目的：为了让元素并排显示
//html
<ul>
<li>手机</li>
<li>电脑</li>
<li>平板</li>
<ul>
>#####如何清除浮动
（1）给下面的兄弟元素给clear：both
//html
<div class=“one”><div>
<div class=“two”></div>
//css
.one{ width:100px;
height:100px;
background-color:red;
float:left;
}
.two{ clear:both;
width:200px;
hedght:50px;
background-color:yellow;
}
给父级加overflow:hidden
//html
<div class=“one”></div>
<div class=“two”></div>
//css
.two{
width:100px;
height:100px;
background:red;
float:left;
}
/*子级float，父级有高度，如何让父级有高度*/
.one{
overflow:hidden；
width：200px;
background:yellow;
}
用伪元素，给父级内容生成
.row:before{display:table;content" "}
.row:after{display:table;content:" "
clear:both}
//html
<div class=“one”></div>
<div class=“two”></div>
//css
.two{
width:100px;
height:100px;
background:red;
float:left;
}
/*子级float，父级有高度，如何让父级有高度*/
.one{
overflow:hidden；
width：200px;
background:yellow;
}
.one,two:ofter{content:“”;
display:table;
cear:both;
}
3.定位
postion:absolute/relative
(1)relative
相对元素的定位是相对其正常位置
position：relative
basolute
绝对定位的元素的位置相对于最近的已定位父元素，如果没有已定位的父元素，那么他的位置相当于<HTML>
//html
<div class=“one”>
<div class=“two”><div>
</div>
//css
*{margin:0px;padding:0px;}
/*相对定位：就是元素在页面上的位置*/
.one
{margin-left:100px;
width:100px；
height:100px;
background-color:red
}
.two
{width:50px;
height:50px;
background-color:yellow;
position:absolute;
left:0;
}
都通过left,top,right,bottom移动
z-index:设置元素的堆积顺序 给position:absolute绝对定位的元素
例子：搜索框
input当子元素没有设置宽度，如果设置了绝对定位，他不会继承父元素的宽度
6.css样式的几种引入方式
外部样式
<link rel=""“stylesheet”type=text/css“href”=/c5.css>
内部样式表（位于<head>标签内部）
<style>
pstyle=“color:pink,
font-size:16px”</style>
给同一选择器设置同一样式，离元素近的样式设置方式优先级高
