CSS入门经典-知识点摘录

简介:

Width属性的“收缩”和“扩展”适应

所有带width属性的元素都有一个默认的auto值,但在使用auto宽度时并不是所有元素都具有相同的效果。例如,<table>元素只是水平扩展以容纳其中的数据,这种方法称为“收缩适应”。另一方面,<div>元素则尽可能水平扩展其宽度,这种方法称为“扩展适应”。

计算选择器的针对性

作为对样式表优先级的一个补充,每个样式表中的选择器也存在优先级顺序。这种优先级由选择器的针对性决定。比如,id选择器最有针对性,通用选择器最为一般化。在他们之间,选择器的针对性使用以下公式计算:

1、 设一个变量a,若样式是通过(X)HTMLstyle属性应用的,a的值为1,否则为0.

2、 计算选择器中ID属性的数量,和为变量b的值。

3、 计算选择器中属性、伪类和类名的数量,三者之和为变量 c的值。

4、 计算选择器中元素名的数量,和为变量d的值。

5、 忽略伪元素

.把每个变量中的数字连接在一起得到选择器的针对性。连接是一个编程术语,表示粘合。在这里,将abcd连接得到abcd,而不是计算abcd之和得到另一个变量e

选择器

选择器类型

针对性

*

通用选择器

0000

(a=0,b=0,c=0,d=0)

li

元素名

0001

(a=0,b=0,c=0,d=1)

ul li

元素名

0002

(a=0,b=0,c=0,d=2)

div h1+p

元素名

0003

(a=0,b=0,c=0,d=3)

input[type=’text’]

元素名+属性

0011

(a=0,b=0,c=1,d=1)

.someclass

类名

0010

(a=0,b=0,c=1,d=0)

div.someclass

元素名+类名

0011

(a=0,b=0,c=1,d=1)

div.someclass.someother

元素名+类名+类名

0021

(a=0,b=0,c=2,d=1)

#someid

ID

0100

(a=0,b=1,c=0,d=0)

div#someid

元素名+ID

0101

(a=0,b=1,c=0,d=1)

style(属性)

style(属性)

1000

(a=1,b=0,c=0,d=0)

在针对性图表中包括了前置0来表示连接是如何工作的,但实际上要省去。要决定优先级的次序,只需要简单地确定最大的数字。当两个或多个选择器有相同的优先级,最后一个将优先适用。Style属性比所有其他规则都优先。

important规则

随着CSS中的层叠机制而来的是重写它的需求。这就是!important规则的来源。!important语法出现在声明中,在属性值之后,结束声明的分号之前。该语法由两个部分组成:一个感叹号作为分隔符,然后是important 关键字。分隔符标志着一个组成部分的结束,另一个组成部分的开始。在这里感叹号标志着声明的结束。Important关键字必须紧跟着出现,然后是结束整个声明的分号。

如:

P{

Background:lightblue !important;

}

该规则优先于style属性。

margin属性来水平对齐元素

atuo关键字和margin属性一起协作可以左对齐、居中对齐或者右对齐一个元素。

左对齐时margin-left设为0,margin-right设为auto,右对齐反之,居中对齐则左右都是auto

IE(有别于标准)可以使用text-align属性来对齐元素。这个技术在其他浏览器中不起作用。

宽度和高度的auto

在默认情况下,widthheight属性的值为auto,所以当不指定宽度和高度时,他们的值都就是auto关键字。Auto关键字会根据应用的元素类型发生改变。当它应用在<div>元素上时,意味着元素将横跨所有可用控件;垂直方向上,会扩展到容纳元素内部所有的内容,包括文本、图像或者其他盒子。具有这种行为的元素叫做块级元素有<div><p><h1>~<h6><form><ul>元素等。

浮动盒模型

浮动的元素会被重新定位,以便允许其他的内容在它们周围浮动,这种行为很独特。关于这种行为的描述如下:

1、 浮动元素的外边距不会折叠,不管它们如何靠近

2、 只有浮动元素后面的元素内容会被该浮动元素所影响。就是说浮动元素后面元素的背景、外边框、边框、内边距和宽度(盒模型和尺寸)都不受影响。

3、 浮动元素总是会被当作块级元素来对待

当一个元素浮动时,它表现得像一个块级元素,但有一个主要区别:它的大小设置变成水平方向和垂直方向都是收缩适应。这意味着在浮动一个<div>元素时,它的尺寸只会扩展到足够容纳里面的内容。

回顾相对定位:

1、 相对定位类似于静态定位,其元素保持在正财的文档流中,但这也是仅有的相似之处。

2、 相对定位元素可以用作绝对定位元素的参考点。

3、 相对定位元素可以接受4种偏移属性的组合方式有:toplefttoprightbottomleftbottomright,浏览器将忽略除此之外的其他种组合方式。例如,不能对一个相对定位的元素同时使用topbottom偏移属性。

4、 相对定位的内容可以堆叠和分层放置在Z轴上



原文发布时间为:2011-05-21


本文作者:vinoYang


本文来自云栖社区合作伙伴CSDN博客,了解相关信息可以关注CSDN博客。

目录
相关文章
|
5天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
27 0
|
5天前
|
人工智能 前端开发 开发者
「CSS 只要三节课」之入门
「CSS 只要三节课」之入门
7 0
|
5天前
|
前端开发 UED
【专栏:CSS 基础篇】CSS 入门:给网页添加样式
【4月更文挑战第30天】CSS是网页设计的关键,用于控制网页样式和布局。它通过选择器(如元素、类和ID)来设定颜色、字体、对齐、背景等属性。CSS可内嵌、外部引用或行内设置。布局技巧包括浮动、定位和弹性盒子。响应式设计利用媒体查询适应不同设备。不断实践和学习CSS,能提升网页的吸引力和用户体验。一起探索CSS的魅力吧!
|
5天前
|
Web App开发 编解码 前端开发
|
5天前
|
前端开发 JavaScript
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
前端 富文本编辑器原理——从javascript、html、css开始入门
28 0
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
|
5天前
|
前端开发 JavaScript 索引
前端 富文本编辑器原理——从javascript、html、css开始入门(一)
前端 富文本编辑器原理——从javascript、html、css开始入门
38 0
|
5天前
|
前端开发 搜索推荐 容器
《CSS 简易速速上手小册》第1章:CSS 基础入门(2024 最新版)
《CSS 简易速速上手小册》第1章:CSS 基础入门(2024 最新版)
22 0
|
5天前
|
XML 编解码 前端开发
css设计文本样式 前端开发入门笔记(十二)
css设计文本样式 前端开发入门笔记(十二)
8 0
|
5天前
|
Web App开发 XML 前端开发
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
33 0
|
5天前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
22 1