菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
404
0

css基础

原创
05/13 14:22
阅读数 63393

0. 浏览器读取选择器是从右向左依次选择

div.test    p   a.son{}

1.选择所有的a.son 返回结果列表
2.检查结果列表中父元素是否有p,返回结果列表
3.返回结果列表中是否有div.test,返回结果列表

 

0.选择器的权重

!importent  >  内联  > id > class = 属性 = 伪类 > 标签

  

 

1.盒子模型

  盒子模型分类两种:标准盒子模型和IE盒子模型

  标准盒子模型:width = 内容的实际宽度

  IE盒子模型:width = 内容宽度+border宽度+padding宽度

  

 

2.css3新属性,伪类,伪元素,锚伪点

  新属性:transform:平移,旋转,缩放等。animation:动画。transition:变化。渐变,阴影,圆角,媒体查询等。

  伪类:nth-chlid,first-child等

  伪元素::before,:after,:first-line,:first-letter

  

  

3.实现垂直水平居中

  

//第一类
.parent{position:relation
    .son{positon:absolute;left:50%;top:50%;transform:translate(50%,50%);  
    }  
}
.parent{position:relation;
    .son{position:absolute;left:0;top:0;right:0;bottom:0;magin:auto;}
}
//第二类
.parent{
     display:flex;justify-content:center;align-items:center;  
}
.parent{
     display:flex;justify-content:center;
     .son{ align-self:center; }
}
//第三类
.parent{
     display:table-cell;vertical-align:middle;text-align:center
     .son{display:inline-block}
}    

  

4.link和@import区别

  link:html 标签,用于引用一个外部样式来给html布局

  @import : css 标签,用于引进一个样式到另一个样式中

  

 

5.清除浮动的原理

  overflow:hidden , 因为要显示子元素,所有父元素必须有高度

  在父元素加上<div style='clear:botn'></div>  , 因为要显示未浮动的div,div又必须在float的div下面左右必须要有高度

  

 

发表评论

0/200
404 点赞
0 评论
收藏