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. JavaScript动态加载资源【js|css】示例代码

    在开发过程中会用到各种第三方的插件,或者自己写在单独文件中的js方法库或者css样式,在html头部总是需要写一大堆的script和link标签,如果想要自己实现动态的引入资源文件,可以使用开源的re ...

  2. 浅谈position: absolute和position:relative

    一.在此先说一下文档流的概念: 1,文档流定义: 百度百科定义:文档流是文档中可显示对象在排列时所占用的位置. 大多网友的理解:元素的位置由元素在 (X)HTML 中的位置决定.将窗体自上而下分成一行 ...

  3. 深入分析Java Web开发

    Web请求过程 如何发起请求:browser,httpclient http解析:chrome ,cache Dns域名解析:域名缓存 cdn:负载,动态加速,回源 Java I/O I/0类库的基本 ...

  4. javaWEB总结(14):请求的转发和重定向

    通俗理解请求转发与重定向的流程 通俗的来讲:我们可以把请求转发和重定向当成是一种借钱的情景模式. (1)请求的转发:A向B借钱,B自己没有钱,但是向C借到了钱,并且把钱借给了A.A只向B请求了一次. ...

  5. Android 边框圆角

    RelativeLayout 圆角实现:  drawable目录下面定义shape的xml文件: mall_header_rel_bg.xml <?xml version="1.0&q ...

  6. Java线程的几种状态

    一. 线程状态类型1. 新建状态(New):新创建了一个线程对象.2. 就绪状态(Runnable):线程对象创建后,其他线程调用了该对象的start()方法.该状态的线程位于可运行线程池中,变得可运 ...

  7. 《JS权威指南学习总结--8.8.2高阶函数》

    内容要点: 所谓高阶函数(higher-order function)就是操作函数的函数,它接收一个或多个函数作为参数,并返回一个新函数. 例1: //这个高阶函数返回一个新的函数,这个新函数将它的实 ...

  8. JS 之完美运动框架

    完美运动框架是对原来的任意值运动框架的改善和效率的提升,即利用了json对属性进行封装,从而提高效率: window.onload=function(){ var oDiv=document.getE ...

  9. linux下合并pdf

    使用Gost Script和 PDFtk运行如下命令: #gs -q -dNOPAUSE -sDEVICE=pdfwrite -sOUTPUTFILE=Linuxidc.pdf -dBATCH *.p ...

  10. LeetCode OJ 154. Find Minimum in Rotated Sorted Array II

    Follow up for "Find Minimum in Rotated Sorted Array":What if duplicates are allowed? Would ...