css+div(2)

list-style-type:none  去掉项目符号

块级元素:body,ul li,ol li,table,p,h1~h6,div......

1.块级元素里面的内容,或者它的背景图片,默认显示在块的左上角。

2.块级元素默认情况下,单独占满一行。

如何用块级元素实现并排?

html:

<div id=“d1”>1<div>

<div id=“d2”>2<div>

css:

#d1,#d2

{

height:150px;

width:100px;

border:solid 2px red;

}

用float:left实现并排(向左漂浮)

float:right(向右漂浮)

clear:borth 清除左右的浮动

盒子模型

margin(外间距)border(边)padding(内边距)

行内元素有<span></span>,<a>

特点:

1.它默认情况下不会单独占满一行。

2.行内元素的高度和宽度不是受css的height和width决定,而是由它里面的内容的多少决定。

行内元素可以变成块级元素用display:block

重点:绝对定位(position:absolute)和相对定位(position:relative)

绝对定位:当一个块级元素脱离文档流,它就不会占满一行,然后浮动对它也是没有作用的。它的方位就受到具体页面窗体的top和left的影响。

(设置跟随鼠标的图片)

相对定位:设置position:relative,说明这个div还存在文档流,没有脱流文档流,针对上一级的上边和左边。

区别

1.绝对定位真正脱离文档流,脱离文档流不受浮动和文档流的影响。而相对定位会受到文档流的影响。

2.绝对定位只受到具体的窗体的top和left影响,相对定位只受到上一级的top和left影响。

z-index空间设置(值大的位于值小的上方)

overflow:auto 文本超出有滚动条

overflow:hide  文本超出的部分隐藏

overflow:scroll  文本超出或没有超出都有滚动条

时间: 2024-10-29 11:15:28

css+div(2)的相关文章

CSS + DIV 让页脚始终底部

一 前言 经常设计页面时用到三层DIV,头DIV与脚DIV一般固定高度,而中间层DIV根据内容的多少,高度不定,我们经常希望但内容很少时,脚DIV保持在底部,当内容很多时,脚DIV被中间内容挤到下面,但仍然始终保持在底部. 二 position position有四个参数:static  | relative | absolute | fixed position:static,意味元素没有被定位,元素会出现在文档本该出现位置,是页面元素默认的定位的方式,一般无需指定,除非想要覆盖之前设置的定位

css+div网页设计

css是网页制作不可缺少的部分,我会用两篇博客为大家展示css的基本用法. 关于css+div的整体结构图总结如下: 本篇博客主要介绍css的基础知识. 一.css概念; css(级联样式表):它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 二.使用css控制页面方法 css控制页面的方法共有四种,行内样式.内嵌式.链接式.导入式. a.行内样式 ps:行内样式

【转】用CSS+DIV时width的问题

CSS盒子占据面积的大小一共是边距(margin)+边框(border)+填白(padding)+宽度(width).所以当你设置width:200px;border:1px xx xx;的时候,实际的这个DIV的width最大值还是200.只是DIV的实际占据页面的宽度是:1(左边框)+200(width)+1(右边框)=202所以这个DIV里面还有200的宽度可以容纳包含的DIV.当然如果里面的DIV宽度大于200,外面DIV定义的宽度就会失去效果. 注意啦!注意啦!重点地方要回答你了,如果

20151008-20151101学习内容之三:css+div

css+div 超链接: <a hert = " " target(超链接的打开方式) = "self(自身)"或"new(新开窗体)"> </a> 锚点:超链接的特殊应用 <a href="#1"...> </a> <a name ="1"> </a> 表格:容器,可以把这一个页面划分区域表格不能随便移动 div: 层标签 (默认占一

精通CSS.DIV网页样式与布局系列学习

精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布局(五) ——设置表格与表单样式 精通CSS.DIV网页样式与布局(四) ——页面背景 精通CSS.DIV网页样式与布局(三)——中秋效果图 精通CSS.DIV网页样式与布局(二)—— 段落 精通CSS.DIV网页样式与布局(二) 精通CSS.DIV网页样式与布局(一) 神奇的验证码,我们一起来探究

CSS+DIV+HTML(一)--HTML总结

一.定义 HTML(Hyper Text Markup Language),标记语言. 二.主要内容: HTML元素分为三类:块级标签.内联标签.可变标签.区别在于: 块级元素:在默认情况下会换行显示. 内联元素:在默认情况下会在一行内显示. 可变元素:根据上下文确定自己是块级元素还是内联元素. HTML文档和HTML元素是通过HTML标签进行标记的.HTML元素定义了整个HTML文档.什么意思呢? 举个例子: HTML文档是有文本标签定义的: <!DOCTYPE html> <html

css+div

什么是css什么是div? div是盒子的意思就是存放数据的盒子. css就是怎么来存放盒子存放盒子里面的数据. 那么css+div是用来做什么的? 是用来做网页页面的.一个网页的页面可以看做是很多个盒子组装起来的.盒子装盒子啊,盒子重盒子啊,这些.然后我们在盒子里面放上图片,文字等.就成为我们的网页了.

鼠标经过图片时变换的两种方法--css+div及javascript应用

javascript方式:    熟悉使用document.getElementById()取得节点对象 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

CSS+DIV总结

CSS是用于控制网页样式并将样式信息与网页内容分离的一种标记语言.它的引入是为了使得HTML语言更好地适应页面的美工设计. CSS+DIV放在一起,是因为DIV作为HTML中块标记,CSS可以通过DIV标签实现对网页的样式控制. CSS作为样式表插入到HTML中,当读到一个样式表时,浏览器会根据它来格式化HTML 文档,插入样式表的方法有:行内式,内嵌式,导入式和链接式.当然CSS有它一定规则,由选择器和一条或多条声明构成,每条声明由一个属性和一个值组成.这里有一个细节问题,不要在属性值与单位之

div垂直居中 css div盒子上下垂直居中

div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div css让这个登录布局水平和css垂直居中. 这里介绍一种最简单兼容性最好的水平居中与上下垂直居中的方法. 1.具体实例代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &