n  CSS浮动和清除

  • Float：让元素浮动，取值：left（左浮动）、right（右浮动）。
  • Clear：清除浮动，取值：left（清除左浮动）、right（清除右浮动）、both（同时清除上面的左浮动和右浮动）。

1、CSS浮动

l  浮动的元素将向左或向右浮动，浮动到包围元素的边上，或上一个浮动元素的边上为止

l  浮动的元素，不再占空间了，并且浮动元素的层级要高于普通元素。

l  浮动的元素，一定是“块元素”。不管它原来是什么元素。

l  如果浮动元素，没有指定宽度的话，浮动后它将尽可能的变窄。因此，浮动元素一般要定宽和高。

l  一行中的多个元素，要浮动一起浮动，要不浮动都不浮动

浮动元素的功能：可以实现将多个块元素并列显示。

1、 CSS浮动清除

需要在浮动元素的下边，使用清除浮动操作。   clear:both | left | right;

或在父元素使用。  overflow: hidden;

  • CSS清除浮动的功能有两个：（1）可以使包围元素从“视觉上”包住浮动元素，（2）清除之下的其它元素将恢复默认排版。
  • 有浮动就得有清除。
  • 如果包围元素（里面只有浮动元素，没有其它内容）指定了高度，那么可以不使用清除功能。

n  CSS继承性

CSS属性继承：外层元素的样式，会被内层元素进行继承。多个外层元素的样式，最终都会“叠加”到内层元素上。

CSS文本属性都会被继承的：color、font-size、font-family、font-style、font-weight、text-align、text-decoration、text-indent、letter-spacing、line-height等

提示：<body>中的CSS属性会被所有的子元素继承

n  CSS优先级

（1）     单个选择器的优先级

行内样式>id选择器>class选择器>标签选择器

（2）     多个选择器的优先级

多个选择器的优先级，一般情况下，指向越准确，优先级越高。

n  display属性

  • 功能：规定网页元素如何显示的问题。
  • 取值：none（隐藏）、block（以块元素显示）、inline（以行内元素显示）
  • block：可以实现将行内元素转成块元素。
  • inline：可以实现将块元素转成行内元素
  • inline-block：转成行内块元素。

n  overflow属性：当内容溢出时，该如何显示

  • overflow：当内容溢出时，溢出的内容如何显示。取值：visible（可见（默认值））、hidden（影藏）、scroll（出现滚动条）、auto（自动）

n  cursor光标类型

cursor：网页中光标的类型，取值：text（文本）、help（帮助）、pointer（手形）等。

n  CSS定位

  • Position：元素定位方式，取值static、fixed、relative、absolute
  • Static：静态定位（默认状态、不定位）
  • Fixed：固定定位。
  • Relative：相对定位。
  • Absolute：绝对定位。

定位方式，要与定位属性配合使用

  • 定位坐标：指定定位的元素，距离目标元素多远的距离。
  • Left：定位元素，距离目标元素左边的距离。
  • Top：定位元素，距离目标元素上边的距离。
  • Right：定位元素，距离目标元素右边的距离。
  • Bottom：定位元素，距离目标元素下边的距离。

n  固定定位，position:fixed

l  固定定位，是相对于浏览器窗口来进行的定位。

l  固定定位，不占空间，层级要高于普通元素。它不会随着网页的滚动而滚动。

l  如果不指定定位的坐标的话，固定定位元素的位置在原地不动。

l  固定定位元素，一定是“块元素”，不管原来它是什么元素。

n  相对定位，position:relative;

l  相对定位，是相对于“原来的自己”进行定位。

l  相对定位，依然占空间，层级高于普通元素。

l  如果不指定定位坐标的话，相对定位元素的位置在原地不动。

l  相对定位，原来是行内元素，定位后还是行内元素；原来是块元素，定位后还是块元素。

提示：相对定位和绝对定位，一般情况下是配合使用的。

n  绝对定位，position:absolute;

l  相对于祖先定位元素（相对定位），来进行定位。

u  如果它的父元素没有进行任何定位的话，再往上找定位元素。

u  如果一直找到<body>都没有找到定位元素的话，那就相对于<body>来进行定位。

l  绝对定位元素，不占空间，层级要高于普通元素。

l  如果不指定定位坐标的话，绝对定位元素的位置在原地不动。.

l  绝对定位元素，一定是“块元素”，不管原来它是什么元素。

l  多个定位图片层叠时：

n  HTML引入CSS的方法

1、嵌入式

通过<style>标记，来引入CSS样式。

语法格式：<style type=”text/css”></style>

提示：<style>中的CSS样式，只能给当前网页使用。

同一个网页中，<style>标记可以多次使用。

2、外联式

通过<link>标记，来引入一个外部的CSS文件（.css），这样的话，可以实现公共的CSS代码被多个网页共享

<link rel=”stylesheet” type=”text/css” href=”css/public.css”>

<link>标记的常用属性

l  rel：也就是引入的是什么类型的文件，取值：stylesheet。

l  type：内容类型。

l  href：引入的CSS文件地址。

提示：<link>标记放在<head>标记中。

同一个网页中，可以使用多个<link>来链入多个外部文件。

2、 行内式（主要用于js控制元素的样式）

每一个HTML标记，都有一些公共的属性：class、id、title（鼠标放上有一个提示信息）、style。

HTML标记中的style属性的值，与CSS中样式一模一样。

行内样式的优先级最高，比ID选择器还要高。

n  CSS表格属性

Border-collapse：表格边框线合并，取值：collapse

n  盒子模型

我们可以把每一个HTML标记，都看成是一个“盒子”。

“盒子”特征：内容的高度或高度、边框线、内填充、外边距。

