zoukankan      html  css  js  c++  java
  • css布局与盒子模型

    一、    盒子模型

     

    注:

    1、红色为border;

    2、背景应用于内容、内边距、边框组成的区域;

    3、Width和height指的是内容区域的高度和宽度。

    边框属性:

    1、  padding属性:(默认靠左上)

     padding: 10px;           ---------内容与四边框的距离为10px;

            10px, 0px, 10px, 0px;-------上右下左

    padding-left: 10px;       ----------内容与上边框的距离为10px;

    2、  margin属性:(同上)

    3、  border属性:

    border: 5px solid blue;

    border-5px;

    border-style:solid/dashed;

    border-color:blue;

    border-top: 5px solid blue;

    border-top-8px;

    注:

    距离可以用像素表示,也可以用百分比表示;也可设置AUTO.

    二、css定位

    position: relative/fixed/absolute

    1、  相对定位:

    会按照元素的原始位置对改元素进行移动;

    2、  绝对定位:

    相对与最近的已定位的父级元素进行移动如果没有已定位的父级元素,则系那个对于最初的包含快;

    3、  固定定位:相对于浏览器的定位liru某些网站的右下角弹窗;

    4、  流式布局:

    Float: right (从右往左依次) /left(从左往右)

    注:一条边框会占一个像素; 所有div都必须设置定位。

  • 相关阅读:
    C++ Low level performance optimize
    简单find命令的实现
    数据结构学习之栈
    随机数的生成
    数据结构学习(一)
    C复习---动态内存分配
    (转)虚拟文件系统(VFS)浅析
    (转) 中断处理程序&中断服务例程
    Gradle系列教程之依赖管理
    Gradle系列教程之依赖管理
  • 原文地址:https://www.cnblogs.com/chenguanai/p/6567809.html
Copyright © 2011-2022 走看看