CSS基础入门 第4天课堂笔记

CSS基础入门

第4天课堂笔记(本课程共6天)

前端与移动开发学院

http://web.itcast.cn

目录

目录 2

一、复习 3

二、浮动性质的复习 4

三、浮动的清除 5

3.1 清除浮动方法1:给浮动的元素的祖先元素加高度。 5

3.2 清除浮动方法2:clear:both; 6

3.3 清除浮动方法3:隔墙法 7

3.4 清除浮动方法4:overflow:hidden; 8

3.5 清除浮动总结与案例 9

3.6 浏览器兼容问题 11

四、margin 13

4.1 margin的塌陷现象 13

4.2 盒子居中margin:0 auto; 13

4.3 善于使用父亲的padding,而不是儿子的margin 14

4.4 关于margin的IE6兼容问题 15

五、Fireworks和精确盒子还原 17

一、复习

盒模型box model,什么是盒子?所有的标签都是盒子。无论是div、span、a都是盒子。图片、表单元素一律看做文本。

盒模型有哪些组成:width、height、padding、border、margin。

width、height是内容的宽度、高度,想起来丈量包子的比喻、丈量稿纸的比喻。

padding,内边距,边框和文字内容之间的距离。padding有颜色。表示方法,能够用padding综合写,4个值“上、右、下、左”,3个值“上、左右、下”,2个值“上下,左右”。还能按方向拆开,padding-left、padding-top、padding-right、padding-bottom。

border,边框,3要素,4条边。3要素:border-width、border-style、border-color;4条边:border-top、border-right、border-bottom、border-left。 比如我们要单独设置某一条边,那么就需要写清楚3要素:


1          border-top:3px solid red;

如果要单独设置要素:


1          border-width:3px;

2          border-color:red;

3          border-style:solid;

还能拆成最小:


1          border-bottom-style:solid;

常用线型:solid、dashed、dotted。

标准文档流:说白了,就是一个“默认”状态。标准文档流中,标签分为两种:块级元素、行内元素。

块级元素:一定是霸占一行的,能设置宽、高,不设置宽度默认就是占满父亲。div、p、h、li

行内元素:和其他行内元素并排,不能设置宽、高,默认宽度就是文字宽度。span、a、b、i、u

能够相互转:


1          display:block;

2          或者:

3          display:inline;

标准流做不出网页:因为能并排的不能改宽高。所以,要脱离标准流。

浮动:


1          float:left;

2          或者

3          float:right;

浮动宏观的看,就是做“并排”的。有几个性质:脱标、贴边、字围、收缩。

一个浮动的a、span ,是不需要设置display:block; 就能够设置宽高了。因为浮动之后,脱离标准流了,所以标准流里面的法律、规则都不适用了。

二、浮动性质的复习

浮动的性质:脱标、贴边、字围、收缩。

收缩:一个浮动的元素,如果没有设置width,那么将自动收缩为文字的宽度(这点非常像行内元素)。

比如:


1           <style type="text/css">

2           div{

3           float: left;

4           background-color: gold;

5           }

6           </style>

这个div浮动了,且没有设置宽度,那么将自动缩紧为内容的宽度:

整个网页,就是通过浮动,来实现并排的。

三、浮动的清除

来看一个实验:现在有两个div,div身上没有任何属性。每个div中都有li,这些li都是浮动的。


1           <div>

2           <ul>

3           <li>HTML</li>

4           <li>CSS</li>

5           <li>JS</li>

6           <li>HTML5</li>

7           <li>设计模式</li>

8           </ul>

9           </div>

10

11        <div>

12        <ul>

13        <li>学习方法</li>

14        <li>英语水平</li>

15        <li>面试技巧</li>

16        </ul>

17        </div>

我们本以为这些li,会分为两排,但是,第二组中的第1个li,去贴靠第一组中的最后一个li了。

第二个div中的li,去贴第一个div中最后一个li的边了。

原因就是因为div没有高度,不能给自己浮动的孩子们,一个容器。

3.1 清除浮动方法

1:给浮动的元素的祖先元素加高度。

如果一个元素要浮动,那么它的祖先元素一定要有高度。高度的盒子,才能关住浮动。

只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。

3.2 清除浮动方法2:clear:both;

网页制作中,高度height很少出现。为什么?因为能被内容撑高!那也就是说,刚才我们讲解的方法1,工作中用的很少。

脑洞大开:能不能不写height,也把浮动清除了呢?也让浮动之间,互不影响呢?


