zoukankan      html  css  js  c++  java
  • CSS布局

    1流动模型

    先来说一说流动模型,流动(Flow)是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

    流动布局模型具有2个比较典型的特征:

    第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div,h1,p)宽度显示为100%。

    第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)

    右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素。

    2.浮动模型

    块状元素这么霸道都是独占一行,如果现在我们想让两个块状元素并排显示,怎么办呢?不要着急,设置元素浮动就可以实现这一愿望。

    任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动,如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。

    div{
        200px;
        height:200px;
        border:2px red solid;
        float:left;
    }
    <div id="div1"></div>
    <div id="div2"></div>

    3.层模型

    什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。

    如何让html元素在网页中精确定位,就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位(positioning)属性来支持层布局模型。

    层模型有三种形式:

    1、绝对定位(position: absolute)

    position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。

    2、相对定位(position: relative)

    需要设置position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。

    3、固定定位(position: fixed)

    。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,

    position:fixed;

    4、relative 和 absolute的合用

    5.颜色值

    关于颜色的css样式也是可以缩写的,当你设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半。

    例子1:

    p{color:#000000;}

    可以缩写为:

    p{color: #000;}

    例子2:

    p{color: #336699;}

    可以缩写为:

    p{color: #369;}

    6.字体缩写

    网页中的字体css样式代码也有他自己的缩写方式,下面是给网页设置字体的代码:

    body{
        font-style:italic;
        font-variant:small-caps; 
        font-weight:bold; 
        font-size:12px; 
        line-height:1.5em; 
        font-family:"宋体",sans-serif;
    }
    

    这么多行的代码其实可以缩写为一句:

    body{
        font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
    }

    注意:

    1、使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。

    2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

    一般情况下因为对于中文网站,英文还是比较少的,所以下面缩写代码比较常用:

    body{
        font:12px/1.5em  "宋体",sans-serif;
    }

    只是有字号、行间距、中文字体、英文字体设置。

    7.长度值

    长度单位总结一下,目前比较常用到px(像素)、em、% 百分比,要注意其实这三种单位都是相对单位。

    就是本元素给定字体的 font-size 值,如果元素的 font-size 为 14px ,那么 1em = 14px;如果 font-size 为 18px,那么 1em = 18px。如下代码:

    p{font-size:12px;text-indent:2em;}

    上面代码就是可以实现段落首行缩进 24px(也就是两个字体大小的距离)。

    3、百分比

    p{font-size:12px;line-height:130%}


    8.水平居中设置--行内元素

    如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的

    9.水平居中设置--定宽块状元素

    满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中:

    html代码:

    <body>
      <div>我是定宽块状元素,哈哈,我要水平居中显示。</div>
    </body>

    css代码:

    <style>
    div{
        border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
        
        200px;/*定宽*/
        margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
    }
    
    </style>

    也可以写成:

    margin-left:auto;
    margin-right:auto;

    10.水平居中总结-不定宽块状元素

    在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素:块状元素的宽度width不固定。)

    不定宽度的块状元素有三种方法居中(这三种方法目前使用的都很多):

    1. 加入 table 标签
    2. 设置 display: inline 方法:与第一种类似,显示类型设为 行内元素,进行不定宽元素的属性设置
    3. 设置 position:relative 和 left:50%:利用 相对定位 的方式,将元素向左偏移 50% ,即达到居中的目的

    这一小节我们来讲一下第一种方法:

    为什么选择方法一加入table标签? 是利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度(table其长度根据其内文本长度决定),因此可以看做一个定宽度块元素,然后再利用定宽度块状居中的margin的方法,使其水平居中。

    第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。

    第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。

    举例如下:

    html代码:

    <div>
     <table>
      <tbody>
        <tr><td>
        <ul>
            <li>我是第一行文本</li>
            <li>我是第二行文本</li>
            <li>我是第三行文本</li>
        </ul>
        </td></tr>
      </tbody>
     </table>
    </div>

    css代码:

    <style>
    table{
        border:1px solid;
        margin:0 auto;
    }
    </style>

    11.不定块状元素方法(二)

    除了上一节讲到的插入table标签,可以使不定宽块状元素水平居中之外,本节介绍第2种实现这种效果的方法,改变元素的display类型为行内元素,利用其属性直接设置。

    第二种方法:改变块级元素的 display 为 inline 类型(设置为 行内元素 显示),然后使用 text-align:center 来实现居中效果。如下例子:

    html代码:

    <body>
    <div class="container">
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
        </ul>
    </div>
    </body>

    css代码:

    <style>
    .container{
        text-align:center;
    }
    /* margin:0;padding:0(消除文本与div边框之间的间隙)*/
    .container ul{
        list-style:none;
        margin:0;
        padding:0;
        display:inline;
    }
    /* margin-right:8px(设置li文本之间的间隔)*/
    .container li{
        margin-right:8px;
        display:inline;
    }
    </style>

    这种方法相比第一种方法的优势是不用增加无语义标签,但也存在着一些问题:它将块状元素的 display 类型改为 inline,变成了行内元素,所以少了一些功能,比如设定长度值。

    12.不定块状元素方法(三)

    除了前两节讲到的插入table标签,以及改变元素的display类型,可以使不定宽块状元素水平居中之外,本节介绍第3种实现这种效果的方法,设置浮动和相对定位来实现。

    方法三:通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。

    我们可以这样理解:假想ul层的父层(即下面例子中的div层)中间有条平分线将ul层的父层(div层)平均分为两份,ul层的css代码是将ul层的最左端与ul层的父层(div层)的平分线对齐;而li层的css代码则是将li层的平分线与ul层的最左端(也是div层的平分线)对齐,从而实现li层的居中。

    代码如下:

    <body>
    <div class="container">
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
        </ul>
    </div>
    </body>

    css代码:

    <style>
    .container{
        float:left;
        position:relative;
        left:50%
    }
    
    .container ul{
        list-style:none;
        margin:0;
        padding:0;
        
        position:relative;
        left:-50%;
    }
    .container li{float:left;display:inline;margin-right:8px;}
    </style>

    这三种方法使用得都非常广泛,各有优缺点,具体选用哪种方法,可以视具体情况而定。

    13.垂直居中--父元素高度确定的单行本

    我们在实际工作中也会遇到需要设置垂直居中的场景,比如好多报纸的文章标题在左右一侧时,常常会设置为垂直居中,为了用户体验性好。

    这里我们又得分两种情况:父元素高度确定的单行文本,以及父元素高度确定的多行文本。

    本节我们先来看第一种父元素高度确定的单行文本, 怎么设置它为垂直居中呢?

    父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度,line-height: 顾名思义,行高(行间距),指在文本中,行与行之间的 基线间的距离 )。

    line-height 与 font-size 的计算值之差,在 CSS 中成为“行间距”。分为两半,分别加到一个文本行内容的顶部和底部。

    这种文字行高与块高一致带来了一个弊端:当文字内容的长度大于块的宽时,就有内容脱离了块。

    如下代码:

    <div class="container">
        hi,imooc!
    </div>

    css代码:

    <style>
    .container{
        height:100px;
        line-height:100px;
        background:#999;
    }
    </style>

    14.垂直居中--父元素高度确定的多行文本(方法一)

    父元素高度确定的多行文本、图片等的竖直居中的方法有两种:

    方法一:使用插入 table  (包括tbody、tr、td)标签,同时设置 vertical-align:middle。

    css 中有一个用于竖直居中的属性 vertical-align,在父元素设置此样式时,会对inline-block类型的子元素都有用。下面看一下例子:

    html代码:

    <body>
    <table><tbody><tr><td class="wrap">
    <div>
        <p>看我是否可以居中。</p>
    </div>
    </td></tr></tbody></table>
    </body>

    css代码:

    table td{height:500px;background:#ccc}
    

    因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。

    15.垂直居中--父元素高度确定的多行文本(方法二)

    16.隐形改变display型

    有一个有趣的现象就是当为元素(不论之前是什么类型元素,display:none 除外)设置以下 2 个句之一:

     1. position : absolute 

     2. float : left 或 float:right 

    简单来说,只要html代码中出现以上两句之一,元素的display显示类型就会自动变为以 display:inline-block(块状元素)的方式显示,当然就可以设置元素的 width 和 height 了,且默认宽度不占满父元素。

    如下面的代码,小伙伴们都知道 a 标签是 行内元素 ,所以设置它的 width 是 没有效果的,但是设置为 position:absolute 以后,就可以了。

    <div class="container">
        <a href="#" title="">进入课程请单击这里</a>
    </div>

    css代码

    <style>
    .container a{
        position:absolute;
        200px;
        background:#ccc;
    }
    </style>

    想不起 display:inline-block 是做什么的小伙伴们,单击“元素分类--内联块状元素”可返回到前面小节进行复习。

  • 相关阅读:
    用学习逃避成长,听新知缓解焦虑
    谈谈“人”和“技能”
    SpringMVC的工作原理
    Spring MVC 处理静态资源文件
    nrpe的安装设置
    Maatkit工具使用&lt;一&gt;之mysql主从数据校验工具
    phpcgi占用cpu100%的一次排障之旅
    nginx支持cgi
    如何查看服务器RAID卡信息的SHELL脚本和命令介绍
    Mysql的一次经典故障
  • 原文地址:https://www.cnblogs.com/alantechnique/p/5740981.html
Copyright © 2011-2022 走看看