A我今天学到了什么
一.css盒子模型
1.1:box-sizing:border-box
当设置box-sizing:border-box;
设置padding,和border,它的宽度还是会保持不变
box-sizing:content-box;(默认清晰)
当设置padding和border时宽度会发生改变
总宽度=width+border+padding
1.2.实现元素居中
margin-left:auto;margin-right:auto;
二.浮动
目的:为了让元素并排显示
2.1如何清除浮动
1.给下面的兄弟元素给clear:both;
2.给父级加overflow:hidden;
3.用伪元素,给父级内容生成
.row:before{display:table;content:”” }
.row:after{display:table;content:””clear:both;}
三.定位:position
position:absolute (绝对定位) | relative(相对定位)
Relative 定位
相对定位元素的定位是相对其正常位置。
postion:relative
通过left,top,right,bottom移动
Absolute定位
绝对定位的元素的位置相对于最近的相对定位的父元素,如果没有已定位的父元素,那么它的位置相对于<html>;
通过left,top,right,bottom移动
没有设置已定位的父元素,position:absolute 通过left移动
//HTML
<div class="one">
<div class="two"> </div>
</div>
//css
*{margin:0;padding:0}
/*相对定位:就是元素在页面上正常的位置*/
.one{
margin-left:100px;
width:100px;
height:100px;
background-color: red;
}
.two{
width:50px;
height:50px;
background-color: yellow;
position: absolute;
left:0;
}
利用float和display实现导航
//HTML
<ul>
<li><a href="#">手机</a></li>
<li><a href="#">平板</a></li>
<li><a href="#">电脑</a></li>
</ul>
//CSS
*{
margin:0;
padding:0;
}
a{
text-decoration: none;
display: block;
color:white;
}
ul{
list-style: none;
overflow: hidden;
background:pink
}
li{
float:left;
line-height: 50px;
width:100px;
text-align:center;
}
a:hover{
color:gainsboro;
background-color: deeppink;
}
3.1z-index:设置元素的堆叠顺序 给position:absolute绝对定位的元素
//HTML
<div class="parent">
<div class="one"> </div>
<div class="two"></div>
</div>
//CSS
/*z-index:可以给绝对定位的元素,设置它们的堆叠顺序*/
.parent{
width:300px;
height:300px;
background-color: red;
position: relative;
}
.one{
z-index: 100;
position: absolute;
width:100px;
height:50px;
background-color: green;
}
.two{
z-index:90;
position: absolute;
width:50px;
height:50px;
background-color: pink;
}
.parent:hover .one{
z-index: 80;
}
3.2当子元素没有设置宽度,如果设置了绝对定位,它不会继承父元素的宽度
//HTML
div class="center">
<input type="text" placeholder="搜素"/>
<a></a>
</div>
//CSS
*{margin:0;padding: 0;}
div{
width:250px;height:40px;margin-top:15px;
position:relative;
}
input{
box-sizing: border-box;
width:250px;
outline: none;
padding-left:20px;
height: 38px;
font-size: 14px;
border: 1px solid #eee;
border-radius: 40px;
background: #eee;
}
a{
cursor: pointer;
width:24px;
height:24px;
display: block;position:absolute;top:9px;right:5px;
background:url(images/icon4.png) no-repeat
}
input:focus div{width:300px;}
四.实现元素的垂直水平居中
父元素设置parent{position:relative;}
子元素设置child{
position:absolute;left:50%;top:50%;
margin-left:-50%*child*width;
margin-top:-50%*child*height;
}
五.CSS样式的几种引入方式
5.1外部样式表
<link rel="stylesheet" type="text/css" href="/c5.css">
5.2
内部样式表(位于 <head> 标签内部)
<style>
p{color:pink;font-size:16px}
</style>
5.3内联样式(在 HTML 元素内部)
<p style=”color:pink;font-size:16px”>hello world</p>
5.4给同一选择器设置同一样式,离元素近的样式设置方式优先级高
B我今天学到了什么
一.css盒子模型
1.1:box-sizing:border-box
当设置box-sizing:border-box;
设置padding,和border,它的宽度还是会保持不变
box-sizing:content-box;(默认清晰)
当设置padding和border时宽度会发生改变
总宽度=width+border+padding
1.2.实现元素居中
margin-left:auto;margin-right:auto;
二.浮动
目的:为了让元素并排显示
2.1如何清除浮动
1.给下面的兄弟元素给clear:both;
2.给父级加overflow:hidden;
3.用伪元素,给父级内容生成
.row:before{display:table;content:”” }
.row:after{display:table;content:””clear:both;}
三.定位:position
position:absolute (绝对定位) | relative(相对定位)
Relative 定位
相对定位元素的定位是相对其正常位置。
postion:relative
通过left,top,right,bottom移动
Absolute定位
绝对定位的元素的位置相对于最近的相对定位的父元素,如果没有已定位的父元素,那么它的位置相对于<html>;
通过left,top,right,bottom移动
没有设置已定位的父元素,position:absolute 通过left移动
//HTML
<div class="one">
<div class="two"> </div>
</div>
//css
*{margin:0;padding:0}
/*相对定位:就是元素在页面上正常的位置*/
.one{
margin-left:100px;
width:100px;
height:100px;
background-color: red;
}
.two{
width:50px;
height:50px;
background-color: yellow;
position: absolute;
left:0;
}
利用float和display实现导航
//HTML
<ul>
<li><a href="#">手机</a></li>
<li><a href="#">平板</a></li>
<li><a href="#">电脑</a></li>
</ul>
//CSS
*{
margin:0;
padding:0;
}
a{
text-decoration: none;
display: block;
color:white;
}
ul{
list-style: none;
overflow: hidden;
background:pink
}
li{
float:left;
line-height: 50px;
width:100px;
text-align:center;
}
a:hover{
color:gainsboro;
background-color: deeppink;
}
3.1z-index:设置元素的堆叠顺序 给position:absolute绝对定位的元素
//HTML
<div class="parent">
<div class="one"> </div>
<div class="two"></div>
</div>
//CSS
/*z-index:可以给绝对定位的元素,设置它们的堆叠顺序*/
.parent{
width:300px;
height:300px;
background-color: red;
position: relative;
}
.one{
z-index: 100;
position: absolute;
width:100px;
height:50px;
background-color: green;
}
.two{
z-index:90;
position: absolute;
width:50px;
height:50px;
background-color: pink;
}
.parent:hover .one{
z-index: 80;
}
3.2当子元素没有设置宽度,如果设置了绝对定位,它不会继承父元素的宽度
//HTML
div class="center">
<input type="text" placeholder="搜素"/>
<a></a>
</div>
//CSS
*{margin:0;padding: 0;}
div{
width:250px;height:40px;margin-top:15px;
position:relative;
}
input{
box-sizing: border-box;
width:250px;
outline: none;
padding-left:20px;
height: 38px;
font-size: 14px;
border: 1px solid #eee;
border-radius: 40px;
background: #eee;
}
a{
cursor: pointer;
width:24px;
height:24px;
display: block;position:absolute;top:9px;right:5px;
background:url(images/icon4.png) no-repeat
}
input:focus div{width:300px;}
四.实现元素的垂直水平居中
父元素设置parent{position:relative;}
子元素设置child{
position:absolute;left:50%;top:50%;
margin-left:-50%*child*width;
margin-top:-50%*child*height;
}
五.CSS样式的几种引入方式
5.1外部样式表
<link rel="stylesheet" type="text/css" href="/c5.css">
5.2
内部样式表(位于 <head> 标签内部)
<style>
p{color:pink;font-size:16px}
</style>
5.3内联样式(在 HTML 元素内部)
<p style=”color:pink;font-size:16px”>hello world</p>
5.4给同一选择器设置同一样式,离元素近的样式设置方式优先级高
C.今天没有掌握的
没有,只是不熟悉