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. 阮一峰：MVC、MVP和MVVM的图示

    阮一峰:MVC.MVP和MVVM的图示:http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html

  2. 百度用AR复现朝阳门，野心渐明直指AR平台

    近日,支付宝推出基于"AR+LBS"的AR实景红包后,BAT的另一个巨头百度也忍不住展示了自家AR技术.12月22日上午11点,百度邀请了一众媒体朋友前往朝阳门地铁站F口,体验期最 ...

  3. Ubuntu安装Mysql过程及远程问题解决

    ubuntu下执行 sudo apt-get instlll mysql-server sudo apt-get install mysql-client 安装过程中会有文字界面设置密码 牢记密码 M ...

  4. INSTALL_FAILED_NO_MATCHING_ABIS

    在运行写好的cocos的demo时候,安装出现以下问题: 后来发现是因为自己用cygwin生成的x86的.so文件跟自己的魅族3机器CPU不适配!!! 参考:http://stackoverflow. ...

  5. putty完全使用手册--多窗口---git提交---连接数据库--自动日志显示

    01 putty dev 192.168.3.38 02 cd /home/gongfu/tripb/cranedev02.1 git status git add git commit git pu ...

  6. 1、第一个SpringMVC程序

    1.创建如下项目结构 2.在src下的com.springmvc下创建User.java package com.springmvc; public class User { private Stri ...

  7. 自定义MVC框架(一)-（没有基于xml的）

    0.创建oracle的sql语句如下 --创建表 create table userinfo(id number primary key,uname varchar2(20),password var ...

  8. 二维离散平稳小波重构iswt2

    clc,clear all,close all; load woman; [cA,cH,cV,cD]=swt2(X,2,'haar');%用haar小波基进行2尺度平稳小波分解 Y=iswt2(cA, ...

  9. 实现类似QQ自拍头像的功能（demo源码）

    在很多软件系统中,都允许用户设置自己的头像,甚至可以直接使用摄像头照相作为自己的头像,就像QQ的自拍头像功能一样. 这种功能是如何实现的了?最直接的,我们可以使用Windows提供的VFW技术或Dir ...

  10. 手机下的ev.pageX无效

      把  ev.pageX  换成  e.originalEvent.targetTouches[0].pageX;   例子: var start_x, start_y, end_x, end_y, ...