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. 盒模型
 
                标准盒模型
                   width:内容的宽度
                   height:内容的高度
                   padding:内边距 内容到边框的距离
                   border: 边框
                   margin: 外边距  一个盒子的边到另一个盒子边的距离
               
               计算盒模型：
                    盒子的大小= width+2*padding+2*border
                    
                如果保证盒子大小不变，那么加padding,就要减内容的width或height
                
                
        4.浮动
            浮动是实现元素并排，只要盒子浮动（即 float），就脱离标准文档流（不在文档流上占位置）
            
        
今日内容：
*{
padding: 0;
margin: 0;
 
}  清除样式
        
1.盒模型的属性(重要)
 
         
 - 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{
            width: 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-width: 1px;
            border-left-color: green;*/
 
            /*整体设置，但是依然遵循padding逻辑*/
            border-width: 5px 10px;
            border-color: green yellow;
            border-style: solid double;
      
      /*整体设置*/
            /*border: 5px solid green*/
        }
            
 
 
三角形        
div{
            /*color: transparent;*/
            width: 0px;
            height: 0px;
            border-bottom: 90px solid red;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
        }
transparent  透明颜色
 
 
圆角
div{
            /*color: transparent;*/
            width: 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{
            width: 200px;
            height: 200px;
            
            margin-bottom: 100px;
        }
        .s2{
            width: 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区域。
 
            
            要浮动一起浮动，有浮动，清除浮动
浮动
浮动是css里面布局最多的一个属性，也是很重要的一个属性。
float：表示浮动的意思。它有四个值。
  • none: 表示不浮动，默认
  • left: 表示左浮动
  • right：表示右浮动
那么浮动如果大家想学好，一定要知道它的四大特性
1.浮动的元素脱标
2.浮动的元素互相贴靠
3.浮动的元素由"子围"效果
4.收缩的效果
 

浮动元素脱标

脱标：就是脱离了标准文档流
 
清除浮动的方法
  1. 给父盒子设置高度
  2. clear:both
  3. 伪元素清除法
  4. overflow：hidden
 
问题1 为什么给父标签设置   overflow：hidden会清除浮动
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
    
            
            

 

posted @ 2020-01-21 21:02  walkerpython  阅读(149)  评论(0)  编辑  收藏  举报