css

1.昨日复习

标签选择器: P{ key1: value1;key2:value2; }

类选择器:  .p_class{key:value;}

Id选择器:  #p_id{ key: value;}

子孙选择器: ul li p{ key: value; }

并集交集: p , h1{ key: value; }   p.p_class{ key: value;}

通配符选择器: *{key: value;}  

子选择器: ul>li>p{key: value;}

下一个兄弟选择器: h1+p{key; value;}  这个选中是p

序选择器: p:first-child{ key: value; } 这个选中的是一排p标签中的第一个p

 

继承性和层叠性:

1.如果都直接选中, 那么权重大的起作用

2.如果都选中且权重一样大, 谁写下面谁起作用

3.如果选中与没选中做比较, 那么选中的起作用

4.如果大家都没有选中, 那么按照就近原则

5.如果都没有选中,且一样近, 那么根据权重来算, 如果此时权重也一样, 那么谁写下面谁起作用

 

!important:

!important只给属性加权重, 无法给继承来的属性加权重

 

 

2.盒模型(div)

我们现在讲的盒模型属于标准盒模型

一个盒子的主要属性, 有5个: width height padding border margin

Width: 宽度(内容的宽度)

Height: 高度(内容的高度)

Padding: 盒子的内边距

Border: 盒子的边框

Margin: 盒子的外边距, 盒子与盒子之间的距离

 

 

 

 

 

 

 

 

该图是由如下代码实现的:

这个盒子是内容高度和宽度为200px, 但是真实所占的高度和宽度是320px, 因为还要再加上2 * padding 和 2 * border, 我们作为程序员看到一个盒子的高度和宽度, 要先看到内容区域, 再看到盒子真实占有的部分

 

注意:

我们制作网页, 要考虑的是盒子的大小, 而不是内容区域的大小, 所以如果调整width,height, 而要保持盒子大小不变, 就必须响应的调整padding border, 因为盒子的变大或变小对于网页布局是灾难性的!

 

课堂练习: 写三个盒子的宽高为440px的盒子

 

盒子所占的宽度 = width + 左边的padding + 右边的padding + 左边的border + 右边的border

 

 

 

 

3.Padding

Padding是内边距:

特性: padding区域我们实测是有背景颜色,并且和内容区域是一样的背景色

 

Padding是分4个方向:

 

所以代码里就可以分4个方向设置:

如下:  padding-top     padding-right    padding-bottom    padding-left

代码示例如下:

padding-top: 30px;

                          padding-right:60px;

                          padding-bottom:90px;

                          padding-left:10px;

 

还可以使用综合属性设置:

1.综合属性设置4个值, 那么则是顺时针方向设置padding:30px 60px 90px 10px;

2.综合属性设置3个值, padding: 30px 60px 90px; 少了最后一个, 则会自动取对面方向的padding,也就相当于 padding: 30px 60px 90px 60px;

3.综合属性设置2个值, padding:30px 60px;  相当于 padding:30px 60px 30px 60px;

4.综合属性设置1个值, padding:50px; 相当于上右下左, 全部都是50px

 

课堂练习: padding设置上右左为30px  下为20px; 要求最方便的设置

代码如下: padding: 30px;

Padding-bottom: 20px;

 

 

在实际的做网页过程中, 我们会发现, 浏览器会给一些标签默认带有padding, 这个padding的数值基本上与网页的要求不符, 所以需要清除padding, 比如ul标签

Ul{ padding: 0;   }

 

 

 

4.Border

Border就是边框, 边框有三个要素: 粗细, 线型, 颜色.

 

 

Border的style, 系统默认给了很多种, 但这些我们基本只用solid, 因为其他的很多在不同浏览器中是不一样的; 如果公司里设计师的要求较高, 我们就只能去切图来做

 

综合属性:

Border: 1px solid gray;  这个是综合属性的写法

还可以按照方向来拆, 跟padding一样

Border-top  border-right   border-bottom  border-left

 

还可以按照要素来拆:

Border-style    border-width     border-color

 

终极拆法有12种:

Border-top-width: 12px;

Border-top-style:solid;

Border-top-color:black;

Border-right-width:12px;

Border-right-style:solid;

Border-right-color:black;

Border-bottom-width:12px;

Border-bottom-style:solid;

Border-bottom-color:black;

Border-left-width:12px;

Border-left-style:solid;

Border-left-color:black;

 

 

5.标准文档流(非常重要)

1.在web页面中, 我们无法像设计软件制图一样,想画哪里就画哪, 这因为web页面制作是一个流, 必须从上而下制作,

2.在web页面制作中, 我们将这种流, 称为标准文档流; 并且还具有一些特征

A> 空白折叠现象

B>高矮不齐, 底边对齐

C> 有的标签只有在一行写不下,才会自动换行

D> 还分有的标签会自动换行

 

 

5.2块级元素和行内元素

块级元素

1. 独占一行, 不能与其他任何元素并存一行

2. 能够设置宽和高

3. 如果不设置宽和高, 那么将是父亲盒子的宽度的100%

 

行内元素

1. 比较友好, 可以与其他行内元素并存一行

2. 不能设置宽和高

3. 设置或者不设置宽高, 都由文本撑开

 

5.3行内块级元素

1.比较友好, 可以和其他行内元素或者行内块级元素并存一行

2.可以设置宽高

 

在html中, 我们已经给标签分过类: 文本级和容器级

文本级: p span a b i u em

容器级;div h系列  ul li dt dd

 

在css中, 我们又给标签分类, 分为行内与块级(行内块级)

行内标签:span a b i u em

块级标签:div h系列  ul li dt dd p

行内块级: img input

 

 

5.4行内与块级元素相互转换

使用display 属性可以实现转换, 代码示例如下:

Display:block;

Display:inline;

 

小总结: 标准文档流, 限制特别多, 比较恶心,

Div+css 是目前业内网页布局的主流, 所以, 我们不可能仅仅依靠标准文档流来布局

因此, 我们需要脱离标准文档流来做网页,

 

 

5.5脱离标准文档流的手段

1.浮动

2.绝对定位

3.固定定位

 

 

6. 浮动(非常重要)

浮动是css中, 从事布局工作的, 使用最频繁的属性

浮动的元素脱标;

脱标就是去除标准文档流的限制, 比如:

1.浮动的元素可以并存一行;

2.并且可以设置宽和高

 

浮动的理解:

浮动脱标, 脱标之后, 就不占有标准文档流的空间,

我们的理解: 一个元素, 当添加浮动属性, 他就到了上一层画布, 如果是left则往左飘, 但是有一个方向是默认的, 是向上;

 

注意: 一个浮动的标签的结构之前有个标签是标准文档流,则无论如何, 都不会覆盖该标准文档流标签!

 

6.1相同方向的浮动的元素会互相贴靠

连续浮动的元素, 只要有足够的空间, 会相互贴靠, 没有足够的空间, 则再起一行

 

 

6.2字围

 

 

 

 

 

 

7. Margin

外边距:

外边距分为四个方向:margin-top   margin-right   margin-bottom   margin-left

在标准文档流中, 在垂直方向中, 有margin的塌陷现象