css简介(二)

一、标准文档流
1.1什么是标准文档流
我们制作的HTML网页和PS画图软件画图时有本质上面的区别：
HTML网页在制作的时候 都得遵循一个“流”的规则：从左至右、从上至下
使用PS软件画图时 我们想在哪里画个东西 就可以在哪里画
1.2标准文档流要注意的事项
1) 空白折叠现象
有空白的现象
 
没有空白现象
如果实现文字与图片之间没有空白现象：我们需要让这些元素放在同一行，让它们紧密相连。
 

2) 高矮不齐，底部对齐
  
二、浮动
需求：
能够实现让多个元素排在同一行，并且给这些元素设置宽度与高度！
让多个元素排在同一行：行内元素的特性
给这些元素设置宽高：块级元素的特性
在标准文档流中的元素只有两种：块级元素和行内元素。如果想让一些元素既要有块级元素的特点也要有行内元素的特点，只能让这些元素脱离标准文档流。
浮动可以让元素脱离标准文档流  就可以实现让多个元素排在同一行 并且可以设置宽高！ 
浮动它是通过一个浮动属性来实现 
float：这个属性有两个值   left(向左浮动) 向左移动 、right(向右浮动)  向右移动 
浮动元素的特性：
span style=”white-space:pre;”> 浮动元素它脱离标准文档流 它不再占用空间了 
span style=”white-space:pre;”> 我们可以把浮动元素理解为“漂”
span style=”white-space:pre;”> 浮动元素它的层级要比标准文档流里面的元素层级要高，它会将标准文档流中的元素给压盖住  
span style=”white-space:pre;”> 浮动元素它会向左或者向右进行浮动(移动)
span style=”white-space:pre;”> 浮动元素它遇到了父元素的边框然后就停止了浮动 
span style=”white-space:pre;”> 浮动元素它还会遇到上一个浮动元素后就停止了浮动
span style=”white-space:pre;”> 浮动元素浮动以后 其父元素不会再包裹着浮动元素 
span style=”white-space:pre;”> 我们将行内元素进行浮动以后 那么这个行内元素它会变成块级元素
 
 
 
 
 
三、浮动案例
 
 
 
效果:
 
四、清除浮动
注意：
只要有浮动  那么必须有清除浮动
为什么要清除浮动br> 因为经过浮动了元素 它会影响到它下面的元素的排版布局  还有浮动元素的父元素没有将浮动元素包裹着 

只要清除了浮动 不会影响到浮动元素的下面进行排版布局  浮动元素的父元素会将浮动元素从视觉上包裹着

清除浮动有以下三种方法：
span style=”white-space:pre;”> 给浮动元素的父元素设置一个固定的高度   但是这个方法不建议使用  因为一个元素的高度一般情况下不是手动设置的 它应该是由其自身的内容来撑高的！
 
 
span style=”white-space:pre;”> 使用清除浮动的样式属性  clear   
span style=”white-space:pre;”> clear这个属性是专用于来清除浮动的  这个属性有三个值  
span style=”white-space:pre;”> clear:left;清除左浮动  
span style=”white-space:pre;”> clear:right; 清除右浮动   
span style=”white-space:pre;”> clear:both;两者都清除
这个属性一般是用在最后 一个浮动元素的下面  在最后一个浮动元素的下面新建一个空白的div 这个div什么都要放 不要给这个div里面放置内容  它只做一件事件就是清除浮动
 
 
span style=”white-space:pre;”> 使用overflow:hidden 这个属性来清除浮动  overflow是一个属性   
overflow:hidden 它原意是用来将溢出的部分进行隐藏  但是它还可以用于清除浮动
overflow:hidden 它一般主要是用来将列表的浮动给清除。
 

效果:
 
五、盒子模型
什么是盒子br> 盒子是用来存储物品
思考一下：一个盒子是由哪些部分进行组成！
我们可以将一个盒子理解为一个快递的包裹：
有内容+有填充物+纸盒子
那我们如何去理解CSS中的盒子呢 
在CSS中一个盒子的组成部分：内容(content)+内填充(padding)+边框(border)+外边距(margin)
一个盒子中的主要属性：width、height、padding、border、margin
 
width：指“宽度”的意思  但是这里的宽度指的盒子里面的内容的宽度  而不是盒子的宽度
hegiht：指“高度”的意思  但是这里的高度指的盒子里面的内容的高度  而不是盒子的高度
padding：是“内填充”的意思，指的盒子里面的内容到盒子边框的距离  
border：是“外边框”的意思  指的盒子的边框
margin：是“外边距”的意思  指的是盒子与盒子之间的间距
 
 
问：请回答如何计算一个盒子的总宽度br>一个盒子的总宽度=盒子里面内容的宽度+左右两边的填充+左右两边的边框线
一个盒子的总高度=盒子里面内容的高度+上下两边的填充+上下两边的边框线
注意：一个盒子的高度一般情况下是不用设置的，因为一个盒子的高度它应该是由其内容来决定的。

六、padding
padding是“内填充”的意思 指的是盒子中间的内容到边框的这一段距离 

padding是有4个方向的 所以我们能够分别的描述这4个方向的padding 

方法有两种：第一种我们称之为小属性，第二种我们称之为简写属性
小属性：

