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. 【HELLO WAKA】WAKA iOS客户端 之二 架构设计与实现篇

    上一篇主要做了MAKA APP的需求分析,功能结构分解,架构分析,API分析,API数据结构分析. 这篇主要讲如何从零做iOS应用架构. 全系列 [HELLO WAKA]WAKA iOS客户端 之一 ...

  2. ZeroMQ中PUB-SUB模式测试

    因为公司有需求,对程序模块之间通信效率有较高的需求.之前公司用的通信组件是ActiveMQ,根据网上公布的测试结果显示其效率比较低, 后来考虑准备在新的项目中开始使用ZeroMQ.看了几天发现用起来比 ...

  3. 第一百一十五节，JavaScript，DOM操作表格

    JavaScript,DOM操作表格 学习要点: 1.操作表格 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DO ...

  4. [妙味JS基础]第八课：return、定时器基础

    知识点总结 return 1)函数名+括号 ＝ return 返回值 2)所有的函数默认的返回值 ＝ 未定义 3)return后面的代码不执行 arguments  =>为实参的集合,当参数个数 ...

  5. jQuery第四章

    jQuery中的事件和动画 一.jQuery中的事件 1.加载DOM (1)执行时机 $(document).ready()方法和window.onload方法有相似的功能,但是在执行时机方面是有区别 ...

  6. img 鼠标滑上后图片放大,滑下后图片复原

    <style type="text/css">img{ -webkit-transition: ease .2s; transition: ease .2s; -web ...

  7. javascript 奇淫巧技1

    1.首次为变量赋值时务必使用var关键字 变量没有声明而直接赋值得话,默认会作为一个新的全局变量,要尽量避免使用全局变量. 2.使用===取代== ==和!=操作符会在需要的情况下自动转换数据类型.但 ...

  8. Llinux环境下编译并使用OpenCV

    http://docs.opencv.org/2.4/doc/tutorials/introduction/linux_install/linux_install.html http://stacko ...

  9. Java线程经典面试题

    53道Java线程面试题 下面是Java线程相关的热门面试题,你可以用它来好好准备面试. 1) 什么是线程? 线程是操作系统能够进行运算调度的最小单位,它被包含在进程之中,是进程中的实际运作单位.程序 ...

  10. Openjudge-计算概论（A）-比饭量

    描述: 3个人比饭量,每人说了两句话: A说:B比我吃的多,C和我吃的一样多 B说:A比我吃的多,A也比C吃的多 C说:我比B吃得多,B比A吃的多. 事实上,饭量和正确断言的个数是反序的关系. 请编程 ...