目录

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. php版本：实现过滤掉广告、色情、政治相关的敏感词
			
    现在网络上还是很乱,尤其充斥着各种广告.色情.政治相关的内容,很明显这是不符合我们国家的法律的,所以为了一个产品能够健康长久的活下去,最好还是采用一定的策略过滤或者提醒用户不要发这种内容.不过说起来容 ...
    
			
    2. 
						
  2. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_3-4.动态Sql语句Mybaties SqlProvider
			
    笔记 4.动态Sql语句Mybaties SqlProvider     简介:讲解什么是动态sql,及使用 1.             @UpdateProvider(type=VideoSqlP ...
    
			
    3. 
						
  3. Ubuntu配置zsh
			
    安装zsh sudo apt-get install zsh chsh -s /bin/zsh 配置 curl -L https://raw.github.com/robbyrussell/oh-my ...
    
			
    4. 
						
  4. R语言与概率统计(三) 多元统计分析（上）
			
    > #############6.2一元线性回归分析 > x<-c(0.10,0.11,0.12,0.13,0.14,0.15,0.16,0.17,0.18,0.20,0.21,0. ...
    
			
    5. 
						
  5. JAVA 基础编程练习题14 【程序 14 求日期】
			
    14 [程序 14 求日期] 题目:输入某年某月某日,判断这一天是这一年的第几天? 程序分析:以 3 月 5 日为例,应该先把前两个月的加起来,然后再加上 5 天即本年的第几天,特殊情况, 闰年且输入 ...
    
			
    6. 
						
  6. React Native使用Redux总结
			
    1>npm安装redux: "react-redux": "^5.0.5", "redux": "^3.7.1", ...
    
			
    7. 
						
  7. NFS PersistentVolume
			
    一.部署nfs服务端: k8s-master 节点上搭建了 NFS 服务器 (1)安装nfs服务: yum install -y nfs-utils rpcbind vim /etc/exports  ...
    
			
    8. 
						
  8. Linux下Apache虚拟主机配置
			
    Linux下Apache虚拟主机的三种配置.这样可以实现一台主机架构多个独立域名网站.其中基于域名的最为常见.性价比也最高.下面PHP程序员雷雪松详细的讲解下Linux下Apache虚拟主机配置的具体 ...
    
			
    9. 
						
  9. python-linux-集群nginx
			
    一命令基本格式 ----cd ~ 家 ----cd / 根 ---cd ..  上级 ----pwd  当前路径 ----ls -l   -a  -h ----权限rwxrwxrwx  755 二文件 ...
    
			
    10. 
						
  10. Django-Form组件-forms.Form
			
    forms.Form ​ 在之前的示例HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时很多时候都需要对用户的输入做校验,比如校验用 ...
    
			
    11.