目录

1.标签分类
   2.浮动布局
   3.margin塌陷
   4.定位postion
   5.背景图

一. 标签分类

默认在标准文档流

行内标签

span,a,em,i,strong,b,input,img

特点:
  1.在一行内显示
  2.不能设置宽高,如果不设置宽 默认是字体的大小

ps: 块级元转行内 很少使用

ps:行内标签又包括了行内块标签。属性数display：inline-block

经典标签：input， img

 块级标签

div p ul ol li dl dt form table h1~h6

   特点:
  1.独占一行
  2.可以设置宽高,如果不设置宽,默认是父元素100%的宽度

标签分类的属性display，表示要显示 什么状态，可以改变标签属性取值范围inline | block  | inline-block | none

ps:一个行内转行内块用的最多

二. 浮动布局

设计初衷是文字环绕

（

marge：0 auto  让一个普通标准文档流下盒子水平居中

垂直居中：父盒子的高度减子盒子的高度除2

）

浮动现象：1. 脱离标准文档流 （不在 页面占位置）

2. 贴边显示

3.文字怀绕

4.收缩现象（一旦给元素设置了浮动，就可以任意设置宽度）

问题：

一旦给子元素设置浮动,父元素不设置高度,因为浮动元素脱标了,不在页面上占位置,撑不起父元素 的高度

清除浮动的方式：

 1.给父盒子设置固定高度（不易维护）

  2.内墙法

clear:both; 清除左右两边浮动带来的影响

在最后一个浮动元素的后面加一个空的块级元素(标准文档流),并且设置该元素为
                  缺点: 代码冗余                 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #header{
            width: 100%;
            /*height: 100px;*/
        }
        .container{
            width: 1226px;
            /*height: 100%;*/
            background-color: black;
            margin: 0 auto;
        }

        .logo{
            width: 55px;
            height: 55px;
            background-color: darkorange;
            float: left;
            margin-top: 22px;
        }
        .list_header{
            width: 500px;
            height: 100px;
            background-color:deepskyblue ;
            float: left;
        }

        .form{
            width: 250px;
            height: 48px;
            background-color: darkcyan;
            float: right;
            margin-top: 28px;
        }
        .clearfix{
            clear: both;
        }
    </style>

</head>
<body>

<div id="header">
    <div class="container">
        <div class="logo"></div>
        <div class="list_header"></div>
        <div class="form"></div>
        <div class="clearfix"></div>
    </div>

</div>
</body>
</html>

 3.伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #header{
            width: 100%;
            /*height: 100px;*/
        }
        .container{
            width: 1226px;
            /*height: 100%;*/
            background-color: black;
            margin: 0 auto;
        }

        .logo{
            width: 55px;
            height: 55px;
            background-color: darkorange;
            float: left;
            margin-top: 22px;
        }
        .list_header{
            width: 500px;
            height: 100px;
            background-color:deepskyblue ;
            float: left;
        }

        .form{
            width: 250px;
            height: 48px;
            background-color: darkcyan;
            float: right;
            margin-top: 28px;
        }
        .clearfix::after{
            content: '';
            display: block;
            clear: both;
        }

    </style>

</head>
<body>

<div id="header">
    <div class="container clearfix">
        <div class="logo"></div>
        <div class="list_header"></div>
        <div class="form"></div>
        <div class="clearfix"></div>
    </div>

</div>
</body>
</html>

4. overflow:hidden
   给父元素添加了overflow hidden也能清除浮动
   牵扯了css定制的规则
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #header{
            width: 100%;
            /*height: 100px;*/
        }
        .container{
            width: 1226px;
            /*height: 100%;*/
            background-color: black;
            margin: 0 auto;
            overflow: hidden;
        }

        .logo{
            width: 55px;
            height: 55px;
            background-color: darkorange;
            float: left;
            margin-top: 22px;
        }
        .list_header{
            width: 500px;
            height: 100px;
            background-color:deepskyblue ;
            float: left;
        }

        .form{
            width: 250px;
            height: 48px;
            background-color: darkcyan;
            float: right;
            margin-top: 28px;
        }

    </style>

</head>
<body>

