zoukankan      html  css  js  c++  java
  • CSS基础知识点(一)

    CSS(Cascading Style Sheets)全称为:层叠样式表。

    1、HTML元素类型

    (1) 内联元素(inline):可以理解为“文本模式”,即从左到右顺序显示,不单独换行。常用的内联元素有:a, img, input, select, lable, span, textarea 等,和一些文本标记标签,如:small, big, strong, em, i, b(加粗), sub(下标), sup(上标), u(下划线)等。

    (2) 块级元素(block):单独一行,没有特殊定位时,从上到下依次排列 (文档流)。常见的块级元素包括:div, h1—h6, ul, li, ol, p, table, form 等。

      css中,我们可通过 display:block; 将内联元素定义为块级元素,换行显示;通过 display:inline; 使块级元素行内显示。

     

    2、块级元素的定位

      position有4种定位类型,影响元素框的生成方式:

    (1) static:默认定位方式。

    (2) relative:相对定位。元素框偏移某个距离,不可以层叠。相对于其在普通流中的位置进行移动,依然存在于文档流中。

    (3) absolute:绝对定位。元素从文档流中删除,可以层叠显示,层叠可以通过z-index属性设置。相对于其最近的一个有定位设置的父元素进行绝对定位,如果不存在这样的父对象,则相对于body定位。

    (4) fixed:固定定位。与absolute相似,fixed相对于浏览器窗口对元素定位。(低版本的IE不支持)

     

    3、浮动 float

      在css中,任何的元素都可以浮动。给元素的float属性赋值后,就是脱离文档流,进行左右浮动,紧贴着父元素(默认为body文本区域)的左右边框,此浮动元素在文档流空出的位置,由后续的(非浮动)元素填充上去:块级元素直接填充上去,若跟浮动元素的范围发生重叠,浮动元素覆盖块级元素。内联元素:有空隙就插入。

    使用float会造成“塌陷”问题,为解决这个问题,这里给出2种方法(借鉴):

    (1) 在使用float元素的父元素结束前加一个高为0宽为0且有clear:both样式的div :

    代码:
    <div>
      <div><span>块1</span> float:left </div>
      <div><span>块2</span> float:left</div>
      <div><span>块3</span> float:left</div>
      <div></div>
    </div>

    (2) 在使用float元素的父元素添加 overflow:hidden;

     

    4、'display'、'position' 和 'float' 的关系

    (1) 浮动或绝对定位的元素,只能是块级元素或表格。

    (2) "position:absolute;" 和 "position:fixed;" 优先级最高,有它存在的时候,浮动不起作用。

    (3)  如果 'display' 的值为 'none',那么 'position' 和 'float' 不起作用。


    5、z-index 不起作用

    z-index起作用的前提是元素要有position属性;
      有时候position为relative是z-index也不去作用,这时候修改为absolute;有浮动时可能也会导致z-index失效,这时候仍是修改它的position属性;
     
    6、文本溢出处理
    (1) overflow:hidden,隐藏溢出文本。
    (2) world-wrap:单词是否换行显示,break-word允许拆分长单词。
    (3) text-overflow:当文本溢出包含元素时发生的事情。
      注意:我们要想实现溢出文本以省略号显示,必须强制定义:文本在一行内显示(white-space:nowrap)和溢出内容为隐藏(overflow:hidden)。
      例:p{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
     
    7、border
    一条边为透明: border-bottom-color:transparent;左上圆角:border-top-left-radius:5px;
    border-radius的含义是:圆角.border-radius:100px / 10px;是一种缩写方法.如果“/”前后的值都存在,那么“/”前面的值设置其水平半径,“/”后面值设置其垂直半径。
    (1)css制作小三角(朝下的红色小三角): 
    .san{ 
       0;
      border-top: 5px solid red;
      border-right: 5px solid transparent;
      border-left: 5px solid transparent;
    }
     
    8、阴影效果
    例:box-shadow:1px 2px 5px #ccc;
      参数说明:(X轴偏移量 Y轴偏移量 模糊扩散范围 颜色),前两个参数为0表示,阴影为四周都有;可以添加多个阴影,eg:box-shadow:1px 2px 5px #ccc,1px 1px 3px #ccc inset(内部阴影)。
     
    9、背景图片的设置
      {background-image:url(a.jpg); 200px; height:200px;}这里的宽度和高度设置的时盒子的大小,并非背景图片的大小。
      注意:在盒子中添加背景图片时,要给出盒子的高度,否则图片不显示。
         Internet Explorer 9+、Firefox、Chrome、Safari 以及 Opera 支持新的背景属性。
     
    (1)background-size 设置背景图片的大小
    常见的属性值:
    • cover:保持图像的宽高比,把背景图片扩展来完全覆盖背景区域;
    • contain:保持图像的宽高比,将图片缩放到高度或宽度正好适应定义背景区域;
    • 数值显示:background-size:100px 200px;(背景图片固定大小)
    • 百分比显示:background-size:50% 80%;(图片拉伸,使宽度为背景区域的50%,高度为被背景区域的80%)。
    (2) background-attachment 设置背景图像是固定还是随着滚动
    常用属性值:
    • scroll:滚动,默认值;
    • fixed:固定;
    (3) background-position 设置背景图片位置
    需要先设置图像为固定,CSS中背景图片定位方法 background-attachment:fixed;
    • center:上下左右居中;
    • background-position:top center;水平靠上,左右居中
    • 数值显示:background-position:100px 200px;距顶端100px,距左边200px;
    • 百分比显示:background-position:20% 50%;
    (4) background-clip 属性规定背景的绘制区域
    • border-box:背景被裁剪到边框盒 (默认值);
    • padding-box:背景被裁剪到内边距框;
    • content-box:背景被裁剪到内容框;
    (5) background-origin 属性规定背景的定位区域
    • border-box:背景相对于内边距框来定位(默认值);
    • padding-box:背景相对于边框盒来定位;
    • content-box:背景相对于内容框来定位;
    (6) 多重背景图

      div { background-image: url(' img1.jpg '), url(' img2.jpg '); } 

    10、背景颜色设置

    背景设置多个颜色,过渡效果:background-image:linear-gradient(to bottom ,red,yellow);

     
    11、透明度设置
    IE:filter:alpha(opacity:30);
    FF/Chrome:opacity:0.3;
     
    12 checkbox和radio设置对齐。
    .checkbox {vertical-align:middle; margin-top:-2px; margin-bottom:1px;}
     
    13、去除某些元素的默认样式
      apprence:none;
      -webkit-apprence:none;
     
    14、设置placeholder的样式
      placeholder是HTML5  input的新属性,英文意思是占位符。
      ::-webkit-input-placeholder
      ::-moz-placeholder
     

      #field1::-webkit-input-placeholder { color:#00f; }

     
    14、鼠标样式 cursor
    cursor: pointer;      手;
    cursor: wait;           沙漏;
    cursor: help;           帮助;
    cursor: text;            文字/编辑;
    cursor: move;         可移动(四角标示);
    cursor: n-resize;     向上改变大小(North)
    cursor: s-resize;      向下改变大小(South)
    cursor: e-resize;      向右改变大小(East)
    cursor: w-resize;     向左改变大小(West)
    cursor: ne-resize;    向右上改变大小(North-East)
    cursor: nw-resize;   向左上改变大小(North-West)
    cursor: se-resize;     向右下改变大小(South-East)
    cursor: sw-resize;    向左下改变大小(South-West)
     
     
     
     
     
  • 相关阅读:
    CentOS虚拟机和物理机共享文件夹实现
    集训第六周 数学概念与方法 概率 数论 最大公约数 G题
    集训第六周 数学概念与方法 概率 F题
    集训第六周 E题
    集训第六周 古典概型 期望 D题 Discovering Gold 期望
    集训第六周 古典概型 期望 C题
    集训第六周 数学概念与方法 UVA 11181 条件概率
    集训第六周 数学概念与方法 UVA 11722 几何概型
    DAG模型(矩形嵌套)
    集训第五周 动态规划 K题 背包
  • 原文地址:https://www.cnblogs.com/telnetzhang/p/5544309.html
Copyright © 2011-2022 走看看