分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

Web-9月14日随笔

发布时间:2023-09-06 02:18责任编辑:蔡小小关键词:Web

—.Css层叠性质:

      1.继承性(后代或子代继承父级元素的颜色,字体·,文本)

      2.层叠性:层叠性是选择器的一种的能力

          第一种情况:没有选择任何标签或者选择器起的名字(类),走继承性(如果有多个属性继承,就近原则)。

          第二种情况:权重一样大,就近原则(后面的会把前面的覆盖掉);   谁的权重大就选谁。

  二.

标准文档流(浏览器的排版是根据元素的特征,块/行级,从上往下,从左到右进行排版,这就是标准文档流。)

三.

浮动:float:left/right(左浮/右浮)  【浮动后的元素脱离标准文档流】        浮动还可以造成文字环绕的效果;

clear:both(浮动所带来的危害:撑不起父级高度了,所以得用clear:both)

清除浮动的三种方法:

           1.直接给父级元素添加高度  2.给父级添加overflow-hidden(超出隐藏)  3.给浮动元素的后面添加一个空的div 添加样式为clear:both。

块级元素浮动:

   范例:  <!DOCTYPE  html>

      <html>

       <head>

       <meta charset="UFT-8">

       <title>块级元素浮动效果</title>

     【 <style>

        .one{width:200px;

            height:200px;

            float:left   }

        .two{width:300px;

            height:200px; }   (效果:第二个隐藏在了第一个后面;

原因:因为块状元素都是独占一行,给第一个添加浮动后脱离了标准流,不受控制了。而第二个属于标准流,所以把它当成了第一位)】

       </style>  

          </head>

            <body>

        <div class=“one”>(块状元素的特点:独占一行,自动换行,元素呈块状,可设宽高)

           哈哈哈哈

        </div>

        <div class=“two”>

          嘿嘿嘿嘿

        </div>

       </body>  

      </html>  

行内元素浮动:   

      <!DOCTYPE   html>

      <html>

         <head>          

        <meta charset="UFT-8">

        <title>行内元素浮动</title>

         <style>

          .one{  width:“100px”   

             height:100px;

             float:left     }

          .two   {  width:“100px”   

             height:100px;

              float:left     }【效果:给浮动后,行内元素有了宽高,能并排排列】

        </style>   

         </head>

         <body>

          【<sapn class=“one”>哈哈哈</span>

          <span class=“two”>嘿嘿嘿</span>】(行内元素特点:可以与其他元素在一行显示,不换行,不能设置宽高,根据内容的多少决定空间的大小)

         </body>

      </html>

四 : 1. visibility:hidden(隐藏)

    2. disply:none(隐藏)

  二者区别:第一个隐藏占据空间,第二个隐藏不占据空间。

Web-9月14日随笔

原文地址:https://www.cnblogs.com/lovels/p/9647902.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved