CSS基础

作者: H少白 | 来源:发表于2018-01-07 23:05 被阅读0次

1. CSS盒模型

1.1 认识盒模型

盒模型是CSS布局的最基本组成部分，它指定元素如何显示及在某种方式上如何相互交互。页面上的元素都是以一个矩形的表现形式存在的，每个矩形是由元素内容，内补丁（padding），边框（border），外补丁（margin）组成的。内补丁（padding）无论有多大，元素内容（content）的整体大小(宽高)却不会增大。那么内补丁（padding），边框（border），外补丁（margin）之间的关系是什么呢？看下面我自己做的实例。
我先把内补丁（padding），边框（border），外补丁（margin）这三个属性值设为0px，不让它们在盒模型中出现。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
    width: 200px;
    height: 30px;
    padding: 0px;
    border: 0px none;
    margin: 0;
    color: #ffffff;
    background: #00bdbd;
}
</style>
</head>
<body>
<div>我是Adolph，</div>
<div>我喜欢前端，</div>
<div>我是一位前端小白。</div>
</body>
</html>

就会出现这样的结果：

接下来我修改内补丁（padding）的属性值，将其属性值改为30px，将会出现什么效果呢？

<style>
div{
    width: 200px;
    height: 30px;
    padding: 30px;
    border: 0px none;
    margin: 0;
    color: #ffffff;
    background: #00bdbd;
}
</style>

会发现文字内容的空间增大，但是背景色还混在一起。那么也就理解了，如果给一个元素加背景色或背景图片，那么添加的背景色或背景图片也会出现在内补丁（padding）中。为了防止这种视觉上的混淆，我又改了边框（border）的属性值，改为边框粗细为10px，边框颜色为红色的实线边框。代码如下：

<style>
div{
    width: 200px;
    height: 30px;
    padding: 30px;
    border: 10px solid #9d0000;
    margin: 0;
    color: #ffffff;
    background: #00bdbd;
}
</style>

效果如下：

这次能够用红色边框分开元素内容，但是两个div之间的边框还是重合的。那我就用外边框（margin）来改变效果，实现每个元素看起来独立的效果。改变外边框（margin）的属性值，改为50px。代码如下：

<style>
div{
    width: 200px;
    height: 30px;
    padding: 30px;
    border: 10px solid #9d0000;
    margin: 50px;
    color: #ffffff;
    background: #00bdbd;
}
</style>

效果如下：

通过以上的实验过程，不难发现如果给任何一个元素加入背景色或背景图片，都会在内补丁（padding）区域出现，为了避免这种视觉的混淆，就利用边框（border）和外补丁（margin）对元素的周围创建一个隔离带，使用该元素的背景色或背景图片可能与其他元素混淆。这就是内补丁（padding），边框（border），外补丁（margin）这三个属性出现在内容周围，产生一个盒模型的基本作用。

2. CSS常见块元素内联元素其他可变元素

根据CSS规范的规定，每一个网页都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它默认display属性值为“block”，成为“块级”元素；而span元素的默认display属性值为“inline”，为“内联”元素。
块级元素会自动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整这个矩形的样子；内联元素则没有自己的独立空间，它是依附其他块级元素存在的，因此，对内联元素设置高度、宽度、内外边距等属性，都是无效的。

