py 的 第 39 天

Posted 2021-01-07 mrszhao

---恢复内容开始---

内容回顾：

　　　　1.高级选择器

　　　　　　　　后代选择器

　　　　　　　　　　　　选择的是儿子、孙子，重孙子

　　　　　　　　　　　　div  p{}

　　　　　　　　子代选择器

　　　　　　　　　　　　选择的是亲儿子

　　　　　　　　　　　　div>p

　　　　　　　　组合选择器

　　　　　　　　　　　　div.active{}

　　　　　　属性选择器

　　　　　　　　　　　　input[type=‘text‘]{}

　　　　　　　　伪类选择器

　　　　　　　　　　　　爱恨准则

　　　　　　　　　　　　　　　　a:link{}

　　　　　　　　　　　　　　　　a:visited{}

　　　　　　　　　　　　　　　　a:hover{}

　　　　　　　　　　　　　　　　a:active

　　　　　　　　　　　　对a来设置字体颜色，一定要选中a

　　　　　　　　伪元素选择器

　　　　　　　　　　　　　　　　p:first-letter{}

　　　　　　　　　　　　　　　　p:before{  content:‘  ‘   }

　　　　　　　　　　　　　　　　//与浮动有关系

　　　　　　　　　　　　　　　　p:after{   content:‘   ‘  }

         2.css的继承性和层叠行

　　　　　　　　在css中，color、text-xxx、font-xxx、 line-xxx这些属性是可以被继承下来

　　　　　　　　层叠性：权重==》谁的权重大就会显示谁的属性

　　　　　　　　权重大小的对比：

　　　　　　　　　　　　数选择器的个数：  id   class  标签

　　　　　　　　　　　　权重比较1:

　　　　　　　　　　　　　　　　　　行内  >  id   >   class   >    标签

　　　　　　　　　　　　权重比较2:

　　　　　　　　　　　　　　　　　　继承来的属性，权重为0，与选中的标签没有可比性

　　　　　　　　　　　　权重比较3:

　　　　　　　　　　　　　　　　　　都是继承来的，权重都是0，就近原则

　　　　　　　　　　　　权重比较4:

　　　　　　　　　　　　　　　　　　都是继承来的，他们权重都为0，描述的一样近，再去数权重

　　　　　　　　　　　　权重比较5:

　　　　　　　　　　　　　　　　　　权重一样大，后面的大于前面的属性

　　　　3.盒模型

　　　　　　　　　　　　标准盒模型

　　　　　　　　　　　　　　width:内容的宽度

　　　　　　　　　　　　　　height：内容的高度

　　　　　　　　　　　　　　padding：内边距  内容到边框的距离

　　　　　　　　　　　　　　border：边框

　　　　　　　　　　　　　　margin：外边距  一个盒子的边到另一个盒子边的距离

　　　　　　　　　　计算盒模型：

　　　　　　　　　　　　　　　　盒子的大小=width+2*padding+2*border

　　　　　　　　　　　　如果保证盒子大小不变，那么加padding，就要减内容的width或height

　　　　4.浮动

　　　　　　　　浮动是实现元素并排，只要盒子浮动，就脱离标准文档流（不在文档流上占位置）

今日内容：

　　　　　　1.盒模型的属性（重要）

　　　　　　　　padding

　　　　　　　　　　上下左右

　　　　　　　　　　padding：10px；

　　　　　　　　　　上下    左右

　　　　　　　　　　padding：10px   20px；

　　　　　　　　　　上     左右    下

　　　　　　　　　　padding    10px   20px   30px；

　　　　　　　　　　顺时针    上右下左

　　　　　　　　border

　　　　　　　　　　三要素 ： 线性的宽度   线性的样式  颜色

　　　　　　　　　　border  ：1px   solid   red；

　　　　　　　　　　border-left：1px  solid  red；

　　　　　　　　margin

　　　　　　　　　　前提必须是标准文档流下

　　　　　　　　　　　　margin的水平不会出现任何问题

　　　　　　　　　　　　垂直方向上  margin会出现‘塌陷问题’

　　　　　　　　2.display 显示

　　　　　　　　　　前提必须是标准文档流下

　　　　　　　　　　属性：

　　　　　　　　　　　　　　block 块级标签

　　　　　　　　　　　　　　　　　　　　　　独占一行

　　　　　　　　　　　　　　　　　　　　　　可以设置宽高，如果不设置宽，默认是父盒子宽度的100%

　　　　　　　　　　　　　　inline行内标签

　　　　　　　　　　　　　　　　　　　　　　在一行内显示

　　　　　　　　　　　　　　　　　　　　　　不可以设置宽高，根据内容来显示宽高

　　　　　　　　　　　　　　inline-block 行内块

　　　　　　　　　　　　　　　　　　　　　　在一行内显示

　　　　　　　　　　　　　　　　　　　　　　可以设置宽高

　　　　　　　　　　　　　　none  不显示   隐藏     不在文档上占位置

　　　　　　　　　　　　visibility：hidden；隐藏 在文档上占位置

　　　　　　3.浮动

　　　　　　　　　　float：none；

　　　　　　　　　　　　　　　　left；左浮动  right；又浮动

　　　　　　　　　浮动：脱离了标准文档流

　　　　　　　　　　　　作用好处：使元素实现并排（布局）

　　　　　　　　　　　　　　　　　就在页面上占位置

　　　　　　　　　　　　浮动带来的问题：

　　　　　　　　　　　　　　　　　　子盒子浮动，不在页面占位置，如果父盒子不设置高度，那么撑不起父盒子的高度，页面出现紊乱

　　　　　　　　　　　　清除浮动：

　　　　　　　　　　　　　　　　1.给父盒子设置固定高度（后期不好维护）

　　　　　　　　　　　　　　　　2.clear：both；

　　　　　　　　　　　　　　　　　　　　给浮动元素的最后面，加一个空的块级标签（标准文档流的块级标签）

　　　　　　　　　　　　　　　　　　　　给当前这个标签设置一个clearfix类名，设置该标签属性

cleart：both

　　　　　　　　　　　　　　　　　　　　问题：代码冗余

　　　　　　　　　　　　　　　　3.        .clearfix：after{

　　　　　　　　　　　　　　　　　　　　　　　　content：‘ 。’；       

　　　　　　　　　　　　　　　　　　　　　　　　display：block；

　　　　　　　　　　　　　　　　　　　　　　　　height：0；

　　　　　　　　　　　　　　　　　　　　　　　　visibility：hidden；

　　　　　　　　　　　　　　　　　　　　　　　　clear；both

　　　　　　　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　　　4.overflow：hidden；

　　　　　　　　　　　　要浮动一起浮动，有浮动，清除浮动

 

 

---恢复内容结束---