zoukankan      html  css  js  c++  java
  • 标准文档流及脱离标准文档流的方法和float浮动用法

    1.标准文档流

       浏览器的排版是根据元素的特征(块和行级),从上往下,从左往右排版。这就是标准文档流。

      浮动 float:left/right;

      效果:元素都加浮动,后面的元素会紧跟这前面的元素并排排列。

      A,只要加了float,这个元素就会脱离标准文档流。

        第一个加了float,离了标准文档流,对于浏览器来说,第二个元素就变成了标准文档流中的第一个,于是就会把他排在第一位。而第一个依然存在,所以就会叠加。

        行级元素加了float,脱离标准流,块不像块,行不像行,能设置宽高,能并排排列。

        Display就没有任何意义了。

      B,浮动的元素会紧紧贴靠在一起

      C,浮动的元素会文字环绕

    2.使元素脱离标准流的方法

      1.        浮动 float

      2.        绝对定位position:absolute

      3.        固定定位position:fixed;    fixed固定的

      浮动带来的坏处

      1,给元素加了浮动,撑不起父级的高度了

    清除浮动

    1.        给浮动的父元素添加高度

    2.        给父级添加overflow:hidden;

    3.        给浮动元素的后面添加一个空的div 添加样式为clear:both

    4.  给浮动元素的父级添加一个类clearfix

    伪类选择器  

    只要选择器后面带:,都可以说他是伪类选择器

    a:link{}  a:hover{}  a:visited{}  a:active{}  p:after{} p:before{}

    a的四个顺序不能改变

    伪元素和伪类选择器的区别

    伪元素有两个冒号如p::after{}  伪类选择器有一个冒号p:hover{}

    备注
      Margin:0auto;和text-align:center;
      Margin居中是对自身  text-align是对元素内部的文本居中的
      Visibility:hidden;和display:none;
      Visibility隐藏了之后还占据空间   display隐藏后不占据空间

  • 相关阅读:
    elementui表单输入框部分校验--判断
    vue学习如何引入js,封装操作localStorage本地储存的方法
    vue组件传值 递增次数传递bug修复
    vue深度监听之手机格式344
    vue-------滑动验证
    vue get/post请求如何携带cookie的问题
    elementui的dialog组件踩坑
    WebStorm License Activation (WebStorm许可证激活)
    input 标签实现带提示文字的输入框
    隐藏 input 标签的边框
  • 原文地址:https://www.cnblogs.com/Shinigami/p/9655933.html
Copyright © 2011-2022 走看看