黑马程序员技术交流社区

标题: 【郑州校区】python前端HTML和CSS进阶-2 [打印本页]

---

作者: 谷粒姐姐    时间: 2018-12-5 15:42
标题: 【郑州校区】python前端HTML和CSS进阶-2
-知识点预习

• 1.表单2.元素类型
• 3.浮动
• 4.定位
  
  
  

01- 表单

• form标签 表单用来提交数据
  
  
  • action 要提交的网址,默认是当前网页
  • method 请求  提交方式
    
    
    • 默认get请求   
    • post请求
    • 切换请求方式时注意缓存问题
      
      
      
    
    
• label标签
  
  
  • for属性如果设置的值和 input标签中设置的id属性值一样就可以实现点击label让对应的input成为焦点
    
    
    
• 输入框的两个常用属性：
  
  
  • placeholder 占位提示文字
  • outline:none 输入框的边框
    
    
    
• input标签中的type属性值介绍:
  
  

• select 下拉列表'选择列表'新的标签
  • option 选项textarea标签 多行文本输入框
    
    
  
  

02-搜索条案例

• 文本距离盒子有一定间距时优先考虑使用文字缩进text-indent,如果用内边距还要考虑盒子模型问题
• 文本输入框默认有边框和内边距
• 按钮也有默认边框
• 默认元素会以文字基线"文字底部"来进行元素对齐,用浮动可以解决让元素不以文字基线对齐,也可以解决元素之间默认间距问题
• cursor:pointer 设置鼠标在元素上的样式为小手
  
  

03-块元素特点

• 块元素，也可以称为行元素，布局中常用的块标签如：div、p、ul、li、h1~h6等等都是块元素，它在布局中的行为特点:
  • 1.独霸一行2.宽度默认和父元素一样宽        3.支持所有样式如margin padding等
    
    
  
  

04-块元素的样式重置

• 有些标签是包含默认的样式的:
  • p标签：含有默认外边距ul：含有默认外边距和内边距，以及条目符号        h1~h6标签：含有默认的外边距和字体大小        body标签：含有默认的外边距
    
    
• 实际开发中，为了便于布局我们会把带有默认样式的标签样式清除掉,这个做法就叫样式重置.
• [AppleScript] 纯文本查看 复制代码

  /* 清除标签默认的外边和内边距 */
  
  body,p,h1,h2,h3,h4,h5,h6,ul{
  
      margin:0px;
  
      padding:0px;
  
  }
  
  
  
  /* 清除标签默认条目符号 */
  
  ul{
  
      list-style:none;
  
  }
  
  
  
  /* 将h标签的文字大小设置为默认大小 */
  
  h1,h2,h3,h4,h5,h6{
  
          /* 和父元素的字体一样大 默认16 */
  
      font-size:100%;
  
      /* 根据实际需求来加   */
  
      font-weight:normal;
  
  }
  
  