1           <div>

2           <ul>

3           <li>HTML</li>

4           <li>CSS</li>

5           <li>JS</li>

6           <li>HTML5</li>

7           <li>设计模式</li>

8           </ul>

9           </div>

10

11        <div class="box2">  → 这个div写一个clear:both;属性

12        <ul>

13        <li>学习方法</li>

14        <li>英语水平</li>

15        <li>面试技巧</li>

16        </ul>

17        </div>


1          clear:both;

clear就是清除,both指的是左浮动、右浮动都要清除。意思就是:清除别人对我的影响。

这种方法有一个非常大的、致命的问题,margin失效了。

3.3 清除浮动方法3:隔墙法


1           <div class="box1">

2           <ul>

3           <li>HTML</li>

4           <li>CSS</li>

5           <li>JS</li>

6           <li>HTML5</li>

7           <li>设计模式</li>

8           </ul>

9           </div>

10

11        <div class="cl h16"></div>

12

13        <div class="box2">

14        <ul>

15        <li>学习方法</li>

16        <li>英语水平</li>

17        <li>面试技巧</li>

18        </ul>

19        </div>


1          .cl{

2           clear: both;

3          }

4          .h16{

5           height: 16px;

6          }

近些年,有演化出了“内墙法”:

3.4 清除浮动方法4:overflow:hidden;

overflow就是“溢出”的意思, hidden就是“隐藏”的意思。


1          overflow:hidden;

表示“溢出隐藏”。所有溢出边框的内容,都要隐藏掉。


内容太多,溢出了盒子:


overflow:hidden; 溢出盒子边框的内容,隐藏了。

本意就是清除溢出到盒子外面的文字。但是,前端开发工程师又发现了,它能做偏方。

一个父亲不能被自己浮动的儿子,撑出高度。但是,只要给父亲加上overflow:hidden; 那么,父亲就能被儿子撑出高了。这是一个偏方。


1           div{

2           width: 400px;

3           border: 10px solid black;

4           overflow: hidden;

5           }

   

3.5 清除浮动总结与案例

总结一下:

1) 加高法:

浮动的元素,只能被有高度的盒子关住。 也就是说,如果盒子内部有浮动,这个盒子有高,那么妥妥的,浮动不会互相影响。但是,工作上,我们绝对不会给所有的盒子加高度,这是因为麻烦,并且不能适应页面的快速变化。


1          <div>   → 设置height

2           <p></p>

3           <p></p>

4           <p></p>

5          </div>

6

7          <div>   → 设置height

8           <p></p>

9           <p></p>

10        <p></p>

11       </div>

2) clear:both;法

最简单的清除浮动的方法,就是给盒子增加clear:both;表示自己的内部元素,不受其他盒子的影响。


1          <div>

2           <p></p>

3           <p></p>

4           <p></p>

5          </div>

6

7          <div>   → clear:both;

8           <p></p>

9           <p></p>

10        <p></p>

11       </div>

浮动确实被清除了,不会互相影响了。但是有一个问题,就是margin失效。两个div之间,没有任何的间隙了。

3)隔墙法:

在两部分浮动元素中间,建一个墙。隔开两部分浮动,让后面的浮动元素,不去追前面的浮动元素。

墙用自己的身体当做了间隙。


1          <div>

2           <p></p>

3           <p></p>

4           <p></p>

5          </div>

6

7          <div class="cl h10"></div>

8

9          <div>

10        <p></p>

11        <p></p>

12        <p></p>

13       </div>

我们发现,隔墙法好用,但是第一个div,还是没有高度。如果我们现在想让第一个div,自动的根据自己的儿子,撑出高度,我们就要想一些“小伎俩”,“奇淫技巧”。

内墙法:


1          <div>

2           <p></p>

3           <p></p>

4           <p></p>

5           <div class="cl h10"></div>

6          </div>

7

8          <div>

9           <p></p>

10        <p></p>

11        <p></p>

12       </div>

内墙法的优点就是,不仅仅能够让后部分的p不去追前部分的p了,并且能把第一个div撑出高度。这样,这个div的背景、边框就能够根据p的高度来撑开了。

4)overflow:hidden;

这个属性的本意,就是将所有溢出盒子的内容,隐藏掉。但是,我们发现这个东西能够用于浮动的清除。

我们知道,一个父亲,不能被自己浮动的儿子撑出高度,但是,如果这个父亲加上了overflow:hidden;那么这个父亲就能够被浮动的儿子撑出高度了。这个现象,不能解释,就是浏览器的小偏方。

