经过这一个月的学习,我了解了HTML的骨架、标签与标签的关系。明白了css行内样式,内部样式,外部链接三种引入方式,选择器分为复合选择器(主要包含:后代选择器、子代选择器、并集选择器,伪类选择器,交集选择器(指定标签选择器));后代选择器:后代选择器又称为包含选择器,可以选择父元素里面子元素。一个空格表示了后代关系;子元素选择器:只能选择嵌套关系的父子关系得到元素,也就是嵌套的第一层元素,一个大于号“>”表示选中子级; css三种布局:标准流、浮动、定位。学习了清除浮动的方法:额外标签法、父级加overflow属性法(移动端常用)、清除浮动之after伪元素(常用)、清除浮动之双伪元素(常用)。清除浮动之after伪元素代码(常用):
/*声明清除浮动的样式*/
.clearfix:after {
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
*zoom: 1;
/*ie6,7 专门清除浮动的样式*/
}
清楚浮动双伪元素代码(常用):
/*声明清除浮动的样式*/
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
/*ie6,7 专门清除浮动的样式*/
}
设置正圆border-radius: 50%;
设置胶囊形状 border-radius: 25px;
文字阴影text-shadow: 2px 2px 0px rgba(255, 0, 0, 1);
浮动的特性:元素脱离文档流(标准流),自己的位置空了,其他的元素会补上来;
漏:盒子浮动之后脱离的标准流原来的位置就空了,下面的盒子会补上来;
特点:
1、浮动之后的盒子的显示模式会更改为行内块元素的特点;
2、浮动之后的元素之间的没有缝隙的,紧贴在一起;
3、如果父级盒子不够宽装不下浮动的盒子,盒子会掉下来另起一行;
|