<div id="header">
    <div class="container">
        <div class="logo"></div>
        <div class="list_header"></div>
        <div class="form"></div>
        <div class="clearfix"></div>
    </div>

</div>
</body>
</html>

ps:布局规则 给一个盒子一旦设置了overflow：hidden|scroll

设置了overflow：hidden 这个盒子就会形成BFC 上下文管理

凡是在BFC中的盒子，有一个布局规则：

父元素的规则也会得到计算

ps:浮动给标签打来的影响：脱离标准流

三. margin塌陷

水平方向 两个margin加起来的距离

垂直：会出现塌陷问题，一个100px的口和一个50px的口会重叠

标准文档流下margin垂直也会出现塌陷，浮动margin不会出现问题

解决方案：给一个盒子设置就好了

四. 定位

position:static;静态 默认的

       position: relative;相对定位
      参考点:以原来的位置为参考点
 现象:
       1.压盖现象(一般不用)
       2.微调元素

布局方案:
       子绝父相

position: absolute; 绝对定位
 参考点:
        单独设置绝对定位,以页面左上角为参考点
       有子绝父相,以最近的父辈元素的左上角为参考点
现象:
     1.脱标
      2.压盖现象(常用)

position: fixed; 固定定位
  参考点:浏览器的左上角
 现象:
    0.固定在网页上不变
    1.脱标
    2.压盖(一般不用)
作用:
     固定导航栏,小广告,回到顶部

   relative相对定位

      设置相对定位对盒子没影响，但是对多四个属性 top left (往右) right （往左） bottom

       以原来的位置为参考点

      现象： 1. 压盖现象   2. 可以微调元素

   （vertical-align:middle 设置基线 多用于input，在这里看到的 所以就补充在这儿了。啦啦啦）

  absolute 绝对对位 （相对对位一般和绝对定位联合使用，子绝父相）

   参考点：单独设置绝对对位以页面左上角为参考点  子绝父相里以父为参考点

   例子：

          

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mi购物车案例</title>
    <style>
        .shop{
            width: 100px;
            height: 40px;
            background-color: #000;
            float: right;
            line-height: 40px;
            position: relative;
            text-align: center;
            border-radius: 4px;
        }

        .shop a{
            text-decoration: none;
            width: 100px;
            height: 40px;
            display: block;
            color: #fff;
            font-size: 14px;

        }
        .shop .content{
            width: 300px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 40px;
            left: -200px;
            display: none;
        }
        .shop:hover{
            display: block;
        }
    </style>
</head>
<body>
<div class="shop">
    <a href="#">购物车</a>
    <div class="content"></div>
</div>

</body>
</html>

fixed 固定定位
参考点是浏览器的左上角
z-index 设置优先级
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        *{
            padding: 0;
            margin: 0;
        }

        body{
            padding-top: 80px;
        }
        .fix_header{
            width: 100%;
            height: 80px;
            /**/
            background-color: black;
            position: fixed;
            top: 0;
            left: 0;
            bottom: 10px;
            z-index: 10;
         }

        p.active{
            position: relative;
            color: red;
        }

    </style>
</head>
<body>
<div class="fix_header"></div>
<p>aaaaaaaaaaaivy</p>
<p>ivy</p>
<p>ivy</p>
<p>ivy</p>
<p>ivy</p>
<p>ivy</p>
<p>ivy</p>
<p>ivy</p>
<p class="active">what's the weather like?</p>
<p>ivy</p>
<p>ivy</p>
<p>ivy</p>
</body>
</html>

z-index
      z-index只应用在定位的元素，默认z-index:auto;
      z-index取值为整数，数值越大，它的层级越高
      如果元素设置了定位，没有设置z-index，那么谁写在最后面的，表示谁的层级越高。
      从父现象。通常布局方案我们采用子绝父相，比较的是父元素的z-index值，哪个父元素的z-index值 越大，表示子元素的层级越高。

五 背景图

background-color:颜色

background-img: url 写地址

