CSS概要
laiqun@msn.cn

Contents

1. css的引入

  1. 使用style属性

    <div style="background:#ff0000"> <div>

  2. 在head标签中加入style标签

    <html>
    <head>
       <style>
    
   .main{
    
     background:#ff0000;
    
   }
    
   </style>
    </head>
    <body>
        <div class="main">
        </div>
    </body>
    </html>

  3. 在head标签中使用link标签引入外部的css文件

<html>
<head>
    <link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
</head>
<body>
    <h1>我通过外部样式表进行格式化。</h1>
    <p>我也一样！</p>
</body>
/html>

2. css的选择器及效果图

选择器用来制定那些节点需要使用样式
 
  • CSS 元素选择器
  • CSS 选择器分组
  • CSS 类选择器详解
  • CSS ID 选择器详解
  • CSS 属性选择器详解
  • CSS 后代选择器
  • CSS 子元素选择器
  • CSS 相邻兄弟选择器
  • CSS 伪类
  • CSS 伪元素

参照：w3school

3. css 盒模型

设置了width 和height属性后。默认：width和height只与content（内容）有关。

设置了box-sizing:border-box后，我们设置的width和height，不再只是content的宽度高度，而是content的宽度高度+padding（内边距）+border（边框）的和。

4. css 浮动

4.1. 浮动的作用：

  1. 左浮动，让出右边的空间，且让出的右边的空间，可以给给其他元素占；
  2. 右浮动，让出左边的空间，且让出的左边的空间，可以给给其他元素占。

4.2. 浮动的影响：

  1. 如果未设置宽度，则浮动元素的宽度随内容增长而增长。而不是默认的占父元素的100%

    示例：第一个div元素未使用浮动，未设置宽度，默认占父元素的100%；第二个div使用了浮动，不设置宽度的话，默认宽度为内容所占的宽度。

  2. 浮动会会清除后面元素的新起一行的效果，紧跟其后的块元素不会新起一行

    示例：

如何清楚浮动造成的紧随其后的元素无法新起一行的问题？方法：清除浮动

5. css 定位

5.1. static

默认的定位方式。特点：从左往右，从上往下。

5.2. fixed

相对与左上角定位。特定：不随鼠标移动而变化，表现为一直跟随的广告，一直跟随的导航条等。

5.3. relative

特点：原先位置保留，相对与原先位置定位。

  1. 如果对应的块元素没有设置宽度，则宽度为内部内容的宽度
  2. 原来的位置保留，是相对于它自己以前位置的偏移 top left right bottom

  3. 一旦设置了 就有了bottom top left right 属性以及z-index属性

    举例：

5.4. absolute

特点：寻找其祖先元素第一个已经定位的元素（fixed relative absolute），相对它为原点进行定位。 
1. 如果对应的块元素没有设置宽度，则宽度为内部内容的宽度 
2. 原来的位置不保留。寻找其祖先元素中已经定位的（定位方式为fixed relative absolute中的任意一种）的元素。以它的为参照点进行定位 
3. 一旦设置了 就有了bottom top left right 属性以及z-index属性

 

CSS概要的更多相关文章

  1. Css概要与选择器，刻度单位

    目录 一.CSS3概要 1.1.特点 1.2.效果演示 1.3.帮助文档与学习 二.选择器 1.1.基础的选择器 1.2.组合选择器 1.3.属性选择器 1.4.伪类 1.5.伪元素 三.特殊性(优先 ...

  2. web前端基础——初识CSS

    1 CSS概要 CSS(Cascading Style Sheets)称为层叠样式表,用于美化页面(单纯HTML写的页面只是网页框架和内容的组合,相当于赤裸的人,而CSS则是给赤裸的人穿上华丽的外衣) ...

  3. CSS 学习手册

    目录 CSS 简介 1.CSS 简介 CSS 概述 层叠次序 2.CSS 基础语法 CSS 语法 值的不同写法和单位 记得写引号 多重声明: 空格和大小写 3.CSS 高级语法 选择器的分组 继承及其 ...

  4. Bootstrap01

    Bootstrap01内容概要 一.使用Bootstrap的步骤 1.下载Bootstrap类库,包含三个部分,fonts,css,Bootstrap 2.导入项目中,在头部引入JQ,css和Boot ...

  5. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  6. CSS布局相关概要

    一.文档流 运用css布局首先要具备一些概念上的知识,文档流的概念充斥着布局的整个过程.浏览器渲染页面是有先后顺序的,其顺序是至上而下,根据HTML的文档结构进行渲染. 二.div+css 耳熟能详的 ...

  7. 前端MVC学习总结（一）——MVC概要与angular概要、模板与数据绑定

    一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...

  8. HTML5 学习总结（一）——HTML5概要与新增标签

    一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...

  9. CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

    web前端开发者最最注的内容是三个:HTML.CSS与JavaScript,他们分别在不同方面发挥自己的作用,HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能 ...

随机推荐

  1. ubuntu 禁用快捷键

    System Settings > Keyboard > Shortcuts 点击要禁用的快捷键,按键盘"Backspace"键,就可以禁用了

  2. tomcat 启动超时

    1.如果是eclipse 里集成的tomcat  在server 下 双击tomcat 在tomcat 配置里将启动时间延长,保存再启动. 2.如果是非集成的tomcat  则在tomcat的配置文件 ...

  3. 【瞎搞搞之】 window_x64微信小程序环境搭建

    所需文件地址如下: http://pan.baidu.com/s/1nv0IHhn(ylk7)   1.下载微信开发工具0.7.0_x64 安装完成后,打开程序,进行微信扫码登录 2.下载微信开发工具 ...

  4. jquery收集--php收集所有post数据

    $model = D('Account'); $data = $model->create(); jquery收集数据  sendinvite.serialize() function init ...

  5. 朱丽叶—Cuda+OSG

    #include <cuda_runtime.h> #include <osg/Image> ; typedef struct cuComplex { float r; flo ...

  6. 【转】Informix数据表结构分析资料整理之约束查询代码

    原文地址:http://blog.csdn.net/xqf222/article/details/6271219 本文主要整理了Informix数据库相关系统表数据,已分析整个Informix数据表结 ...

  7. MVC3+EF4.1学习系列(九)-----EF4.1其他的一些技巧的使用

    上节通过一系列重构 简单的项目就实现了 不过还有些EF的功能没有讲 这节就通过项目 讲讲EF其他的功能与技巧 一.直接执行SQL语句 通常来讲 EF 不用写SQL语句的  但是 在有些场合  比如对生 ...

  8. [转]详细的mysql时间和日期函数

    这里是一个使用日期函数的例子.下面的查询选择了所有记录,其date_col的值是在最后30天以内: mysql> SELECT something FROM table WHERE TO_DAY ...

  9. markdown 自己搞一个浏览工具

    注意!`下不能有空行 `上也不能有空行 问题未解决 <!DOCTYPE html> <html lang="en"> <head> <me ...

  10. 请问如何查询一个APP的Android和iOS下载量？

    作者:Jasmine Jiang链接:http://www.zhihu.com/question/28533067/answer/87871598来源:知乎著作权归作者所有,转载请联系作者获得授权. ...