• 5-行内元素的特点
  • 内联元素，也可以称为行内元素，布局中常用的标签如：a、span等等都是内联元素，它们在布局中的行为:
    • 1.宽高默认和内容决定2.排列在一行,当遇到父元素的边界会自动换行        3.不支持宽高 margin上下 padding上下有问题        4.代码换行后行内元素之间有小间隙        5.行内元素设置文本水平对齐无效,但可以设置他们的父元素的text-align实现子元素水平对齐
      
      
    
    
  06-行内元素的样式重置
  • 其他内联元素"面试前最好看看它们的语义"
  • [AppleScript] 纯文本查看 复制代码

    1、<em> 标签 行内元素，表示语气中的强调词
    
    2、<i> 标签 行内元素，表示专业词汇
    
    3、<b> 标签 行内元素，表示文档中的关键字或者产品名
    
    4、<strong> 标签 行内元素，表示非常重要的内容

  • 包含默认样式的内联元素
    • a标签：含有的下划线以及文字颜色em、i标签：文字默认为斜体        b、strong标签：文字默认加粗        实际开发中，对这些标签进行样式重置。
    • [AppleScript] 纯文本查看 复制代码

      /* 去掉a标签默认的下划线 */
      
      a{
      
          text-decoration:none;
      
      }
      
      /* 去掉标签默认的文字倾斜 */
      
      em,i{
      
          font-style:normal;
      
      }
      
      /* 去掉标签默认的文字加粗(按实际需求) */
      
      b,strong{
      
          font-weight:normal;
      
      }

    • • 解决内联元素间隙的方法:
        • 1、去掉内联元素之间的换行2、将内联元素的父级设置font-size为0，内联元素自身再设置具体的font-size
          
          
        
        
      07-行内元素布局菜单案例
      • 行内元素设置文本水平对齐无效,但可以设置他们的父元素的text-align实现子元素水平对齐
        
        
      08-行内块元素的特性
      • 内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为：
        • 1.元素排列一行2.宽度默认有内容决定        3.元素间有默认间距        4.支持宽高 marign padding等所有样式        5.子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式
          
          
        
        
      • display属性是用来设置元素的类型及隐藏的，属性的值有：
        • 1、none 元素隐藏且不占位置2、block 元素以块元素显示        3、inline 元素以内联元素显示        4、inline-block 元素以内联块元素显示
          
          
        
        
      09-行内块分页导航案例
      • 把li和a都转换成inline-block为了动态性,可以确定子元素的尺寸,父元素的尺寸有子元素撑起来
        
        
      10-浮动元素的特性
      • 如果要实现子元素在父元素中水平居中时不能用浮动
      • 元素浮动特点:
        • 1.只有左和右浮动2.浮动元素遇到父元素或其他元素都会停下来        3.浮动后块元素也会排在一行,宽度会默认有内容决定,相邻元素一行排不下之后会自动换行        4.块元素和行内元素浮动后会自动转换为浮动特性的行内块元素
          浮动可以解决的问题:        1.行内元素及行内块元素之间间距问题        2.垂直外边距不再合并        3.margin-top塌陷问题
          
          
        
        
      11-清除浮动
      • 什么时候需要清除浮动?
        • 当父元素没有设置高度而子元素又全部浮动时,此时父元素的高度就无法通过子元素自动计算了,就要清除浮动来让父元素还能自动计算高度
          清除浮动的方法
        • [AppleScript] 纯文本查看 复制代码

          第一种:父级上增加属性overflow：hidden
          
          
          
          第二种:在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）
          
          
          
          第三种:使用成熟的清浮动样式类，clearfix
          
          .clearfix:after,.clearfix:before{ content: "";display: table;}
          
          .clearfix:after{ clear:both;}
          
          .clearfix{zoom:1;} /* IE下清除浮动及解决margin-top塌陷问题 */

        • -定位
          • 文档流
            • 文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。
              
              
            
            
          • 我们可以使用CSS的position属性来设置元素的定位类型，postion的设置项如下：
            • 1.relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。
              2.absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于window元素进行定位。
            • [AppleScript] 纯文本查看 复制代码

              3.fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
              
              
              
              4.static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。

            • • • 定位元素的偏移        定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值。
                  定位元素层级        定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级
                  
                  
              • 定位元素特性
                • 绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素
                  
                  
                
                
              15-定位案例
            • [AppleScript] 纯文本查看 复制代码

              /* 设置元素圆角,将元素四个角设置4px半径的圆角 */
              
              border-radius:4px;
              
              
              
              /* 设置元素透明度,将元素透明度设置为0.3，此属性需要加一个兼容IE的写法 */
              
              opacity:0.3;
              
              /* 兼容IE */
              
              filter:alpha(opacity=30);

              
              
            • 水平垂直居中提示框案例
              
            • [AppleScript] 纯文本查看 复制代码

              /* 固定定位 */
              
                      position: fixed;
              
              
              
                      /* 水平居中 */
              
                      left: 50%;
              
                      margin-left: -150px;
              
                      /* 垂直居中 */
              
                      top:50%;
              
                      margin-top: -150px;

              
              
            • 定位小结
              • static 默认值,没有定位
                • 使用场景:一般来说不用写，除非想要覆盖之前设置的定位 relative 相对定位   
                • 使用场景:和absolute一起使用，常用于logo的定位。
                  
                  
              • absolute 绝对定位  
                • 使用场景:网页中的logo图片及一定移动动画
                  
                  
              • fixed 固定定位     
                • 使用场景:悬浮在浏览器中的广告窗口
                  
                  
                
                
              
              
              
            
            
          
          
        
        
      
      
    
    
  
  

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2