并且,overflow:hidden;能够让margin生效。

清除浮动的案例:

实践中,遇见了清除浮动的问题:

3.6 浏览器兼容问题

上述知识点遇见的浏览器兼容问题

第一,IE6,不支持小于12px的盒子,任何小于12px的盒子,在IE6中看都大

解决办法很简单,就是将盒子的字号,设置小(小于盒子的高),比如0px。


1          height: 4px;

2          _font-size: 0px;

我们现在介绍一下浏览器hack。hack就是“黑客”,就是使用浏览器提供的后门,针对某一种浏览器做兼容。

IE6留了一个后门,就是只要给css属性之前,加上下划线,这个属性就是IE6认识的专有属性。

比如:


1          _background-color: green;

解决微型盒子,正确写法:


1          height: 10px;

2          _font-size:0;

第二,IE6不支持用overflow:hidden;来清除浮动的

解决办法,以毒攻毒。追加一条


1          _zoom:1;

完整写法:


1          overflow: hidden;

2          _zoom:1;

实际上,_zoom:1;能够触发浏览器hasLayout机制。这个机制,不要深究了,因为就IE6有。我们只需要让IE6好用,具体的实现机制,有兴趣的同学,自行百度。

强调一点, overflow:hidden;的本意,就是溢出盒子的border的东西隐藏,这个功能是IE6兼容的。不兼容的是overflow:hidden;清除浮动的时候。

我们刚才学习了两个IE6的兼容问题,这两个IE6的兼容问题,都是通过多写一条hack来解决的。

这个我们称为伴生属性。


1          height:6px;

2          _font-size:0;


1          overflow:hidden;

2          _zoom:1;

四、margin

4.1 margin的塌陷现象

标准文档流中,竖直方向的margin不叠加,以较大的为准。

如果不在标准流,比如盒子都浮动了,那么两个盒子之间是没有塌陷现象的:

4.2 盒子居中margin:0 auto;

margin的值可以为auto,表示自动。当left、right两个方向,都是auto的时候,盒子居中了:


1          margin-left: auto;

2          margin-right: auto;

简写为


1          margin:0 auto;

注意:

1) 使用margin:0 auto; 的盒子,必须有width,有明确的width

2) 只有标准流的盒子,才能使用margin:0 auto; 居中。

也就是说,当一个盒子浮动了、绝对定位了、固定定位了,都不能使用margin:0 auto;

3) margin:0 auto;是在居中盒子,不是居中文本。

文本的居中,要使用


1          text-align:center;


1          margin:0 auto;   → 让这个div自己在大容器中居中。

2          text-align: center;  → 让这个div内部的文本居中。

普及一下知识,text-align还有


1          text-align:left;     没啥用,因为默认居左

2          text-align:right;    文本居右

4.3 善于使用父亲的padding,而不是儿子的margin

如果父亲没有border,那么儿子的margin实际上踹的是“流”,踹的是这“行”。所以,父亲整体也掉下来了

这个p有一个margin-top踹父亲,试图将自己下移


1           <div>

2           <p></p>

3           </div>

结果:

   

margin这个属性,本质上描述的是兄弟和兄弟之间的距离; 最好不要用这个marign表达父子之间的距离。

所以,我们一定要善于使用父亲的padding,而不是儿子的margin。

4.4 关于margin的IE6兼容问题

IE6双倍margin bug

当出现连续浮动的元素,携带和浮动方向相同的margin时,队首的元素,会双倍marign。


1           <ul>

2           <li></li>

3           <li></li>

4           <li></li>

5           </ul>

解决方案:

1)使浮动的方向和margin的方向,相反。

所以,你就会发现,我们特别喜欢,浮动的方向和margin的方向相反。并且,前端开发工程师,把这个当做习惯了。


1           float: left;

2           margin-right: 40px;

2)使用hack(没必要,别惯着这个IE6)

单独给队首的元素,写一个一半的margin


1          <li class="no1"></li>


1          ul li.no1{

2           _margin-left:20px;

3          }

IE6的3px bug

解决办法:

不用管,因为根本就不允许用儿子踹父亲。所以,如果你出现了3px bug,说明你的代码不标准。

IE6,千万不要跟他死坑、较劲,它不配。 格调要高,老师给你讲,就是为了增加面试的成功率。不是为了让你成为IE6的专家。

五、Fireworks和精确盒子还原

fireworks是Adobe公司的一个设计软件。功能非常多,我们今天用啥讲啥。

