组团学
学习方向
登录/注册

CSS其他属性

阅读 (756)

一、列表属性

  • 定义列表符号样式

    {list-style-type：disc|circle| square|none}
    属性值 说明
    disc 实心圆
    circle 空心圆
    square 实心方块
    none 去掉列表符号

  • 使用图片作为列表符号

    {list-style-image:url(图像路径)； }

    url(所使用图片的路径及全称)

  • 定义列表符号的位置

    {list-style-position:outside|inside；}

    取值： outside(外边) inside(里边)；

  • 简写（应用最多）

    {list-style:none ; } /*去掉列表样式*/

    简写可直接设置列表属性值

二、边框属性

  • 说明

    给边框添加样式

  • 语法

    {border-style: solid/dashed/dotted/double; }
    属性值 说明
    solid 实线
    dashed 虚线
    dotted 点状线
    double 双线
    none/0 去掉边框

  • 边框宽度

    border-width：取值；

  • 边框颜色

    border-color:取值；

  • 单独设置某个方向的边框属性：

    border-top：上边框
border-bottom:下边框
border-left:左边框
border-right:右边框

border-top-style:取值； 
border-top-width：取值； 
border-top-color:取值；

  • 简写

border.png

三、背景属性

CSS 可以设置背景颜色和背景图片，并且可以对图片进行相关设置。

背景颜色

选择符{background-color:red;}
/* 简写：*/
background:red;

背景图片

  • 说明

    网页中有两种图片形式：一种是插入图片，另一种是背景图。

    ​ 插入图片：属于网页内容，也就是结构。

    ​ 背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等。

  • 语法

    选择器{background-image : none | url (url) }

    参数：

    none : 无背景图（默认的）
    url : 背景图像路径

    背景图片的显示原则：

    1. 容器尺寸等于图片尺寸，背景图片正好显示在容器中;
    2. 容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；
    3. 容器尺寸小于图片尺寸，只显示元素范围以内的背景图。
    4. 加载背景图必须有容器区域；

  • 注意

    1. background-image 允许指定一张图片展示在背景中（只有CSS3才可以多背景），通常可以和 background-color 连用。 如果图片不重复，图片覆盖不到的地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。
    2. 建议背景图片后面的地址，url不要加引号。

背景图片平铺

  • 说明

    平铺

  • 语法

    选择器{background-repeat:no-repeat/repeat/ repeat-x/repeat-y }

    repeat : 　背景图像在纵向和横向上平铺（默认的）

    no-repeat : 　背景图像不平铺

    repeat-x : 　横向平铺

    repeat-y : 　纵向平铺

  • 注意

    设置背景图片时，默认把图片在水平和垂直方向铺满。

背景图片位置

  • 语法

    选择器{background-position:水平方向属性值 垂直方向属性性;}

    水平方向值：left/center/right或数值

    垂直方向值： top/center/bottom或数值

  • 注意

    1. 水平向右 垂直向下移动 是正数值
    2. 水平向左 垂直向上移动 是负数值
    3. 当两个值都是center，写一个值就可以

背景附着

  • 说明

    设置或检索背景图像是随对象内容滚动还是固定的。

  • 语法：

    选择器{background-attachment : scroll | fixed }

  • 参数：

    scroll ：背景图像是随对象内容滚动
    fixed：背景图像固定

背景简写

  • 说明

    为了方便记忆，提升可读性，背景图片各属性的书写顺序：

    background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

  • 语法

    选择符{background：属性值1 属性值2 属性值3;}

div{background:#00ff00 url（背景图片的路径及全称） no-repeat scroll center top；}

常用的图片格式

  • jpg

    有损压缩格式，靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 )

  • gif

    有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像;

  • png

    有损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是fireworks的 源文件格式，适用于颜色数量较少的图像;

四、浮动属性

普通流（normal flow）

  • 说明

    前面我们提过，网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？

    CSS的定位机制有3种：普通流（标准流）、浮动和定位。

    普通流又称为“文档流”，或者“标准流”，实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种默认的排列方式，不会出现例外的情况的布局叫做普通流布局。

    普通流（标准流）：类似列车在既定轨道上形式（在地面上）

    浮动：好比飞机脱离地面，浮动在空中，但也按照一定的航线飞行。

    定位：好比宇宙飞船或卫星，相对于地球摆放

浮动

  • 说明

    元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。浮动的目的：就是为了让多个块级元素同一行上显示。

  • 语法

    div{float:left/right/none}

  • 特性

    1. 浮动只有左右浮动。

    2. 浮动元素脱离标准流，不占位置，会影响标准流。（标准流在下面，浮动元素漂在标准流的上面）

    float_0.png

    1. 浮动首先创建包含浮动元素的父盒子。因为，浮动的元素总是找距离自己最近的父级元素对齐，但是不会超出父元素的边框和内边距。

    float_1.png

    <title>浮动</title>
<style>
        #div1 {
            width: 100px;
            height: 70px;
            background-color: hotpink;
            float: left;
            border: 1px solid red;
        }

        #div2,#div3,#div4 {
            width: 100px;
            height: 70px;
            background-color: hotpink;
            float: left;
            border: 1px solid yellow;
        }
</style>

<div class="father">
        <div class="child"></div>
