CSS入门四

一、可视化格式编排

基本框:内容区及其周围的补白、边框、边界

块级元素:如段落、H1标题、列表及列表元素。

垂直方向格式编排

高度

元素高度是由其内容决定的。

假如height比显示内容所需的值小,浏览器会提供一种在不增大高度的前提下显示全部内容的方式。可能会为元素增加一个滚动条。

在实际应用中,大多数浏览器不是这样做的。他们会简单的增加元素的高度。如同height的值被设为auto一样。

压缩垂直边界:相邻边界的压缩。

水平方向格式编程

与垂直方向格式编排相反,水平方向格式编排复杂些。

水平方向边界不压缩

水平方向的属性

七属性:margin-left、border-left、padding-left、width、padding-right、border-right、margin-right

其中三个属性可设置为auto:width、左边界、右边界,其余必须设置特殊值,否则会缺省为0

使用auto

如果width、margin-left和margin-right只有其中一个设置为auto,而其他的值都被指定,则设置为auto属性的值等于使元素框宽度等于父元素框宽度所需的值。

从某种意义讲,auto可说明为:弥补其他部分与所要求的总和之间的差别。

多于一个的auto

其中三个属性中,有两个设置为auto齐纳概况

两边界都设置为auto,自动边界会使元素居中

两边界之一及宽度设置为auto,则设置为auto的边界降为0

三个属性都设置为auto,则两边界设置为0,width设为最大可能值

负边界

补白、边框及内容区宽度均不能设置为负数,只有边界可以小于0

如果只有两个边界待压缩,一个正,一个负,正边界值减去负边界的绝对值,或,负值加上正值,结果是元素间的距离

列表项

块级元素

浮动元素

如果一个文本元素浮动,它的宽度将趋近与0,。

浮动元素的宽度缺省为auto,这样就缺省为0,然后增大到浏览器允许的width。

浮动:细节

规则

1、浮动元素的左(右)外边沿也许不唯一父元素的左(右)外边沿内。

2、浮动元素的左(右)外边沿必须在先出现文档资源的浮动元素的右(左)外边沿的右(左)侧,除非后一个元素的顶端低于前一个元素的低端。

防止浮动元素的相互重写。

3、左浮动元素的右外边沿不能位于其右侧的右浮动元素左外边沿的右侧,右浮动元素的左外边沿不能位于其左侧的左漂移元素右外边沿的左侧

4、浮动元素的顶端不能高于其父远的内顶端。

5、浮动元素的顶端不能高于先于它出现的浮动元素或段落的顶端。

6、浮动元素的顶端不能高于行框的顶端,如果行框中有先于浮动元素的内容。

7、一个向左(右)浮动的元素,如果其左(右)侧仍存在浮动元素,则不能够使它的右(左)外边沿处于容纳它的右(左)外边沿的右(左)侧。

8、浮动元素的位置应尽可能高。

9、向左浮动的元素必须尽可能的向左放置,向右浮动的元素必须尽量向右放置。较高的位置优先给更偏左或偏右的元素。

内联元素

行布局

二、定位

允许用户精确定义元素框出现的相对位置,可以相对于它通常出现的位置,相对于其上级元素,相对于另一个元素,甚至相对于浏览器本身。

基本概念

包含快:格式编排发生的关联场景。

一个加粗元素的包含块可以是该元素所出现的段落。

包含块为所有后辈元素简历了一个格式编排的上下文。

包含块的重要方式是:元素可定位于他们的包含块之外。叫做“定位场景”

定位模式

      position

          允许值           static | relative | absolute | fixed | inherit

          初始值            static

          可否继承        否

          适用于            所有元素

static 元素框按普通方式生成

relative 元素框偏移一定的距离

absolute 元素框完全从文档流中消除并根据其包含块定位

fixed 元素的定位方式同absolute一样,但它的包含块是视区本身

inherit 这个值从上级元素继承得到

边偏移

使用四个不同的属性来描述定位元素的边相对于其包含块的偏移

      top,right,bottom,left

          允许值           <长度> | <百分比> | static-posiition | auto | inherit

          初始值            auto

          可否继承        否

          适用于            定位元素(即:position值不是static的元素)

     注意:百分比是指相对于包含块的宽度(right,left)或是包含块的高度(top,bottom)。

宽度与高度

      Width

          允许值           <长度> | <百分比> | auto

          初始值            auto

          可否继承        否

          适用于            块级元素和替换元素

     注意:百分比是指相对于包含块的宽度。

      height

          允许值           <长度>  | auto

          初始值            auto

          可否继承        否

          适用于            块级元素和替换元素

限制宽度

      min-width

          允许值           <长度> | <百分比> | auto

          初始值            与用户代理有关

          可否继承        否

          适用于            除非替换内联元素和表格元素外的所有元素

     注意:百分比是指相对于包含块的宽度。

      max-width

          允许值           <长度> | <百分比> | auto

          初始值            与用户代理有关

          可否继承        否

          适用于            除非替换内联元素和表格元素外的所有元素

     注意:百分比是指相对于包含块的宽度。

      min-height

          允许值           <长度> | <百分比> | inherit

          初始值            0

          可否继承        否

          适用于            除非替换内联元素和表格元素外的所有元素

     注意:百分比是指相对于包含块的宽度。

      max-height

          允许值           <长度> | <百分比> | none | inherit

          初始值            none

          可否继承        否

          适用于            除非替换内联元素和表格元素外的所有元素

内容溢出及剪切

溢出

      overflow

          允许值           visible | hidden | scroll | auto | inherit

          初始值            visible

          可否继承        否

          适用于            块级元素和替换元素

visible 表示内容在元素框之外的部分为可见

scroll 元素内容被剪切而不可见,但提供了使额外内容可见的方式

hidden 元素的内容被剪切,但没有机制提供给用户获取内容

auto 设置允许用户代理来决定采用哪种行为(只在需要时提供滚动条)

溢出剪切

overflow设置了内容应被剪切,可以使用overflow-clip属性来改变剪切区的形状

      overflow-clip

          允许值           rect(<上>,<右>,<下>,<左>) | <百分比> | auto | inherit

          初始值            auto

          可否继承        否

          适用于            块级元素和带溢出值而不可见的替换元素

元素剪切

clip矩形之内的内容显示,之外的内容不显示

      clip        

          允许值           rect(<上>,<右>,<下>,<左>) | <百分比> | auto | inherit

          初始值            auto

          可否继承        否

          适用于            块级元素和带溢出值而不可见的替换元素

元素可见性

      visibility

          允许值           visible | hidden | collapse | inherit

          初始值           inherit

          可否继承        否

          适用于            所有元素
相对定位

position: relative;

绝对定位

position: absolute;

固定定位

与绝对定位类似,元素完全从文档中移开,而且不跟文档任何部分存在位置相关的关系

position: fixed;

层叠定位元素

      z-index

          允许值           integer | auto

          初始值           auto

          可否继承        否

          适用于            定位元素

允许网页制作者改变元素相互重叠的顺序


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值