常见块元素：
- address – 地址
- blockquote – 块引用
- center – 举中对齐块
- dir – 目录列表
- div – 常用块级容易，也是css layout的主要标签
- dl – 定义列表
- fieldset – form控制组
- form – 交互表单
- h1 – 大标题
- h2 – 副标题
- h3 – 3级标题
- h4 – 4级标题
- h5 – 5级标题
- h6 – 6级标题
- hr – 水平分隔线
- isindex – input prompt
- menu – 菜单列表
- noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容
- noscript – 可选脚本内容（对于不支持script的浏览器显示此内容）
- ol – 排序表单
- p – 段落
- pre – 格式化文本
- table – 表格
- ul – 非排序列表
常见内联元素：
- a – 锚点
- abbr – 缩写
- acronym – 首字
- b – 粗体(不推荐)
- bdo – bidi override
- big – 大字体
- br – 换行
- cite – 引用
- code – 计算机代码(在引用源码的时候需要)
- dfn – 定义字段
- em – 强调
- font – 字体设定(不推荐)
- i – 斜体
- img – 图片
- input – 输入框
- kbd – 定义键盘文
- label – 表格标签
- q – 短引用
- s – 中划线(不推荐)
- samp – 定义范例计算机代码
- select – 项目选择
- small – 小字体文本
- span – 常用内联容器，定义文本内区块
- strike – 中划线
- strong – 粗体强调
- sub – 下标
- sup – 上标
- textarea – 多行文本输入框
- tt – 电传文本
- u – 下划线
- var – 定义变量
其他可变元素：
- applet – java applet
- button – 按钮
- del – 删除文本
- iframe – inline frame
- ins – 插入的文本
- map – 图片区块(map)
- object – object对象
- script – 客户端脚本

2.1 块级元素和内联元素的转化

前面说过CSS规范的规定，每个网页都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值。为了方便直观的了解块元素和内联元素互相的转化，我用简单的代码来实现效果。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
    margin: 0px;padding: 0px;
}
div{
    width: 200px;
    height: 100px;
    border: 10px solid #9d0000;
}
.a{
    width: 500px;
    height: 500px;
    border: 5px solid #A770EF;
}
</style>
</head>
<body>
<div class="div">我是AOLPH,我喜欢前端很久了。</div>
<span class="a">我是AOLPH,我喜欢前端很久了。</span>
</html>

出现的效果如下：

接下来改变width和height，会发生什么？代码和效果如下：

<style>
*{
    margin: 0px;padding: 0px;
}
div{
    width: 500px;
    height: 200px;
    border: 10px solid #9d0000;
}
.a{
    width: 200px;
    height: 100px;
    border: 5px solid #A770EF;
}
</style>

以上的实验可以发现，块级元素能够改变宽高，而内联元素不能改变宽高。那么怎么样互相转换呢？以下还是用代码实现效果。代码和效果如下：

<style>
*{
    margin: 0px;padding: 0px;
}
div{
    width: 500px;
    height: 100px;
    border: 10px solid #9d0000;
    display: block-inline;
}
.a{
    width: 200px;
    height: 100px;
    border: 5px solid #A770EF;
    display: inline-block;
}
</style>

效果如下:

3. 关于CSS Reset和Normalize.Css

对于CSS Reset应该说它很早就出现了，根据网上大牛的介绍第一份CSS Reset是Tantek的undohtml.css。然而它的出现是为了清除所有浏览器的默认样式。它出现的原因也是由于早期的浏览器支持和理解的CSS规范不同，导致渲染页面时效果不一致，会出现很多兼容性问题。所以Reset就很粗暴的改变了浏览器默认样式。
Normalize.Css是Rest的替代品。我就运用一下大牛们的解释：

Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS Reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。

对于我这个小白来说，我就是一点一点在大牛们的博客上了解CSS Reset和Normalize.CSS。关于CSS Reset和Normalize.CSS这里有大牛的博客，地址如下：https://segmentfault.com/a/1190000003021766

4.CSS选择符

CSS的选择符的分类：通配符，类选择符，包含选择符，子选择符，相邻选择符，属性选择符，ID选择符。

4.1 通配选择符

通配选择符其实就是一个星号，一般是用来对页面所有元素应用样式。实现代码如下：

*{
    margin: 10px;
    padding: 10px;

}/*将页面中所有内外补丁设置为10*/

在特殊情况下,通配符对特元素的所有后代元素应用样式。例如，将页面中strong标签内span标签的文字颜色改为红色。代码如下：

<style>
*{
    margin: 10px;
    padding: 10px;
}/*将页面中所有内外补丁设置为10*/
strong *{
    color: #9d0000;
}/*将strong标签内的span标签颜色改为红色*/
p{
    color: #A770EF;
}
</style>
<body>
<p>我是ADOLPHHAN,<strong><span>我喜欢网页制作,</span></strong>我热爱这个行业</p>
</body>