Fireworks的默认文件格式是png。

新建ctrl+N。

分辨率是72像素/英寸 (咱们不用知道,因为设计师把设计图给你)

标尺的快捷键,是ctrl+alt+r。

css中,任何文本都有行高。行高就是


1          line-height

属性。顾名思义,就是行的高度。

首行空两个汉字的格,单位比较奇怪,叫做em,em就是汉字的一个宽度。


1          text-indent:2em;

indent就是“缩进”的意思。

时间: 2024-10-27 03:51:13

CSS基础入门 第4天课堂笔记的相关文章

Android之Web篇:Day01Html与Css基础入门

Day01 html与css基础入门 1.html的常见标签和实战 1.1 a标签 <a href="https://www.baidu.com" target="_blank">点我送福利哦!</a> // target属性值_blank表示另取空白页打开网页,用new有同样的效果 1.2 img标签 <img src="plmm.jpg" width="100px" height="

CSS基础入门D1

模块回顾 1.CSS的引入 2.CSS选择器 3.常用文本样式 一.CSS的引入 引言:HTML可以标记页面文档中的段落.标题.表格.链接等的格式,但随着网络发展,用户需求增加,尤其是互动式的情景需求,HTML越来越不能满足更多文档样式的需求,未解决这一问题,需要更强大前端设计工具,那就是CSS. 1.CSS概念 CSS就是Cascading Style Sheets,译为"层叠样式表",建成样式表.样式就是指网页中文字大小.颜色.图片位置等格式,"层叠"的意思是,

CSS基础入门D2

模块回顾 1.背景图片的设置 2.超链接伪类 一.背景图片的设置 1.整个页面的背景图片插入 在类标签body中直接插入,例如:body{background-image:url(../Day02-HTML/html/海贼王02.jpg);} 还可以调试它的效果,是否重复,是否随页面滚动,调动位置.例如: body{ background-image:url(../Day02-HTML/html/海贼王02.jpg); background-repeat:no-repeat; backgroun

css 基础入门

CSS 概述 为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,css 由此而生,css 是 Cascading Style Sheets 的字母缩写,意思是层叠样式表,有了 css,html 中大部分表现样式的标签就废弃不用了,html 只负责文档的结构和内容,表现形式完全交给 css css 基本语法 css 的定义方法是: 选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式,每个属性有一个或多个值,属性和值之间以键值对的形式存在 选择器{属性:值; 属性:值; 属性

css基础入门

如果说html只是一些标签,css就是装修装饰标签的皮肤 有些html是有默认自带一些css样式的,正常情况下是需要把默认样式去掉的,因为会影响页面样式,而且默认的很不美观,比如,body标签自带8px的margin,p标签自带上下margin,ul里的li自带黑色的点,按钮自带背景颜色,border边框,input输入框自带outline边框,border边框等等 常用的css样式有 margin 外边距 padding 内边距 border 盒子边距 一个300px的正方形div,paddi

妙味课堂——HTML+CSS基础笔记

妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - PS工具: - 移动工具 - 矩形选框工具 - 裁切工具 - 吸管工具 - 横排文字工具 - 手抓(快捷键:空格) - 缩放(快捷键:Ctrl + 和 Ctrl -) - 标尺(快捷键:Ctrl R,主要是拖出参考线.矩形区域选择的时候,按住Ctrl,就能贴合参考线) - 自由变换(快捷键 Ctrl

Form标签+Css基础

一.Form表单标签 <form action="" method=""></form> 表单就是用来将用户的信息提交到服务器,服务器会将信息存储或者根据信息查询数据(增删改查). 表单中所有的内容都要写在form标签中. <input type="text" value="哈哈哈哈" placeholder="请输入用户名"> Input文本输入框,type类型为tex

CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成前台网页制作.小强老师是这样分类的,前几次课,我们将CSS+DIV入门基础,后几天课程我们讲案例制作.咱们接下来讲的是css基础部分. 高清视频地址如下: 01  css语法规范:                       http://www.tudou.com/programs/view/8s

HTML&CSS基础学习笔记8-预格式文本

<pre>标签的主要作用是预格式化文本.被包围在 pre 标签中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre>标签的一个常见应用就是用来表示计算机的源代码.当然你也可以在你需要在网页中预显示格式时使用它. 会使你的文本换行的标签(例如<h>.<p>)绝不能包含在 <pre> 所定义的块里.尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的. 更多学习内容,就在码芽网http://www.