zoukankan      html  css  js  c++  java
  • css样式之 浮动-盒子模型-定位

    1.块级元素

    1.1 常用的块级元素

        div p h1~h6 ul ol li hr table

    1.2 块级元素的特点

        1.2.1 块级元素默认显示在父标签的左上角。

        

        1.2.2 块级元素默认沾满一行(沾满整个文档流)

        1.2.3 块级元素可以变为行内元素 

    display:inline;/*变为行内元素*/
    

      1.2.4 块级元素可以通过下面属性,同时拥有行内元素和块级元素的特点(width、height受到影响,不会单独占满一行) 

    display:inline-block;/*同时具有块级元素和行内元素的特点*/
    

    2.行内元素(内联元素)

        2.1 常用的行内元素有哪些

    <a></a> 
    <span></span>
    <img />
    <input />
    

      2.2 行内元素的特点

          2.1 行内元素影响的范围是文字区域大小,不受到width,height影响。

            2.2 行内元素不会单独占满一行(不会占满文档流)

            2.3 行内元素可以变为块级元素

     display:block
    

    3.浮动(float)

        3.1 float使得当前块级元素脱离文档流,通过left、right属性来控制此元素的漂浮方向

        3.2 清除浮动(清除对当前元素的影响)

    clear:both/*清除左右浮动*/
    clear:left/*清除左浮动*/
    clear:right/*清除右浮动*/
    

    4.内间距、外边距(padding、margin)

        4.1 padding的属性

    padding:10px; /*上下左右都为10px*/
    padding:10px 20px /*上下10px 左右为20px*/
    padding:10px 20px 30px/*上10px 左右为20px 下30px*/
    padding:10px 20px 30px 40px/*上右下左*/
    
    
    /*单一使用时,可单独操作4个方向*/
    padding-left
    padding-top
    padding-right
    padding-bottom
    

     4.2 margin的属性与padding相同,都支持对于块级元素,但是margin对于行内元素只支持左右的外边距,不支持上下的外边距。

    5.三种定位方式(relative、absolute、fixed)

      5.1、绝对定位(absolute)

         5.1.1 设置为绝对定位时候,会脱离文档流,不会单独占满一行,不会受到浮动的影响。

         5.1.2 当设置为绝对定位的时候,元素的方位就会受到窗体的top、left、bottom、right的影响

      5.2、相对定位(relative)
         5.2.1当设置为相对定位的时候,并没有脱离文档流,此时浮动是会对他产生影响的。
         5.2.2当设置为相对定位的时候,元素的方位是相对于元素的父标签,由于标签并没有脱离文档流,所以它四周的标签是占着位置的。

      5.3、固定定位(fixed)
         在给定的位置不动。

  • 相关阅读:
    【java基础】(5)静态绑定和动态绑定
    Java的接口和抽象类
    【java基础】(3)Java继承内存分配
    【java基础】(2)Java父类与子类的 内存引用讲解
    [ECMAScript 6]学习小结之---模块
    CDN 内容分发网络
    移动前端开发之viewport的深入理解
    px em rem
    https 结合使用 对称加密和非对称加密
    java Queue中 remove/poll, add/offer, element/peek区别
  • 原文地址:https://www.cnblogs.com/JTLZY/p/4830526.html
Copyright © 2011-2022 走看看