“盒子”的总宽度：内容的宽度+边框宽度*2+左填充*2+左外边距*2

n  上下外边距合并问题——这是一种现象

上下两个块元素，如果每一个元素都指定了四个外边距，那么上下相邻的那个外边距会发生合并的现象，合并后取其中较大的外边距。

要实现上下两个<div>之间的距离为100px，该如何实现呢？

1、 上下两个<div>其中一个只指定margin-bottom:100px，而另外一个<div>的margin-top:0px，这样可以实现。

2、 可以在上下两个<div>中间，添加一个空的<div>，并且给空<div>指定高度为100px，也可以实现。

HTML+CSS（12）的更多相关文章

  1. 前端进阶（12） - css 的弱化与 js 的强化

    css 的弱化与 js 的强化 web 的三要素 html, css, js 在前端组件化的过程中,比如 react.vue 等组件化框架的运用,使 html 的弱化与 js 的强化 成为了一种趋势, ...

  2. Web 在线文件管理器学习笔记与总结（11）获取文件夹信息 （12）返回上一级操作

    (11)获取文件夹信息 文件夹没有修改操作. index.php: <?php require 'dir.func.php'; require 'file.func.php'; require ...

  3. 网站静态化处理—web前端优化—中（12）

    网站静态化处理—web前端优化—中(12) Web前端很多优化原则都是从如何提升网络通讯效率的角度提出的,但是这些原则使用的时候还是有很多陷阱在里面,如果我们不能深入理解这些优化原则背后所隐藏的技术原 ...

  4. Netruon 理解（12）：使用 Linux bridge 将 Linux network namespace 连接外网

    学习 Neutron 系列文章: (1)Neutron 所实现的虚拟化网络 (2)Neutron OpenvSwitch + VLAN 虚拟网络 (3)Neutron OpenvSwitch + GR ...

  5. 前端学习 第五弹： CSS （一）

    前端学习 第五弹: CSS (一) 创建css: <link rel="stylesheet" type="text/css" href="my ...

  6. 基于MVC4+EasyUI的Web开发框架经验总结（12）--利用Jquery处理数据交互的几种方式

    在基于MVC4+EasyUI的Web开发框架里面,大量采用了Jquery的方法,对数据进行请求或者提交,方便页面和服务器后端进行数据的交互处理.本文主要介绍利用Jquery处理数据交互的几种方式,包括 ...

  7. Android菜鸟的成长笔记（12）——Handler、Loop、MessageQueue

    原文:[置顶] Android菜鸟的成长笔记(12)——Handler.Loop.MessageQueue 当一个程序第一次启动时,Android会启动一条主线程(Main Thread),主线程主要 ...

  8. Windows Phone开发（12）：认识一下独具个性的磁贴

    原文:Windows Phone开发(12):认识一下独具个性的磁贴 对"磁贴"的理解是一点也不抽象的,为什么呢?只要你愿意启动WP系统,无论你是在模拟器中还是在真机中,是的,桌面 ...

  9. CSS——（2）与标准流盒模型

    部分博客<CSS--(1)基础>中简介了CSS的概念和几种用法,如今主要是介绍其的核心内容. 盒子模型 为了理解盒子模型,我们能够先从生活中的盒子入手.盒子是用来放置物品的,内部除了有物品 ...

随机推荐

  1. MSSQL获取指定日期的SQL语句

    --1.一个月第一天的 SELECT DATEADD(mm,DATEDIFF(mm,0,getdate()),0) --2.本周的星期一 SELECT DATEADD(wk,DATEDIFF(wk,0 ...

  2. HDU 1018 阶乘数的位数

    题目大意: 将一个数开阶乘后得到的值,来求这个值的位数 n! = 1*2*3*4...*n 对于求一个数的位数的方法为ans = lg(n!) + 1 那么就可以看作 ans = lg(1) + lg ...

  3. v$log and v$logfiles

    v$log has one row for each group. v$logfile has one row for each file. There is a status column for ...

  4. DICOM：dcm4che工具包怎样压缩dcm文件探讨（续篇）

    背景 前段时间博文DICOM:dcm4che工具包怎样压缩dcm文件探讨(前篇)提到了一个问题:"利用dcm4che工具包中的dcm2dcm来进行dcm文件的压缩和加压缩.即改变dcm文件里 ...

  5. jQuery.data() 存储数据

    jQuery.data() 的实现方式 jQuery.data() 的作用是为普通对象或 DOM Element 附加数据. 以下将分三个部分分析事实上现方式: 1. 用name和value为对象附加 ...

  6. MVC路由中特殊URL匹配规则

    *匹配*用来匹配URL剩余部分 贪婪匹配规则贪婪匹配会找到最后一个符合条件的“字面量”为止

  7. HDU 1241 Oil Deposits （DFS）

    题目链接:Oil Deposits 解析:问有多少个"@"块.当中每一个块内的各个"@"至少通过八个方向之中的一个相邻. 直接从"@"的地方 ...

  8. Linux C 网络编程——多线程的聊天室实现（server端）

    server端的主要功能: 实现多用户群体聊天功能(此程序最多设定为10人.可进行更改),每一个人所发送的消息其它用户均能够收到.用户能够任意的增加或退出(推出以字符串"bye"实 ...

  9. How to use eclipse quickly

    --> // TODO Quickly find outstanding event 快速查找未完成事件        eg: // TODO Robin   --> Templates  ...

  10. B1297 [SCOI2009]迷路 矩阵

    这个题我觉得很有必要写一篇博客.首先,我们需要知道,假如一个邻接矩阵只有0/1构成,那么它自己的n次方就是走n步之后的方案数.但这个题还有2~9咋办呢.我们观察发现,这个题只有10个点,而且边权< ...