CSS综合复习(二)

1.  IE5.x和IE6:width=border+padding+元素的宽度,其他浏览器width=元素的宽度

2.  内边距、外边距的的百分比计算是相对于父元素的宽度计量的

3.  IE7以下背景可以占用border部分,其他浏览器则不是

4.  border-style:可以按下上左右的顺序分别制定各个方向的边框

5.  border-width:关键字thin,medium,thick,可以指定单位

6.  border-style: none;/*一旦设定了样式为none,则border自动设成0*/

7.  外边距合并:当两个外边距相遇时,他们会形成一个外边距,合并后的外边距等于两个发生合并的外边距的高度的较大者,注意:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。如下图:

当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),他们的上边距和下边距也会合并,如下图:

当空元素的(没有边框、填充),只有外边距时也会发生外边距合并,如下图:

如果这个元素遇到另外一个外边距时,还会合并:

意义:几个段落组成的典型文本页面,第一个段落上面的空间等于段落的上外边距。如果没有外边距合并,后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并,段落之间的上外边距和下外边距就合并在一起,这样各处的距离就一致了。

时间: 2024-07-30 20:23:28

CSS综合复习(二)的相关文章

CSS综合复习(三)

1.  三种定位机制:普通流,浮动,绝对定位 2.  行框:由一行形成的水平框,称为行框 3.  position(定位) stattic,元素正常生成,块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置其于父元素中(默认):即没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). relative:元素框偏移某个距离.元素仍保持其未定位前的形状,它原本所占的空间仍保留:相对其原先的位置进行定位. abs

CSS综合复习(一)

1.  css(层叠样式表):样式的优先级按低到高依次为,1)浏览器缺省设置:2)外部样式表:3)内部样式表:4)内联样式表. 尽管默认有这样一个优先级顺序,但当先定义style(内部样式表)再引入文件后,引入文件的样式仍然会重写style中的样式. 2.  背景(background) 背景属性不能被继承 background-color:gray;/*背景图片的优先级大于颜色的优先级,即使将背景色指定放在背景图片的后面,仍然显示图片,而不是背景色*/ background-image:url

CSS综合复习笔记 01

1.1开发前的准备工作            1.配置开发环境(常用前端开发工具) (1)sublime (2)webstorm (3)vscode (4)hbuilder (5)atom 2.建立项目文件夹(为了将与项目相关的文件放在一起,便于管理和以后的维护) 包括与项目相关的一些文件 (1)主页或是首页(index.html.default.html) (2)css文件夹     (存放css文件) 公用样式css文件的常用命名: [1] base.css [2] global.css (

CSS学习(二)—浮动

一. 定义 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 解决的问题:"如何在一行显示多个div元素" 二. 浮动与不浮动区别 图1 图2 区别 不浮动的框是由上往下独占一行的,而浮动的框是紧靠着排列的.图2中d1.d2.d3都是向左浮动的,所以先把d1放在紧靠着父框摆放,然后把d2紧靠着d1摆放,最后d3紧靠着d2摆放.向右浮动亦与之类似. 语法: float : none | left |right 参数: none : 对象不浮动 left :

CSS标签选择器(二)

一.CSS选择器概述 1.1.CSS功能 CSS语言具有两个基本功能:匹配和渲染 当浏览器在解析CSS样式时,首先应该确定哪些元素需要渲染,即匹配哪些HTML元素,这个操作由CSS样式中的选择器负责标识. 只有匹配到具体的对象之后,浏览器才能根据CSS样式声明,决定渲染的效果,并及时呈现在页面中. 1.2.CSS选择类型 标签选择器 ID选择器 类选择器 特殊选择器 1.3.CSS基本语法 二.标签选择器 2.1标签选择器概述 以文档对象类型的元素作为选择器,如p.div,span等. 最常用的

综合练习(二)

1. 定义用户的输入格式 2. 应用程序的输出格式 3. 关于提示信息的思考 1. 定义用户的输入格式 2. 应用程序的输出格式 3. 关于提示信息的思考 综合练习(二),布布扣,bubuko.com

css笔记(二)——几种常用的模式

文本垂直居中 对于行内元素,height会自动收缩到包裹住文本的高度,所以不存在这个问题.但是对于block和inline-block等盒子元素,如果设置了height属性,则文本默认会在上方显示.如果希望文本在垂直方向上居中,可以设置line-height属性等于height属性,或者大于height属性 <div> hello world </div> div { height: 200px; line-height: 200px; } 文本水平居中,图标分列左右两侧 效果是左

HTML/CSS基础教程 二

表 表是十分有用的,用它存储表状的数据更易于阅读.当你想用行列来显示信息时---你猜到了,<table>标签正是你需要的,有许多和表有关的标签,它们都以<table>开始. 表就是将一组数据用行列的形式排列,我们用<tr>标签创建一个表行(table row),<td>标签表示表数据(table date) <!DOCTYPE html> <html> <head> <title>Table Time</

Hibernate复习(二)主要对象

1.SessionFactory 一个SessionFactory实例对应一个数据存储源,应用从SessionFactory中获得Session实例. SessionFactory有以下特点: –它是线程安全的,这意味着它的同一个实例可以被应用的多个线程共享. –它是重量级的,这意味着不能随意创建或销毁它的实例.如果应用只访问一个数据库,只需要创建一个SessionFactory实例,在应用初始化的时候创建该实 例.如果应用同时访问多个数据库,则需要为每个数据库创建一个单独的SessionFac