CSS几个概念了解

     CSS中文是层叠样式表,是一种用来表现 HTML或者XML等文件样式和的计算机语言。是一种能够做到网页表现和内容分离的一种样式设计语言。相对于传统的HTML的表现而言,CSS能够对网页中的对象的位置进行像素级的精确的控制,支持所有的字体字号的样式,能够进行初步的交互设计,是目前基于文本最优秀的变现设计语言。

一、元素类型
1.块级元素
2.行内元素(内联元素)
区别:(1)块级元素会单独占用一行,(即无法与其他元素显示在同一行内,除非你显示修改元素的 display 属性),而内联元素则都会在一行内显示。
(1). 块级元素可以设置 width、height 属性,而内联元素设置无效。
(2). 块级元素的 width 默认为 100%,就是都会占用一行。而内联元素则是根据其自身的内容或子元素来决定其宽度。
最常见块级元素应该是 <div> ,内联元素有 <span> <a> <img> 等等

3.两者的转化:
可以通过设置  display: block;来达到效果。当 display 的值设为 block 时,元素将以块级形式呈现;当 display 值设为 inline 时,元素将以内联形式呈现。

二、盒子模型
定义:盒子模型是CSS的基石之一,它指定元素如何显示以及如何相互交互。页面上的每个元素都被浏览器看成是一个矩形的盒子,这个盒子由元素的内容、填充、边框和边界组成。网页就是由许多的盒子通过不同的排列方式堆积而成。
盒子模型博客:盒子模型详解


CSS中,盒子模型中规定了元素框处理内容、内边距、边框和外边距的方式。在HTML文档中,每个元素都有盒子模型。
                       CSS几个概念了解_第1张图片

2. 在 CSS 中,width 和 height 指的是内容区域(element)的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素,就需要将内容的宽度设置为 70 像素,以下是CSS代码:



图解:
CSS几个概念了解_第2张图片


三、浮动(float)
我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能,最直接解释方法就是能实现表格布局的多列功能。
Float属性有left、right、none三个值,none默认属性不用管,主要是left和right两个属性最常用
讲的很清楚的博客:浮动讲解
注意点:(1)只有左右浮动,没有上下浮动。(2)设置浮动之后,会脱离普通流,不在占据原来的那层空间。


四、常见的属性设置


常用的属性:内容(content)、填充(Padding)边框(border)、边界(margin)基本上都有上下左右,例如:margin-top/margin-right等代表是单独一般的设置。Margin是设置对象四周,上下左右都设置成为这样。很多的属性有待于经常使用,更多详细讲解参见:CSS属性


五.常见的标签

在敲系统的老师用到了很多的标签,没有深入的研究,只是浅尝辄止的罗列,先把用过的熟悉一下。

<td> 标签定义 HTML 表格中的标准单元格。
td 元素中的文本一般显示为正常字体且左对齐

<table>是表格的标签

<td> 单元格的标签

<tr>表格中的行标签

<body>表示文件主题部分的标签

<title>题目的标记符

<a>用来定义超文本文档的 标记符

<br>换行标记符

<p>用来定义段落的标记符

小结:

    觉得只是用的过程中逐渐的了解,对于网页的制作,浅尝辄止,第二遍的学习中明白了很多。



你可能感兴趣的:(CSS几个概念了解)