zoukankan      html  css  js  c++  java
  • css(4)

    类选择器和id选择器都有父子选择器。

    在css文件中国,有时候为了简化样式,可以把相同的样式拿出来放在一起。

    display:inline

    display:block

    行内元素里只能放行内元素,而块内元素内部可以放行内元素和块内元素。

    清除掉li中文字前的点,可以使用list-style-type:none来搞定。

    还有浮动。

    标准流:写在前面出现在前面,写在后面的元素出现在后面。

    盒子模型

    每个html元素都可以看做一个盒子。那么它们就有四个东西:

    从元素看,margin-top,从div看就是padding-top.

    使用padding可能会将盒子撑大,而使用margin不当可能使元素被挤出来。

    优先选择margin.

    css核心-浮动

    浮动:元素默认是纵向排列,但是当我们需要横向排列时,使用float:left

    当某些元素过大时会卡住其他div。

    你可以这么理解浮动:如果一个元素向右/左浮动则:

    1.它本身会尽可能向右/左移动,直到碰到边框或者别的浮动元素,特别强调浮动对块内元素和行内元素都生效

     2.元素向右/左浮动,就相当于让出自己的左/右边,这就解释了笔记css(3)中截图中出现的问题。

    补充:html中可以使用<pre></pre>保留文本中的原有格式。

    浮动-清除浮动

    如果不希望别的元素在某个元素的左边或者右边,可以使用清除浮动的方法clear:right;clear:left;clear:both.

    css核心内容-浮动

    css(四大)核心内容-定位

    css定位属性允许你对元素进行定位,position属性。

    定位-基本概念

    static(默认值):元素框正常生成。块内元素生成一个矩形框,作为文档流/标准流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。

    元素仍保持其未定位前的形状,它原本所占空间仍保留,从这一角度看,好像该元素仍然在文本流/标准流。

    其实相对是相对原有的空间的移动。

    relative:元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。从这一角度看。

    absolute(绝对定位):absolute定位是对离自己最近的那个非标准流盒子而言的

    css的定位有以下几种:

    1.static定位

    这个是默认的方式.

    2.relative定位(相对定位)

    元素框偏移某个位置(left和top),元素本身形状不变化,它原本所占有的空间仍然保留。

    3.绝对定位

    元素从原来的位置脱离,并让出自己的空间,后面的元素就会占有让出的空间。

    特别说明  1.relative的参照点是它原来的位置,进行再定位。

    2.absolute定位是离自己最近的那个非标准流。

    绝对布局的代码展示如下所示:

    <!DOCTYPE html>
    <html>
      <head>
        <title>relative.html</title>
        
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        
        <link href="relative.css" type="text/css" rel="stylesheet">
    
      </head>
      
      <body>
        <div class="s1">内容1</div>
        <div class="s1">内容3</div>
        <div class="s1">内容4</div>
        <div class="s2">abc<div id="special" class="s1">内容2</div></div>
      </body>
    </html>

    css文件如下所示:

    .s1{
        width:100px;
        height:60px;
        background-color:gray;
        float:left;
        margin-left:4px;
    }
    
    #special{
        /*position:relative;*//*这里我们使用了相对定位*/
        position:absolute;
        left:40px;/*在原来的位置,向左移动多少(如果希望向左边移动,则值就是负数)*/
        top:100px;/*在原来的位置,向下移动大小(如果希望向上移动,则值是负数)*/
        /*坐标体系是原来的位置*/
        /*相对原来的位置移动*/
    }
    
    .s2{  
        position:relative;
        left:200px;
        top:100px;
        width:300px;
        height:100px;
        float:left;
        background-color:green;
    }

    运行结果如下所示:

    如果定位是static,会发现left(margin-left),right(margin-right)没有作用。

    对static而言,left和right属性是不生效的,但是对于absolute和relative是生效的。

    fixed:和absolute很像,元素框表现类似于absolute,不过其包含块是元素框本身。

    fixed只认body。

  • 相关阅读:
    201521123051 《Java程序设计》 第二周学习总结
    201521123001《Java程序设计》第11周学习总结
    201521123001《Java程序设计》第12周学习总结
    201521123001《Java程序设计》第11周学习总结
    201521123001《Java程序设计》第10周学习总结
    201521123001《Java程序设计》第9周学习总结
    201521123001《Java程序设计》第8周学习总结
    201521123001《Java程序设计》第7周学习总结
    201521123001《Java程序设计》第6周学习总结
    201521123001《Java程序设计》第5周学习总结
  • 原文地址:https://www.cnblogs.com/liaoxiaolao/p/9737466.html
Copyright © 2011-2022 走看看