目录

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. 解决android sdk docs帮助文档打开慢的问题
			
    解决android sdk docs帮助文档打开慢的问题 转https://blog.csdn.net/yang5726685/article/details/80543849 经查是因为本地文档中的 ...
    
			
    2. 
						
  2. WebLogic服务器
			
    WebLogic是美国Oracle公司出品的一个application server确切的说是一个基于JAVAEE架构的中间件,BEA WebLogic是用于开发.集成.部署和管理大型分布式Web应用 ...
    
			
    3. 
						
  3. eclips注释的快捷键
			
    一 . 注释java或者c++ 代码的快捷键 CTRL + / 二.  注释xml格式的快捷键 注释: CTRL + SHIFT + / 取消注释: CTRL + SHIFT + \
    
			
    4. 
						
  4. [Kaggle] How to handle big data?
			
    上一篇,[Kaggle] How to kaggle?[方法导论] 这里再做一点进阶学习. 写在前面 "行业特征" 的重要性 Ref: Kaggle2017—1百万美金的肺癌检测竞 ...
    
			
    5. 
						
  5. DevOps - 微服务与Serverless
			
    微服务 简介 "微服务"强调的是服务的大小,它关注的是某一个点. "微服务架构"则是一种架构思想,需要从整体上对软件系统进行通盘的考虑. 通俗来说,微服务架构就 ...
    
			
    6. 
						
  6. 自动化运维：（1）认识  Shell
			
    目录 (一)运维是什么? (二)什么是 Shell? (三)Shell的分类 (四)Shell脚本 (五)Shell的变量 (六)表达式 (七)Linux常见符号 (八)常见命令 (一)自动化运维是什 ...
    
			
    7. 
						
  7. JQuery自动填充控件：autocomplete（自己稍作了修改）
			
    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
			
    8. 
						
  8. Postfix to Prefix Conversion & Prefix to Postfix Conversion
			
    Postfix to Prefix Conversion Postfix: An expression is called the postfix expression if the operator ...
    
			
    9. 
						
  9. jdk1.8 -- stream 的使用
			
    一.stream介绍 stream 是jdk 一个加强的api操作,翻译过来就是流的意思,主要是对Collection 集合的一些操作,流一但生成就会有方向性,类似于自来水管的水流一样,不可以重复使用 ...
    
			
    10. 
						
  10. Shell脚本中计算字符串长度的5种方法
			
    有时在Linux操作系统中需要计算某个字符串的长度,通过查询资料整理了下目前Shell中获取字符串的长度的多种方法,在这里分享给大家,方法如下: 方法1: 使用wc -L命令wc -L可以获取到当前行 ...
    
			
    11.