目录

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. Docker的镜像制作与整套项目一键打包部署
			
    Dockerfile常用指令介绍 指令 描述 FROM 构建的新镜像是基于哪个镜像.例如:FROM centos:6 MAINTAINER 镜像维护者姓名或邮箱地址.例如:MAINTAINER Mr. ...
    
			
    2. 
						
  2. 基于Python使用scrapy-redis框架实现分布式爬虫
			
    1.首先介绍一下:scrapy-redis框架 scrapy-redis:一个三方的基于redis的分布式爬虫框架,配合scrapy使用,让爬虫具有了分布式爬取的功能.github地址: https: ...
    
			
    3. 
						
  3. Java中非静态成员变量、静态成员变量的初始化时机
			
    转: Java中非静态成员变量.静态成员变量的初始化时机. 2018年05月22日 11:48:11 SilenceCarrot 阅读数 421   版权声明:技术就要分享才有意思,欢迎大家分享(注明 ...
    
			
    4. 
						
  4. WebXML部署服务
			
    <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmln ...
    
			
    5. 
						
  5. Spring Boot开发Web应用之Thymeleaf篇
			
    前言 Web开发是我们平时开发中至关重要的,这里就来介绍一下Spring Boot对Web开发的支持. 正文 Spring Boot提供了spring-boot-starter-web为Web开发予以 ...
    
			
    6. 
						
  6. iptables基本命令到深入
			
    1.关闭firewalld,安装iptables-server并启动服务 systemctl stop firewalld systemctl disable firewalld yun -y ins ...
    
			
    7. 
						
  7. sql次级语句
			
    select upper(n_id) from nrc_news;select left(n_content,1) from nrc_news;select len(n_content) from n ...
    
			
    8. 
						
  8. JAVA实验报告四及第六周总结
			
    JAVA第六周作业 实验报告四 第一题 (1)根据下面的要求实现圆类Circle. 1.圆类Circle的成员变量:radius表示圆的半径. 2.圆类Circle的方法成员: Circle():构造 ...
    
			
    9. 
						
  9. 【LOJ】#3119. 「CTS2019 | CTSC2019」随机立方体
			
    题解 用容斥,算至少K个极大值的方案数 我们先钦定每一维的K个数出来,然后再算上排列顺序是 \(w_{k} = \binom{n}{k}\binom{m}{k}\binom{l}{k}(k!)^3\) ...
    
			
    10. 
						
  10. 【计算机网络】-网络层-Internet的网络层
			
    [计算机网络]-网络层-Internet的网络层 Internet是一组相互连接的网络或者自治系统的集合 Internet 1.存在几个主要骨干网络,骨干网络是由高带宽的线路和快速路由器构成 2.这些 ...
    
			
    11.