zoukankan      html  css  js  c++  java
  • css--盒子,浮动

     

    • Margin(外边距) - 清除边框外的区域,外边距是透明的。
    • Border(边框) - 围绕在内边距和内容外的边框。
    • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
    • Content(内容) - 盒子的内容,显示文本和图像

    总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

    总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

    外边距设置四周边距的顺序上右下左设定,

    Margin:                     上=下  左=右,也可以单独设定 例如margin-top

    Padding设置内边距 如padding:20px;

    Border边框border:2px solid black;

    溢出处理

                       溢出隐藏

                       overflow:hiddeen

                       溢出就加个滚动条

                       overflow:scroll;

    浮动

    1. 相对定位(相对本身div位置,原来的位置,)

                       posistion:relative

                       相对定位必须搭配position使用

    例如

    距离原来右边移动20px

    posistion:relative

                           right:20px;

                       2. 绝对定位:(相对于第一个带position样式的父元素

                        如果父元素没有position会一直往上找父元素直到找到为止, 

    如果元素没有已定位的父元素,那么它的位置相对于<html>:

    如果都没有就找body标签)

                       position:absolute;

                       3. 固定定位:(相对于屏幕定位)

                          position;fixed

            Z轴坐标,数值谁大谁先显示,用于两个div块重叠时使用

                       z-index: 1000;

    清除浮动

    1. 浮动:float:left/right;不能靠中间;

               两个div块并列就都向左浮动,

      2. 清除浮动, div块不想被浮动的div快盖住。

     clear:left/right; both(两者)

  • 相关阅读:
    Linux系统挂载点与分区的关系(转载)
    读书笔记深入linux内核架构Chapter 2 part2
    读书笔记深入linux内核架构Chapter 2 part1
    读书笔记深入linux内核架构Chapter9
    读书笔记深入linux内核架构Chapter8part2
    鞋匠的烦恼
    和最大的连续子数组
    wxLog 的使用
    suffix trie
    trie
  • 原文地址:https://www.cnblogs.com/layuechuquwan/p/11075207.html
Copyright © 2011-2022 走看看