zoukankan      html  css  js  c++  java
  • 接着说一些有关排版的一些东西

      排版的标准 (子绝父相)

      列如:

      <body>

        <布局>   relative

          <结构>  absolute

            <布局>  relative

              <结构>  absolute

              </结构>  absolute

            </布局>  relative

          </结构>  absolute

        </布局>  relative

      </body>

      a是个行级元素 ,高不起作用

      行级元素想设置宽高 只能用 行级块(display="line-block")

      border的方向  先左上 在右上 之后右下 最后左下

            border:9px 7px 3px 0;

      css可以继承的标签有 :font系列;text系列;color;行高

      white-space:nowrap (规定段落的文本换不换行)

      word-wrap:break-word (规定单词换不换行)

      <子绝父相> 中心思想

      做一个三角形:宽高必须是0;

      div{

      0;

      height:0;

      border-top:transparent 1px solid;

      border-left:transparent 1px solid;

      border-bottom:transparent 1px solid;

      border-right:transparent 1px solid;

    }

      标准流中 margin (外边距)为负数叫释放空间

      margin(外边距)对布局的影响

      属性值:数字         (数字分正负)

      标准流中 (static)

      margin-left:20px; 向右走20px

      margin-left:-20px; 向左走20px

      margin-top:20px; 向下走20px

       margin-top:-20px; 向上走20px;

      接下来就不一样喽

      margin-right:-20px; (当前元素不动 ,后面的元素向左走)

      margin-bottom:-20px;( 当前的元素不动,后面的元素向上走)

      注意:margin为负数会增大元素的宽(前提:当前元素没有设置宽高)

      position:absolute;(margin为负的情况)

      position:absolute;(对body来说的,让边框居中)

      top:50%;

      left:50%;

      200px;

      height:200px;

      border:red 1px solid;

      margin-left:-100px;

      margin-top:-100px;    (知道元素的宽高)

      当后面的宽不够了 margin-left:-20px; 会无形中增加20的宽

      float中的margin为负数的情况,也是常用的圣杯布局

      margin-left:-50px 当前的元素向左走 会覆盖前面的

      margin-right:-50px 覆盖后一个元素 后面的元素向左走

      margin为负 :无论在什么条件下都释放自己的空间,如果自己的宽高不够,就会把自己的宽高献出去

      两种模式 (三个模块来说)

      双飞翼 (两端自适应,中间固定)

      圣杯 (两端固定,中间自适应)

      边框阴影:box-shadow:   0       0       10px   #888

                  负左右正  下正上方    阴影大小  颜色

      尽量不要调图片的大小,那样会使图片失真,所以尽量改代码

      文本超出后省略点 : text-overflow:ellipsis;

      

  • 相关阅读:
    PMP(第六版)十大知识领域、五大项目管理过程组、49个过程矩阵
    快速开发平台分享-UCML快速开发七种武器
    敏捷开发干货-快速开发平台的主题行为模型介绍
    MACHINE LEARNING
    What is “Neural Network”
    VS打开项目或解决方案卡死,一直处于未响应状态。
    Sql Server 本地(客户端)连接服务器端操作
    阿里云服务器,Sql Server 本地连接服务器端问题记录
    <%@ Register TagPrefix="uc1" TagName="user" Src="../Control/user.ascx" %>什么意思?
    IIS网站部署后,程序常见错误记录
  • 原文地址:https://www.cnblogs.com/shangjun6/p/9726381.html
Copyright © 2011-2022 走看看