4.2 类选择符

类指的就是将一段程序编写成一个类，需要的时候就拿来调用，也可以重复调用。它的出现就可以在一个页面中重复使用，减少样式定义。在CSS中也一样，可以将一段样式定义为一个类，在需要的位置直接调用。实例代码如下：

<style>
*{
    margin: 10px;
    padding: 10px;

}/*将页面中所有内外补丁设置为10*/
strong *{
    color: #9d0000;
}/*将strong标签内的span标签颜色改为红色*/
p{
    color: #00bdbd;
}
.b{
    font-family: AIGDT;
    font-size: 20px;
    font-weight: bold;
    color: #A770EF;
}/*定义一个类*/
</style>

4.3 包含选择符

包含选择符又称为后代选择器，该选择符类型是作用于某个元素中的子元素的。并且包含选择符不只限用两层标签元素。下面我用实例证明，代码和效果如下：

<style>
*{
    margin: 10px;
    padding: 10px;
}/*将页面中所有内外补丁设置为10*/
/*strong *{
    color: #9d0000;
}*//*将strong标签内的span标签颜色改为红色*/
p strong span{
    font-weight: bold;
    font-size: 30px;
    font-family: 楷体;
    text-decoration: underline;
    color: #00bdbd;
}
.b{
    font-family: AIGDT;
    font-size: 20px;
    font-weight: bold;
    color: #A770EF;
}/*定义一个类*/
</style>

4.4 子选择符

子选择符也称为子对象选择符，主要定义子元素对象，无法定义子元素以外的对象。选择符与选择符之间是用“>”符号连接的，否则不算是选择符。下面用实例证明，代码和效果如下：

<style>
*{
    margin: 10px;
    padding: 10px;
}/*将页面中所有内外补丁设置为10*/
strong *{
    color: #9d0000;
}/*将strong标签内的span标签颜色改为红色*/
body>strong{
    font-weight: bold;
    font-size: 30px;
    font-family: 楷体;
    text-decoration: underline;
    color: #00bdbd;
}
.b{
    font-family: AIGDT;
    font-size: 20px;
    font-weight: bold;
    color: #A770EF;
}/*定义一个类*/
</style>

4.5 相邻选择符

相邻选择符只是将">"换成了"+"，和子选择符相似。但是它有着自己独特的特性，和子选择符又有着很大的不同。相邻选择符是定义父级以下某个元素之后的元素，并且相邻选择符定义的样式只会是紧紧相邻的两个标签元素。那么相邻选择符与子选择符相似又有很大的不同在哪呢？我可以用实例证明，代码和效果如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
*{
    margin: 10px;
    padding: 10px;
}/*将页面中所有内外补丁设置为10*/
strong+strong+strong{
    font-family: 宋体;
    font-size: 20px;
    font-weight: bold;
    text-decoration: underline;
    color: #dec800;
}
/*.b{
    font-family: AIGDT;
    font-size: 20px;
    font-weight: bold;
    color: #A770EF;
}*//*定义一个类*/
</style>
</head>
<body>
<p>我是ADOLPHHAN,<strong>我热爱这个行业...<span>我喜欢网页制作,</span></strong>我热爱这个行业</p>
<strong>1、我是ADOLPHHAN,我喜欢网页制作,我热爱这个行业</strong>
<strong>2、我是ADOLPHHAN,我喜欢网页制作,我热爱这个行业</strong>
<strong>3、我是ADOLPHHAN,我喜欢网页制作,我热爱这个行业</strong>
<strong>4、我是ADOLPHHAN,我喜欢网页制作,我热爱这个行业</strong>
<strong>5、我是ADOLPHHAN,我喜欢网页制作,我热爱这个行业</strong>
</body>

4.6 ID选择符

