学习前端第六天

最新推荐文章于 2023-04-17 13:44:34 发布

颜汐い

最新推荐文章于 2023-04-17 13:44:34 发布

阅读量656

点赞数

本文链接：https://blog.csdn.net/weixin_48680892/article/details/109583597

版权

上午复习上周内容：
1.选择器：
后代选择器格式：选择器1 选择器2；
子代选择器格式：选择器1>选择器2；
兄弟选择器格式：选择器1~选择器2；
相邻选择器格式：选择器1+选择器2
2.伪类：
：link 访问前的样式
：visited 访问后的
：hover鼠标移入时的样式
：active 鼠标按下时的样式
注（link，visited只能添加给a标签）
3.结构伪类选择器：
：nth-of-tyle（）
：nth-child（）
选中列表中的元素
E：empty选中没有子元素的；
E：not()选中不在括号里的；
4.！important 提升样式优先级，非规范方式，不建议使用。
补充css文字样式：
1. font-family：字体类型
英文字体：Arial，Times New Roman;
中文字体：微软雅黑，宋体；
可以设置多个类型，英文在前，中文在后。
2.font-size 字体大小
3.fon-weight 字体粗细
模式：normal（正常），bold（加粗），number（100~9000
4.font-style:字体样式
模式： normal（正常），italic（斜体）
css段落样式：
text-decoration：文本装饰
下划线：underline 上划线：overline 删除线：line-through
注：可以同时添加多个，通过空格隔开。
text-transform：文本大小写（针对英文）
lowercase 小写， uppercase大写；capitalize只针对首字母大写；
text-indent：文本缩进
em单位：相对单位，1em永远都是跟字体大小相同
text-align：文本对齐方式：
left 左对齐，right右对齐，center中间对齐，justify两端对齐
line-height 行高，一行文字的高度，上边距和下边距的等价关系。
默认行高：不是固定值，而是变化的，根据当前文字大小不断变化。
取值 1.number（px）scale（比例值%，跟文字大小成比例的）
letter-spacing：字之间的距离
word-spacing：词之间的距离（针对英文段落）
css边框样式：
border-style：边框样式
solid实线，dashed虚线，dotted点线
border-width：边框大小
border-color：边框颜色
border-right-style：左边框

下午学习盒子模型：
组成：content padding border margin
content：内容区域 width和height组成。
padding：内边距 number(px);
paddding-left 左内边距 padding-right 右内边距
padding-top 上内边距 padding-bottom下内边距
只写一个值:表示上下左右；
写两个值：表示上下，左右；
写三个值：表示上，左右，下；
写四个值：表示上，下，左，右。
margin：外边距用法同padding。
注：1.背景色填充到margin以内区域（不包括margin）
2.文字在content区域添加
3.padding不能为负值，margin可以为负值。
盒子的叠加问题：
出现在margin同时存在的时候，会取上下中值较大的作为叠加值，为负值时取绝对值较大的值，一正一负值时相加即可。
盒子居中用 margin:0 auto;
溢出隐藏：
overflow：hidden；

今日作业：

 <style>       
  .div1{
         width:600px;          
         height:600px;         
          border:1px solid black;          
          background-color:#FF6D5D ;          
          margin:0 auto;        
          }       
   .div2{            
   width:500px;            
   height:500px;            
   border:3px dashed white;            
   margin:50px auto;       
    }        
    .div3{            
    width:400px;           
     height:400px;           
      border:3px solid white;            
      margin:50px auto;           
       background-color:#FF887C ;       
        }        
        .div4{         
            width:300px;           
            height:300px;          
            border:3px dashed white;           
            margin:50px auto;          
            background-color:#FFAD4E;     
               }        
               .div5{            
               width:200px;            
               height:200px;           
                border:3px dashed white;            
                margin:50px auto;            
                background-color:#E1EC48;       
                 }        
                 .div6{            
                 width:150px;           
                  height:150px;            
                  border:3px dashed white;           
                   margin:25px auto;           
                    background-color:#A4C649;     
                       }        
                       .div7{            
                       width:100px;            
                       height:100px;            
                       border:3px dashed white;            
                       margin:25px auto;           
                        background-color:#FF6D5D;     
                           }            
                </style>
                </head>
                <body>  
                  <div class="div1">  
                    <div class="div2">      
                      <div class="div3">     
                           <div class="div4">                  
                            <div class="div5">                     
                               <div class="div6">  
                                 div class="div7">  
                                         </div>            
                                     </div> 
                                         </div>       
                                       </div>   
                                              </div>   
                                                   </div> 
                                                   </div>
                                     </body>