深入浅出CSS:Div(一)

这个系列是学习笔记,简明记录结论性的知识。

新建一个层时,border为零,margin为0,padding为0,如果不指定宽度(width),则自动100%填充父元素。

三、层与父元素的关系

1. 举例,直接建立一个新层div1,则它的父元素就是body,当给新层添加内外补白或边框等等时,body的宽度并未发生变化。

当层不断的扩张,比如增加margin,padding或border时,它的总长或总宽=本身+扩张的长/宽。

当层扩张后的宽度到达极限等于body的宽度时,就不能继续扩张,因为父元素的宽度不会变,这时再增加宽度,只能在内部压缩。

原理1:层无论怎么扩张,都不会超过父元素的宽度。如果想让一个层的宽度固定不变(层A),利用这个原理,只能在这个层的内部再套一个内部层(层B)。层B无论怎么扩张都不会超过层A。

时间: 2024-10-04 20:33:26

深入浅出CSS:Div(一)的相关文章

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" /> &