ID选择符是以"#"为前缀的，它与类选择符类似。但是要注意，一个页面中使用ID选择符建议不要出现同名的ID，因为ID在JavaScript等脚本语言中运用较多，出现同名的ID容易导致JavaScript等脚本语言的判断错误。
下面我用代码实现效果：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
*{
    margin: 10px;
    padding: 10px;
}/*将页面中所有内外补丁设置为10*/
/*strong *{
    color: #9d0000;
}*//*将strong标签内的span标签颜色改为红色*/
#contact{
    font-family: 宋体;
    font-size: 20px;
    font-weight: bold;
    text-decoration: underline;
    color: #dec800;
}
/*.b{
    font-family: AIGDT;
    font-size: 20px;
    font-weight: bold;
    color: #A770EF;
}*//*定义一个类*/
</style>
</head>
<body>
<p>我是ADOLPHHAN,<strong>我热爱这个行业...<span>我喜欢网页制作,</span></strong>我热爱这个行业</p>
<strong id="contact">1、我是ADOLPHHAN,我喜欢网页制作,我热爱这个行业</strong>
<strong>2、我是ADOLPHHAN,我喜欢网页制作,我热爱这个行业</strong>
</body>

4.7 选择符的组合关系

选择符的组合方式主要有针对性使用类选择符或者ID选择符，选择符群组及选择符组合这3种方式。
针对性使用类选择符或者ID选择符不用多说，前面已经很详细。选择符群组就是将多个相同定义的选择符合并。下面我用代码实现效果：

<style>
*{
    margin: 10px;
    padding: 10px;
}/*将页面中所有内外补丁设置为10*/
p,.class, #contact{
    font-family: 宋体;
    font-size: 20px;
    font-weight: bold;
    text-decoration: underline;
    color: #dec800;
}
</style>

5.伪类与伪对象

5.1 伪类

伪类就是指定一个或者多个与其相关的选择符的状态，伪类的形式是：**选择符：伪类{属性：属性值}。代码和效果如下：

<style type="text/css">
input:hover{
    background-color: #9d0000;
}
</style>
<form method="post" action="">
<input type="text" value=""/> <input type="text" value=""/>
</form>

5.2 伪对象

伪对象是指HTML的文档指定的信息之外，创建了文档的额外信息。伪对象的形式为：选择符：伪对象{属性：属性值}。代码和效果如下：

<style>
p[id^='mycode']{
    color: red;
}
p[value='1']{
    color: green;
}
p[class='b']{
    color: blue;
}
.b:before{
    content:'我是一个兵，来自老百姓'
}
</style>
<body>
<p id="mycode111">代码是一种工具，亦是思想的体现。</p>
<p value="1">越是在写前对代码的 整体结构 和 需求 越有清晰的认识，写出的代码越就是 可维护性高、更健壮。</p>
<p class="b">，发现粒子较多的时候CPU占用很高，</p>

6. CSS的单位和颜色

6.1 CSS单位

关于CSS单位,我从网上了解到，国内的设计师喜欢用PX，而国外的设计师通常用EM，那么PX和EM的区别在哪里：

PX特点
- IE无法调整那些使用px作为单位的字体大小；
- 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
- Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
- px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)
- em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
- 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

EM特点
- em的值并不是固定的；
- em会继承父级元素的字体大小。
  所以我们在写CSS的时候，需要注意两点：
- body选择器中声明Font-size=62.5%；
- 将你的原来的px数值除以10，然后换上em作为单位；
- 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
- 也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

6.2 CSS颜色

CSS颜色大全：http://www.cnblogs.com/axing/archive/2011/04/09/CSS.html

可以用以下方法来规定 CSS 中的颜色：
- 十六进制色
- RGB 颜色
- RGBA 颜色
- HSL 颜色
- HSLA 颜色
- 预定义/跨浏览器颜色名
十六进制颜色
所有浏览器都支持十六进制颜色值。
十六进制颜色是这样规定的：#RRGGBB，其中的 RR（红色）、GG（绿色）、BB（蓝色）十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。
RGB 颜色
所有浏览器都支持 RGB 颜色值。
RGB 颜色值是这样规定的：rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度，可以是介于 0 与 255 之间的整数，或者是百分比值（从 0% 到 100%）。
举例说，rgb(0,0,255) 值显示为蓝色，这是因为 blue 参数被设置为最高值（255），而其他被设置为 0。
同样地，下面的值定义了相同的颜色：rgb(0,0,255) 和 rgb(0%,0%,100%)。

