day39

内容回顾：

        1.高级选择器

            - 后代选择器 ****

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

                div p{}

            - 子代选择器

                选择的是亲儿子

                div>P

            - 组合选择器  逗号分隔

                div,p,a,span{}

                

            - 交集选择器   点分割，即同时符合选择器的条件

                div.active{}

                

                

            - 属性选择器

                input[type='text']{}

                

            - 伪类选择器   a标签

                爱恨准则

                    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. 盒模型

 

                标准盒模型

                   内容的宽度

                   height:内容的高度

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

                   border: 边框

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

               

               计算盒模型：

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

                    

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

                

                

        4.浮动

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

            

        

今日内容：

*{

padding: 0;

margin: 0;

 

}  清除样式

        

1.盒模型的属性(重要)

https://www.cnblogs.com/majj/p/9037474.html

 

https://www.cnblogs.com/majj/p/9037761.html

         

 - padding

            /*上下左右*/

            padding: 10px;

            /*上下  左右*/

            padding: 20px 30px;

            /*上  左右  下*/

            padding: 20px 30px 40px;

            /*顺时针 上右下左*/

            padding: 20px 30px 40px 50px;     这个和我们平常想的不一样

            

          -border

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

            border: 1px solid red;

            

            border-left: 1px solid red;

            如下

.box{

             200px;

            height: 200px;

            

 

            /*width  style color*/

            /*根据方向来设置*/

            /*border-left: 5px solid green;

            border-right: 1px dotted yellow;

            border-top: 5px double purple;

            border-bottom: 1px dashed purple;*/

 

            /*单独设置边的宽度，样式，颜色*/

            /*border-left-style: solid;

            border-left- 1px;

            border-left-color: green;*/

 

            /*整体设置，但是依然遵循padding逻辑*/

            border- 5px 10px;

            border-color: green yellow;

            border-style: solid double;

      

      /*整体设置*/

            /*border: 5px solid green*/

        }

            

 

 

三角形        

div{

            /*color: transparent;*/

             0px;

            height: 0px;

            border-bottom: 90px solid red;

            border-left: 20px solid transparent;

            border-right: 20px solid transparent;

        }

transparent  透明颜色

 

 

圆角

div{

            /*color: transparent;*/

             200px;

            height: 200px;

            

            /*制作圆角*/

            /*border-radius: 3px;*/

            /*border-radius: 100px;*/     

            border-radius: 50%;   #四个角的大小

}

          -margin    

          

            前提必须是标准文档流下

            

                margin的水平不会出现任何问题;两个盒子互相踢

.s1{

            

            margin-right: 30px;

            margin-left:60px;

        }

        .s2{

            

            margin-left: 30px;

        }

            

    标准文档流下垂直方向上 margin会出现'塌陷问题' 实际上margin只需要在同一个方向设置距离就可以了；

            大的长度会覆盖小的长度；水平方向没有这问题

.s1{

             200px;

            height: 200px;

            

            margin-bottom: 100px;

        }

        .s2{

             200px;

            height: 200px;

            

            margin-top: 10px;

        }

 

父子盒子的margin的坑

前提标准文档流（即没有float ），如果想调整子盒子内容不要用margin会在垂直方向上出现问题

 

一浮动就不会出现marging塌陷的问题和父子的margin坑也不会有了

 

        

        2.display 显示（重要）

            前提必须是标准文档流下

        

            属性：

                block 块级标签

                        - 独占一行

                        - 可以设置宽高，

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

                inline 行内标签

                        - 在一行内显示

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

                inline-block 行内块

                        - 在一行内显示

                        - 可以设置宽高

                        

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

                

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

                

      

标准文档流

什么是标准文档流

宏观的将，我们的web页面和ps等设计软件有本质的区别，web 网页的制作，是个“流”，从上而下 ，像 “织毛衣”。而设计软件 ，想往哪里画东西，就去哪里画

标准文档流下 有哪些微观现象？

1.空白折叠现象

多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙，如果在同一行内写img标签，就解决了这个问题，但是我们不会这样去写我们的html结构。这种现象称为空白折叠现象。

2.高矮不齐，底边对齐

文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐 如input框，图片

 

百度下是怎么回事

3.自动换行，一行写不满，换行写

如果在一行内写文字，文字过多，那么浏览器会自动换行去显示我们的文字。

  3.浮动 （重要）

        

            float:none;

                  left;左浮动     靠左

                  right;右浮动    靠右

                  

            浮动：脱离了标准文档流

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

                但是却不在页面上占位置会出现另一种问题，即覆盖后面的标签如下

            浮动带来的问题：

                子盒子浮动，不在页面占位置，如果父盒子不设置高度，那么撑不起父盒子的高度，页面出现紊乱;所以需要清除浮动

                

           

标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！

css中一共有三种手段，使一个元素脱离标准文档流：

• （1）浮动
• （2）绝对定位
• （3）固定定位

     

            清除浮动：两种方式

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

                2.clear:both;

                    给浮动元素的最后面，加一个空的块级标签如div(标准文档流的块级标签)

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

                    问题：代码冗余 ;

                   3.    父元素  <div class="father clearfix">  

 

 

清除浮动；因为标签浮动的时候标签不占空间造成下个元素覆盖浮动的元素，所以需要清除浮动

.clearfix:after{

content: '.';

display: block;

visibility: hidden;

height: 0;

clear: both;

}

 

 

             .clearfix:after {

                        content: ".";

                        display: block;

                        height: 0;

                        visibility: hidden;

                        clear: both

                    }

 

第四种防范            

    4.overflow:hidden;    #设置父元素的样式；最简单

 

字围效果；第一个div浮动，第二个div不浮动为文字则文字不会被第一个div覆盖

   

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

逐渐演变成overflow：hidden清除法。

其实它是一个BFC区域。

 

            

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

浮动

https://www.cnblogs.com/majj/p/9039830.html

浮动是css里面布局最多的一个属性，也是很重要的一个属性。

float：表示浮动的意思。它有四个值。

• none: 表示不浮动，默认
• left: 表示左浮动
• right：表示右浮动

那么浮动如果大家想学好，一定要知道它的四大特性

1.浮动的元素脱标

2.浮动的元素互相贴靠

3.浮动的元素由"子围"效果

4.收缩的效果

 

浮动元素脱标

脱标：就是脱离了标准文档流

 

清除浮动的方法

1. 给父盒子设置高度
2. clear:both
3. 伪元素清除法
4. overflow：hidden

 

问题1 为什么给父标签设置   overflow：hidden会清除浮动