background-position 切图

												


											
day12 css样式的更多相关文章
	

    
								
  1. css样式让input垂直居中
		
    css样式让input垂直居中 css代码: .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; displa ...
    
		
    2. 
						
  2. 深度理解CSS样式表，内有彩蛋....
		
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
		
    3. 
						
  3. js设置css样式.
		
    在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...
    
		
    4. 
						
  4. CSS样式表
		
    CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...
    
		
    5. 
						
  5. 脚本工具（获取某个文件夹下的所有图片属性批量生成css样式）
		
    问题描述: 由于有一次工作原因,就是将某个文件夹下的所有图片,通过CSS描述他们的属性,用的时候就可以直接引用.但是我觉得那个文件夹下的图片太多,而且CSS文件的格式又有一定的规律,所有想通过脚本来生 ...
    
		
    6. 
						
  6. jQuery所支持的css样式
		
    jQuery所支持的css样式 backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth bo ...
    
		
    7. 
						
  7. Yii2 assets注册的css样式文件没有加载
		
    准备引入layui.css文件的,在LayuiAssets类中已经配置了资源属性 <?php namespace frontend\assets; use yii\web\AssetBundle ...
    
		
    8. 
						
  8. 获取元素计算后的css样式封装
		
    获取元素计算后的css样式封装: function getCss(obj,attribute) { if(obj.currentStyle) { return obj.currentStyle[att ...
    
		
    9. 
						
  9. JS实战 · 仿css样式选择器
		
    代码如下: <html> <head>     <meta http-equiv="Content-Type" content="text/ ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 通过反射将一个java对象的属性值转换为一个Map
			
    将一个java对象的属性值转换为一个Map: import java.beans.BeanInfo;import java.beans.Introspector;import java.beans.P ...
    
			
    2. 
						
  2. Centos7 搭建Svn+Apache服务器
			
    Svn客户端搭建 1.yum install subversion 2.查看安装版本 svnserve --version 3.创建SVN版本库目录 mkdir -p /opt/svn 4.创建版本库 ...
    
			
    3. 
						
  3. Jmeter接口测试 1=> 接口测试介绍
			
    第一节 接口测试概念 什么是接口测试概念:接口测试是测试系统组件间接口的一种测试.接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点. 测试的重点是要检查数据的交换,传递和控制管理过 ...
    
			
    4. 
						
  4. 【miscellaneous】IP多播技术及其编程
			
    标  题: IP多播技术及其编程 发信站: 幽幽黄桷兰 (Mon Jun 16 10:35:39 2003) 转信站: SMTH!maily.cic.tsinghua.edu.cn!news2.ues ...
    
			
    5. 
						
  5. C#枚举扩展方法，获取枚举值的描述值以及获取一个枚举类下面所有的元素
			
    /// <summary> /// 枚举扩展方法 /// </summary> public static class EnumExtension { private stat ...
    
			
    6. 
						
  6. flex 遇上white-space:nowrap的2种解决方法
			
    需求:使用flex布局,超出部分想使用点点点显示 一.方法1使用min-width:0 效果: HTML代码如下: <div class="team-body"> &l ...
    
			
    7. 
						
  7. python中 __file__的小坑坑
			
    在python脚本中,我们难免会需要用到自身文件所在的绝对路径,第一想法可能就是用os.path.dirname(__file__) 但是这里有个大坑,我就踩了,这种方式得到路径会出现问题,脚本执行报 ...
    
			
    8. 
						
  8. day34 并行并发、进程开启、僵尸及孤儿进程
			
    day34 并行并发.进程开启.僵尸及孤儿进程 1.并行与并发 什么是并行? 并行指的是多个进程同时被执行,是真正意义上的同时 什么是并发? 并发指的是多个程序看上去被同时执行,这是因为cpu在多个程 ...
    
			
    9. 
						
  9. 学习笔记：html学习之一：html基本标记
			
    1. 概论 一个完整的 HTML 文档必须包含 3 个部分: 一个由 元素定义的文档版本信息. 一个由 定义各项声明的文档头部, 作为各种声明信息的包含元素出现在文档的顶端,并且要先于 出现. 一个由 ...
    
			
    10. 
						
  10. Appendix 1- LLN and Central Limit Theorem
			
    1. 大数定律(LLN) 设Y1,Y2,……Yn是独立同分布(iid,independently identically distribution)的随机变量,A = SY /n = (Y1+...+ ...
    
			
    11.