</div>
    1. 父盒子里的所有子盒子都设置浮动，才能显示在一行上。也就是说，若其中一个子级有浮动，则其他子级都需要浮动。

    float_2.png

    <style>
        #div1 {
            width: 100px;
            height: 100px;
            background-color: hotpink;
            float: left;
            border: 1px solid red;
        }

        #div2,#div3,#div4 {
            width: 100px;
            height: 100px;
            background-color: hotpink;
            float: left;
            border: 1px solid yellow;
        }
    </style>
<div class="wrap">
        <div id="div1">div1</div>
        <div id="div2">div2</div>
        <div id="div3">div3</div>
        <div id="div4">div4</div>
    </div>
    1. 元素添加浮动后，会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少。浮动根据元素书写的位置来显示相应的浮动。

    float_3.png

    <style> 
	div {
            height: 200px;
            background-color: pink;
            float: left;
            /* 块级元素添加浮动后，会具有行内块元素的特性 */
        }

        span {
            background-color: hotpink;
            float: left;
            /* 行内元素添加浮动后，会具有行内块元素的特性 ，可设置高度*/
            height: 100px;
        }
    </style>

<div id="div1">div1</div>
    <div id="div2">div2</div>
    <span>行内元素</span>
    <span>行内元素</span>

    1. 总结

      float 浮 漏 特

      浮： 加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。
      漏： 加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏 给了标准流的盒子。
      特： 特别注意，首先浮动的盒子需要和标准流的父级搭配使用， 其次 特别的注意浮动可以使元素显示模式体现为行内块特性。

浮动的影响

浮动的影响：对附近的元素布局造成改变，使得布局混乱

因为浮动元素脱离了普通流，会出现父级元素高度坍塌的现象：原来的父容器高度是内部元素撑开的，但是当内部元素浮动后，脱离普通流浮动起来，那父容器的高度就坍塌，变为高度0px。

正常标准流：

父容器被子容器高度撑开。

float_4.png
子容器浮动后：

子容器浮动，脱标，父容器没有了高度，就不会被撑开。

float_5.png

当然，我们可以通过给父容器指定高度来解决塌陷问题。但是，很多情况下我们不方便给父容器指定高度，比如新闻，你不知道新闻里有多少字。一般情况下，我们是让下面的内容自动撑开父容器，而不是写死高度。

清除浮动方法

  • 说明

    清除浮动本质是闭合浮动，把浮动的元素圈到里面，让父容器闭合，不让妖怪（浮动元素）出来兴风作浪。

  • 语法

    div{clear:属性值;}
    属性值 描述
    left 清除左侧浮动带来的影响
    right 清除右侧浮动带来的影响
    both 同时清除左右两侧浮动带来的影响

方法1：额外标签法

  • 说明

    W3C推荐的做法，通过在浮动元素末尾添加一个空的标签或则其他标签br等亦可。如

    。

  • 原理

    添加一个空div，利用CSS提供的clear:both清除浮动，让父级div能自动获取到高度。

  • 优点

    通俗易懂，书写方便。浏览器支持好，不容易出现怪问题。

  • 缺点

    添加许多无意义的标签，结构化较差。 我只能说，w3c你推荐的这种方法，你不值得拥有。。。

方法2：父级添加overflow清除浮动

  • 说明

    “子不教父之过”，在父容器上做处理。通过触发BFC的方式，实现清除浮动效果。（BFC后面讲解）

  • 语法

    .father{
    overflow: hidden|auto|scroll; 
    /*三个取值都可以实现。*/
}

  • 原理

    使用overflow:hidden时，浏览器会自动检查浮动区域的高度。

  • 优点

    代码简洁，浏览器支持好。

  • 缺点

    内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。（必须定义width或zoom:1，不能和position配合使用，因为超出的尺寸的会被隐藏。）

  • 建议

    只推荐没有使用position或对overflow:hidden理解的小伙伴儿使用。

方法3：父级添加伪类清除浮动

  • 说明

    :after 方式为空元素的升级版，好处是不用单独加标签了。

  • 使用

     .clearfix:after {  
     content: "."; 
     display: block; 
     height: 0; 
     clear: both; 
     visibility: hidden;  
  }   

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */

  • 优点

    符合闭合浮动思想，更具有结构语义化，大型网站都有使用如：腾迅，网易，新浪等等。

  • 缺点

    由于IE6-7不支持:after，需要使用 zoom:1触发hasLayout，才能让主流浏览器都支持。

  • 建议

    推荐使用，建议定义公共类，以减少CSS代码。

    163_clearfix.png

  • 注意

    content:"." 里面加一个小点，或者其他符号，尽量不要为空，否则再firefox 7.0前的版本会有生成空格。

方法4：父级添加双伪元素清除浮动

  • 说明

    为了更加符合浮动的闭合思想，为父级添加before和after双伪元素来清除浮动。

  • 使用

    .clearfix:before,.clearfix:after { 
  content:"";
  display:table;  
  /* 这句话可以触发BFC BFC可以清除浮动 */
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

  • 优点

    代码更简洁，代表网站： 小米、腾讯等。

  • 缺点

    由于IE6-7不支持:after，使用 zoom:1触发hasLayout。

需要 登录 才可以提问哦
头像
：
回复