padding-top：上内填充
padding-right：右内填充
padding-bottom：下内填充
padding-left：左内填充 
 
 

简写属性：
span style=”white-space:pre;”> padding：这个属性是有方向的  可以同时表示四个方向  这个属性的方向是有顺序的  顺序是顺时针方向  也就是：上、右、下、左  这个顺序
span style=”white-space:pre;”> padding:20px  表示上右下左这四个方向的内填充都为20像素 
span style=”white-space:pre;”> padding:10px 20px; 表示上下为10像素  左右为20像素 
span style=”white-space:pre;”> padding:10px 20px 30px;表示上为10 左右为20  下为30
span style=”white-space:pre;”> padding:10px 20px 30px 40px;表示上为10 左为20 右为30 下为40
 
七、margin
margin它表示“外边距”的意思 它是指盒子与盒子之间的距离 
margin它也是有4个方向的 所以我们也能够通过4个方向对其进行描述
方法有两种：第一种我们称之为小属性，第二种我们称之为简写属性
小属性：
margin-top：上外边距
margin-right：右外边距
margin-bottom：下外边距
margin-left：左外边距 

简写属性：
span style=”white-space:pre;”> margin：简写属性它是有方向的 这里的方向是一个顺时针的方向  它的方向是的顺序是：上、右、下、左
span style=”white-space:pre;”> margin:10px;表示上右下左这四个方向的外边距都是10像素
span style=”white-space:pre;”> margin:10px 20px;表示上下这两个方向的外边距为10像素  左右两个方向的外边距为20像素
span style=”white-space:pre;”> margin:10px 20px 30px;表示上外边距为10像素 左右外边距为20像素 下外边距为30像素 
span style=”white-space:pre;”> margin:10px 20px 30px 40p;表示上外边距为10像素 右外边距为20像素 下外边距为30像素 左外边距为40像素 
 
八、margin的注意事件
8.1 margin有塌陷现象
什么是margin的塌陷现象
1、在标准的文档流中 竖直方向的margin值不会叠加 它会取较大的值
 
2、横着方向是没有margin的塌陷现象
   
3、浮动元素它是没有margin的塌陷现象的
 

8.2 margin居中
margin的值可以是auto   auto表示“自动”的意思  当左外边距与右外边距的值都是auto时那么这个盒子就会水平居中
 
注意：
span style=”white-space:pre;”> 使用margin来实现水平居中时 一定要有固定的宽度(给这个盒子设置一个宽度)  只有块元素可以实现水平居中  行内元素是不能实现居中的 
 
span style=”white-space:pre;”> 只有标准文档流中的盒子才可以使用margin来实现水平居中
 
span style=”white-space:pre;”> margin属性是用来实现盒子的水平居中 而不是文本的水平居中  
span style=”white-space:pre;”> text-align这个属性它是用于实现文本的对齐方式  如果其值为center就表示文本水平居中  但是它不能实现盒子的水平居中
 
8.3善于使用父元素的padding而不是使用子元素的margin
 
要解决上图的问题：有两种方法可以解决
第一种方法：给其父元素设置一个边框线
 
但是这种方法不常用，因为边框一般主要是用于来调试代码的  很少会给一个盒子设置边框
第二种方法：不要使用子元素的margin而是要使用其父元素的padding
 

说明：margin这个属性它本意是用于来描述兄弟与兄弟元素之间的关系  不是用于描述父子元素之间的关系的。如果是父子元素的关系  就最好使用给其父元素设置padding属性
九、border
border：它是“边框”的意思 
边框有三个要素：粗细、线型、颜色 
语法格式：
border：粗细 线型 颜色;
 
说明：
边框的颜色可以省略不写 但是如果不写的话就表示边框的颜色为黑色 其它的两个属性值不能不写 如果不写的话就会不显示边框。
 

边框的线型：
 
 
其实边框也是有四个方法的：
span style=”white-space:pre;”> border-top:上边框
span style=”white-space:pre;”> border-right:右边框
span style=”white-space:pre;”> border-bottom:下边框
span style=”white-space:pre;”> border-left:左边框
 
效果:
 
十、display
display  它是“显示”的意思，它就是用来进行行内元素与块级元素之间的相互转换！将隐藏的元素显示或者是将显示的元素进行隐藏。
display  这个属性取值：
span style=”white-space:pre;”> inline(行内)
span style=”white-space:pre;”> block(块级)
span style=”white-space:pre;”> none(无)

当我们将一个行内元素的display属性的值设置为block以后 那么这个元素就会被转换为块级元素 
 

将我们将一个块级元素的display属性的值设置为inline以后 这个元素就会从块级元素转换为行内元素。
 
注意：
span style=”white-space:pre;”> 如果说将行内元素转换为了块级元素，那么这个元素它就会拥有块级元素的特点
span style=”white-space:pre;”> 如果说将块级元素转换为了行内元素，那么这个元素它就会拥有行内元素的特点。

将一个显示的元素隐藏、将一个隐藏的元素显示。
span style=”white-space:pre;”> display:none(将一个显示的元素进行隐藏)
span style=”white-space:pre;”> display:block(将一个隐藏的元素显示出来)
 
十一、display属性的综合案例
 
 
 
 

来源：qq1690194137