第四章 盒子的浮动与定位 本章的重点和难点是深刻地理解”浮动“和”定位“这两个重要的性质,对于复杂页面的排版至关重要. 4.1 盒子的浮动 在标准流中,一个块级元素在水平方向会自动伸张,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素就可以并排了. CSS中的float属性,默认为none.就是标准流通常的情况. 如果将float属性的值设置为left或right,元素就会向其父元素的左侧或右侧靠紧.同时默认情况下,盒子的宽度不再伸张,而是根据盒子里…

原文:CSS设计指南之理解盒子模型 一.理解盒模型 每一个元素都会在页面上生成一个盒子.因此,HTML页面实际上是由一堆盒子组成的.默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看到页面中盒子的结构.使用WebDeveloper工具条中的"OutLine"->"OutLine Level Element"菜单项,可以方便地显示盒子的边框和背景,从而让我们能从另外一个角度来审视页面的构成. 1.1 元素盒子的属性 1.边框(border):可…

1. 盒子的浮动 在标准流中,一个块级元素在水平方向会自动伸展,知道包含它的元素的边接:而在竖直方向与相邻元素依次排列,不能并排. CSS中float属性,默认为none.将float属性的值设置为left或right,元素就会向其父元素的左侧或右侧靠紧.同时默认情况下,盒子的宽度不再伸展,而是根据盒子里面的内容的宽度来决定. float: left; 可以使用clear来清除浮动: clear: left | right | both; 2. 盒子的定位 在CSS中有一个position属性,…

第三章 深入理解盒子模型 盒子模型是CSS控制页面的基础.需要清楚“盒子”的含义是什么,以及盒子的组成.此外,应该理解DOM的基本概念,以及DOM树是如何与一个HTML文档对应的,在此基础上充分理解“标准流”的概念. 3.1 盒子的内部结构 padding-border-margin模型是一个极其通用的描述矩形对象布局形式的方法.这些矩形对象被统称为”盒子“,英文为”Box“. 模型 就是对某种事物的本质特性的抽象. 在CSS中,一个独立的盒子模型由content(内容).border(边框).…

盒子模型 margin padding border content margin:            用于控制元素与元素之间的距离:body自带 8 像素的margin 需要手动去除.(快递盒之间的间距) padding:           用于控制内容与边框之间的距离.(快递盒与快递物体之间的缝隙) Border(边框):     围绕在内边距和内容外的边框.(快递盒的厚度) Content(内容):   盒子的内容,显示文本和图像.(快递物体的大小) margin 外边距 缩写方式 …

第五章 文字与图像 5.1.2 设置字体 通过font-family属性设置字体.可以声明多种字体,字体之间用逗号分隔开.如一些字体名称中间有空格,需用双引号将其引起来,使浏览器知道这是一种字体的名称. p{ font-family:Arial,"Times New Roman";} 5.1.3 文字大小 通过font-size属性来控制文字大小. 1. 长度单位px.表示在浏览器上1个像素的大小.px是相对单位,也就是相对于1个像素的比例.因为不同访问者的显示器的分辨率不同,而且每个…

第1章 (X)HTML与CSS核心基础 这一章重点介绍了4个方面的问题.先介绍了 HTML和XHTML的发展历程以及需要注意的问题,然后介绍了如何将CSS引入HTML,接着讲解了CSS的各种选择器,及其各自的使用方法,最后中袋说明了CSS的继承与层叠特性,以及它们的作用. 1.1 HTML与XHTML HTML与XHTML是一种语言的不同阶段,类似于文言文和白话文的关系.因为它们也常被写作为(X)HTML.XHTML是HTML的“严谨版”. 1.1.2 DOCTYPE(文档类型)的含义与选择 “…

边框 样式:border-style hidden, dotted, dashed, solid , double, groove, ridge, inset, outset 最不可预测的是double,这都是由用户代理决定的 可以每边设置不同样式 宽度 颜色 简写 当三个一起简写的时候,没有顺序 背景 背景图片:background-image 背景默认是不继承的:但可以使用background-image: inherit;来继承 重复: background-repeat repeat-x…

在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同.      CSS中有一个float属性,默认为none,也就是标准流通常的情况.如果将float属性的值设置为left或right,元素就会向其父元素的左侧或右侧靠紧,同时默认情况下,盒子的宽度不在伸展,而是根据盒子里面的内容的宽度来确定. 准备基础代码 浮动的性质比较复杂,这里先制作一个基础的页面,代码如下.后面一系列的实验将基于下面…

web前端学习笔记(CSS盒子的浮动) 在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同.      CSS中有一个float属性,默认为none,也就是标准流通常的情况.如果将float属性的值设置为left或right,元素就会向其父元素的左侧或右侧靠紧,同时默认情况下,盒子的宽度不在伸展,而是根据盒子里面的内容的宽度来确定. 准备基础代码 浮动的性质比较复杂,这里先制作一个基础的页…