关于对CSS的初步认识

　　HTML是在浏览器中显示的具体内容，而CSS是控制HTML显示内容排版、颜色、宽度、高度、居左、居右、居中等属性。简单来说就是CSS可以控制HTML显示内容的样式，要正确的使用CSS，需要对CSS基本知识有足够的了解，从下面几个方面来看：

一、CSS中的块模型

1、在CSS的定义中，有块元素，它一行只能显示一个，比如div、tabble、p、ul、hl等，有行内元素，它根据行宽度紧凑排列显示，如a、span、font、strong等。

2、块元素，有块框存在content、padding、border和margin几个部分。

3、对行内元素设置width、height值无效和margin-top、margin-bottom值无效。

二、CSS中的文档流模型

所有文档中的元素默认情况下按文档流显示，即每个块元素显示一行，行内元素根据行宽度值紧凑排列显示。

三、CSS中的相对定位和绝对定位模型

相对定位：相对于该元素在文本流中的原位置进行偏移的，其原位置被保留。

绝对定位：设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。绝对定位的元素脱离文档流不占用空间。这一点与相对定位不同。

未完~~~

关于对CSS的初步认识

时间： 2024-11-07 09:08:47

关于对CSS的初步认识的相关文章

css的初步认识

CSS初步认识思维导图  部分代码如下: <style type="text/css"> body{ margin:0; padding:0; } div{ border:3px solid;border-color:green; margin:0;padding:0; height:400px; background-color:#00cccc; } ul{ text-align:left; width:100px; margin-left:30%;border:2px

Div+Css的初步运用

采用DIV+CSS模式的网站具有以下优势:1.表现和内容相分离 2.代码简洁,提高页面浏览速度 3.易于维护和改版 4.提高搜索引擎对网页的索引效率. html文件中放置CSS有三种类型:内联.内嵌.外联三种. 感觉Css中必须要清楚它的六中选择符:1.HTML选择符  2.类选择符  3.ID选择符  4.伪元素选择符  5.关联选择符  6.组合选择符. Css中包涵六大类属性:1.字体属性  2.文本属性  3.背景属性  4.边框属性  5.鼠标属性  6.列表属性. 以下实例: ———

CSS的初步学习

CSS的作用: 被用来格式化HTML文档 插入样式的方法: 外部样式表 目的: 适合格式化多个页面,减少工程量. 用法: 每个html页面使用标签(在页面头部)链接到样式表中,代码如下: <head> <link rel="stylesheet" type="text/css" href="demo.css"> </head> 浏览器将会从demo.css文件里读取相应的样式来格式化html页面,在写css的过

对 CSS 的初步了解 —— 什么是CSS

什么是 CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一 CSS与HTML结合的方式 内联样式 内部样式 外部样式 内联样式 在标签内使用style属性指定css代码. 举例如: Google浏览器中查看: 内部样式 在head标签内,定义styl

精通CSS+DIV网页样式与布局--页面背景

上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调.这篇博客简单的总结一下如何用CSS来设置背景颜色.背景图片.首先,我们来看一张图: 接着,小编会随着上述思维导图的脉络,对各个知识点进行详细讲解,首先,我们来看页面背景色,例子代码和运行效果如下所示:   页面背景色 <span style="font-size:18px;"><span style=&qu

css+div网页设计（二）--布局与定位

在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型 由图可以看出 盒子模型的范围包括 margin.border.padding.content. 需要指出的一点是,在ie中与firefox中盒子模型表示略有不同: IE 盒子模型的 content 部分包含了 border 和 pading. 而firefox中的盒子模型的content部分不包含border和pad

前端学习html css js

html 第一章 :HTML模板 HTML是什么(超文本标记语言) HTML网页主体结构 doctype标签 head标签 meat标签 title标签 body标签 第二章:HTML标题 h1标题标签 h2标题标签 h3标题标签 h4标题标签 h5标题标签 h6标题标签 hr水平线标签 第三章:HTML 段落 p段落标签 br换行标签 第四章:HTML 样式 center定义居中内容 font和basefont定义HTML字体 s和strike定义删除线文本 u定义下划线文本 第五章:HTML

网页整体布局完全剖析—剖完你不进来看一下么？

作为前端小白,最基本的就是写网页了(虽然前端现在基本上可包揽全宇宙的事了),排网页更是基本生存技能了.本文总结了几乎所有的网页总体布局.               一.单列布局 1.单列固宽 思路:设置div的左右margin为auto <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>1-1-1 布局固定宽度</title> <st

13.3 “1-2-1＂固定宽度布局

现在来制作最经常用到的“1-2-1”布局.增加了一个“side”栏.但是在通常状况下,两个div只能竖直排列.为了让content和side能够水平排列.必须把它们放到另-个div中,然后使用浮动或者绝对定位的方法,使content和side并列起来. 本案例将通过两种方法制作,文件分别位于本书光盘“第13章\1-2-1-absolute.htm”和“第13章\1-2-1-float.htm”. 一.准备工作 基于上面的分析,现在将上节的成果案例另存为一个新的文件.在HTML中把content部