7. CSS布局

7.1 CSS相对定位

如果将元素框设置为相对定位，那么设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
更为简单的理解就比如对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。实现效果和代码如下：

<style>
*{
  margin: 0px;padding: 0px;
}
.a{
  width: 200px;
  height: 200px;
  background-color: #9d0000;
  position:relative;
  top: 200px;
  left: 200px;
}
.b{
  width: 200px;
  height: 200px;
  background-color: #4cae4c;
}
</style>

7.2 CSS绝对定位

如果设置为绝对定位，那么设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。实现效果和代码如下：

<style>
*{
    margin: 0px;padding: 0px;
}
.a{
    width: 200px;
    height: 200px;
    background-color: #9d0000;
    position:absolute;
    top: 200px;
    left: 200px;
}
.b{
    width: 200px;
    height: 200px;
    background-color: #4cae4c;
}
</style>

7.3 固定定位

设置为固定定位的效果和代码如下:

<style>
*{
    margin: 0px;padding: 0px;
}
.a{
    width: 200px;
    height: 200px;
    background-color: #9d0000;
    position:absolute;
    top: 200px;
    left: 200px;
}
.b{
    width: 200px;
    height: 200px;
    background-color: #4cae4c;
}
.d{
    position:fixed;
    right:100px;
    bottom:100px;
    background:indigo;
    width:50px;
    height:50px;
}
</style>

固定定位可以随着窗口的缩放移动：

8. C/S和B/S的区别

C/S结构就是最早使用客户机和服务器的软件系统体系结构。
B/S结构是随着Internet技术的发展,对C/S结构的一种变化或者改进结构。它的用户界面是通过WWW浏览器实现的，主要的事物逻辑在服务器端实现。B/S结构主要利用了发展的WWW浏览器技术,结合了浏览器的多种语言(JS、Server、JAVA、PHP、C++、Nodejs、C#）和ActiveX技术。
了解更多的区别，去看看大牛的博客：http://www.cnblogs.com/xiaoshuai/archive/2010/05/25/1743741.html

CSS基础

1. CSS盒模型

1.1 认识盒模型

2. CSS常见块元素内联元素其他可变元素

2.1 块级元素和内联元素的转化

3. 关于CSS Reset和Normalize.Css

4.CSS选择符

4.1 通配选择符

4.2 类选择符

4.3 包含选择符

4.4 子选择符

4.5 相邻选择符

4.6 ID选择符

4.7 选择符的组合关系

5.伪类与伪对象

5.1 伪类

5.2 伪对象

6. CSS的单位和颜色

6.1 CSS单位

6.2 CSS颜色

7. CSS布局

7.1 CSS相对定位

7.2 CSS绝对定位

7.3 固定定位

8. C/S和B/S的区别

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我爱编程

CSS基础

1. CSS盒模型

1.1 认识盒模型

2. CSS常见块元素 内联元素 其他可变元素

2.1 块级元素和内联元素的转化

3. 关于CSS Reset和Normalize.Css

4.CSS选择符

4.1 通配选择符

4.2 类选择符

4.3 包含选择符

4.4 子选择符

4.5 相邻选择符

4.6 ID选择符

4.7 选择符的组合关系

5.伪类与伪对象

5.1 伪类

5.2 伪对象

6. CSS的单位和颜色

6.1 CSS单位

6.2 CSS颜色

7. CSS布局

7.1 CSS相对定位

7.2 CSS绝对定位

7.3 固定定位

8. C/S和B/S的区别

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我爱编程

2. CSS常见块元素内联元素其他可变元素