目录

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. nginx 反向代理实现负载均衡*理论
			
    Nginx负载均衡集群介绍 负载均衡集群提供了一种廉价,有效,透明的方法,来扩展网络设备和服务器的负载,带宽和吞吐量,同时加强了网络数据处理能力,提高了网络的灵活性和可用性. 搭建负载均衡服务的需求: ...
    
			
    2. 
						
  2. 6and7.Pod控制器应用进阶
			
    Pod控制器应用进阶:imagepullpolicy: 镜像获取策略 Always,Never,IfNoPresent 暴露端口: portslabels 标签可以后期添加修改. ========== ...
    
			
    3. 
						
  3. CentOS里查看内存的使用
			
    转自 http://blog.csdn.net/blueman2012/article/details/6904597
    
			
    4. 
						
  4. LOGIT REGRESSION
			
    Version info: Code for this page was tested in SPSS 20. Logistic regression, also called a logit mod ...
    
			
    5. 
						
  5. 3-3 man手册介绍
			
    man手册介绍 内容表示的意义: 各部分功能说明: SECTION: name:命令的名称及功能描述: SYNOPSIS:命令使用格式摘要: DESCRIPTION:详细描述信息: OPTIONS:选 ...
    
			
    6. 
						
  6. TypeError: __init__() got an unexpected keyword argument 'serialized_options'
			
    问题描述: TypeError: __init__() got an unexpected keyword argument 'serialized_options' File "objec ...
    
			
    7. 
						
  7. APP安全_Android渗透环境
			
    Android渗透 移动APP大多通过WEB API服务的方式与服务端进行交互,这种模式把移动安全和web安全绑在一起.常见的web漏洞在移动APP中也存在,比如SQL注入,文件上传,中间件/serv ...
    
			
    8. 
						
  8. Git速成学习第一课：创建版本库与版本回退
			
    Git速成学习笔记整理于廖雪峰老师的官网网站:https://www.liaoxuefeng.com/ 我太困了0.0精神点再写...... /*我来啦!以后会陆续更新自己的学习笔记*/ Git是分布 ...
    
			
    9. 
						
  9. JS触发事件集锦
			
    事件句柄 HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript.下面是一个属性列表,这些属性可 ...
    
			
    10. 
						
  10. pramfs理论
			
    一.文件系统 1.百度百科: http://baike.baidu.com/link?url=WE3aLsszfbZZIPK-Vz8yPd799_RMqyfQZ4D-ETS5yd1nI8XzPK660 ...
    
			
    11.