李洪强和你一起学习前端之(8)CSS复习

今天是2017年3月24日周五

每一天都是余生当中最好的一天,珍惜当下.

　　　　　　　　CSS基础复习

 

1 复习

1.1Css第一天

　　css层叠样式表

基础选择器

　　　标签选择器

　　　　p{属性: 值;}

　　　类选择器

　　　　.自定义类名{}

　　　　通过class调用

　　　id选择器

　　　　#自定义名{}　　

　　　通配符选择器

　　　　*{}　　所有元素选中

复合选择器

　　　标签指定式选择器

　　　　　标签名.(#)选择器{}

　　　后代选择器

　　　　   选择器 选择器 {}

　　　　　标签关系包含嵌套关系

　　　并集选择器

　　　　　选择器 选择器 {}

　　　属性选择器

　　　　　/*属性选择器*/

　　　　　input[type][id]{

　　　　　color: red;

　　　　　}

　　　子代选择器

　　　　　/*子代选择器*/

　　　　 div > span{

　　　　color : red;

　　　　}

注意: 子代选择器,直接选择父元素中的直接子元素

　　　<div>

　　　　　　<p>

　　　　　　　　<span>p中的span</span>

　　　　　　</p>

　　　　　　<span>

　　　　　　　　div中的span

　　　　　　</span>

　　   </div>

注意: div中的span元素会被选中

 

1.2Css第二天

　　->内嵌式写法

　　->外联式写法

　　　　使用link标签中的 Href = ""属性将外部样式表引入到当前页面中

　　　　行内式写法

　　分类: 

　　->块级元素

　　->行内元素

　　->行内块元素

　　Display: block

　　Display: inline-block

　　Display: inline

 

三大特性: 

　　->层叠性

　　->继承性

　　有关文字的属性都可以实现继承

　　　　a不能直接继承父元素中的文字大小

　　　　标题标签不能直接继承父元素中的文字大小

　　->优先级

　　继承的权重为0

　　权重会叠加

 

伪类:

　　a : link{

　　}　　超链接默认样式

　　a: visited{

　　}   访问过后的样式

　　a:  hover{

　　}　鼠标移动到元素上的样式

　　:active{

　　}超链接激活的样式

　　:focus{

　　}获取焦点的样式

 

1.3Css第三天

　　行高可以继承

　　行高单位

　　单独给一个标签设置行高

　　Font-size: 20px

　　Px     em　　%　　不带单位

 

　　盒模型

　　　　border

 

　　　　padding

　　　　盒子内容距离盒子边框之间的距离

　　　　边框和内边距可以影响盒子大小

　　　　继承的盒子padding值在父元素宽度范围内,不影响盒子大小

 

　　　　margin

　　　　垂直外边距合并

　　　　外边距盒子坍陷问题

　　　　　　->给父盒子设置border值

　　　　　　->给父盒子设置overflow: hidden

 

 

1.4Css第四天

　　浮动

　　->浮动的元素不占位置(脱标)

　　->设置浮动可以实现元素模式的转换

　　->块级元素在一行上显示

　　->图片文字环绕

　　->网页布局

　　

　　定位

　　Position

　　->静态定位

　　->绝对定位(看脸型)

　　　　脱标

　　　　模式转换

 

　　相对定位

　　->没有脱标

　　->子绝父相

　　固定定位

　　　　脱标

　　　　模式转换