css布局课件

Posted 2020-08-06 艾特水煮鱼

1.什么是CSS盒模型

我们的网页就是通过一个一个盒子组成的。

2.一个盒子拥有的属性：宽和高（width和height）、内边距（padding）、边框（border）、外边距（margin）

width是“宽度”的意思，CSS中width指的是内容的宽度，而不是盒子的宽度。

height是“高度”的意思，CSS中height指的是内容的高度，而不是盒子的高度

padding是“内边距”的意思

border是“边框”

margin是“外边距”

3.宽和高

1）宽和高只作用于内容区

2）一般不指定高度，因为我们的内容可以把我们的盒子给撑开

3）CSS2开始对我们的宽高引入了百分比值

4）行内样式是不能设置宽高的

4.内边距

1）盒子的背景颜色是可以延伸到padding区域的

2）如果你设置了border，那么你最好也设置padding，以免边框紧紧挤压内容。

3）padding不允许有负值

4）padding设置值的顺序是上、右、下、左（顺时针记忆）

5）Padding不会重合（和margin相比较的）

设置一个左内边距为20px；上右下内边距为30px的盒子

6）一些元素，默认带有padding，比如ul标签。

 

所以我们做站的时候，为了便于控制，总是喜欢清除这个默认的padding和margin

  *{ margin: 0; padding: 0; }

5.边框

1）边框有三个特征可以指定：样式、宽度以及颜色，颜色如果不写，默认是黑色。另外两个属性不写，显示不出来边框。

2）分开写的话写作：

border-width: 1px;

border-style: solid;

border-color: red;

border属性能够被拆开，有两大种拆开的方式：

1） 按3要素:border-width、border-style、border-color

2） 按方向：border-top、border-right、border-bottom、border-left

如果不觉得蛋疼的话，还可以拆成12条语句

合着写的话：border:  1px  solid  red;

6.外边距

1）外边距总是透明的，不能设置颜色，强调没有margin-color这个属性（当然也没有padding-color这个属性）

2）外边距是可以为负值的

3）margin塌陷现象（margin重叠）：上下重叠，取最大值，左右不重叠

4）Margin：0 auto 居中原理

注意：

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

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

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

margin:0 auto;是在居中盒子，不是居中文本。文本居中要是有text-align：center；

 

7.正常流布局

宏观的讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画。

1）从上到下（块级），从左到右（行内）的格式布局

2）正常流是做不出来网页的

8.块级元素和内嵌元素的相互转换

块级元素可以设置为行内元素

行内元素可以设置为块级元素

display是“显示模式”的意思，用来改变元素的行内、块级性质（inline，block）

9.元素浮动

浮动是CSS里面布局用的最多的属性。

首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。

浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。

1）当元素浮动时，元素会被视为块级（拿a标签距离）

浮动元素脱标，将会脱离普通流，其容器（父）元素将得不到脱离普通流的子元素高度。

2）只有横向浮动，并没有纵向浮动。

3）浮动元素相互贴靠

结论：假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

 div的顺序是html代码中div的顺序决定的。

  靠近页面边缘的一端是前，远离页面边缘的一端是后。

float的属性值有none、left、right，有几个要点：

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

 

4）浮动元素的字围效果

10.利用浮动来制作导航栏

 

11.清除浮动

浮动对页面的影响是什么？

解决高度塌陷，会去追尾

12.定位的几种类型：静态定位、相对定位、绝对定位、固定定位

静态定位：就是我们的标准流

相对定位：不脱标 形影分离

默认被设置为auto

在文档流中所占据的的空间被保留，用途一般有两个

1）用来微调元素

2）和绝对定位一起来使用

绝对定位：脱标

绝对定位的元素完全从文档流中脱离出来，所占空间不保留

固定定位：脱标

13.处理溢出

Overflow:hidden

 

14.设置元素的可见性

visibility:visible(可见)、hidden(隐藏)、inherit(继承)(默认)

 

15.visibility:hidden;和display:none;区别：

visibility:hidden;在隐藏时其空间仍存在，而display:none;在隐藏时其空间不存在(即完全消失)。

16.处理元素的重叠

使用z-index属性可以设置元素的高低，这个属性仅在position为absolute或relative时有效