zoukankan      html  css  js  c++  java
  • 基础4

    基础知识4

    1.补充

       margin的margin:0 auto;可以解决元素的居中,前提是给这个元素设置width。

    2.css层叠的问题

          css的两个性质

                1.继承性:就是给父级设置的属性,同样也发生在了他的子代身上

                 2.层叠性:选择器的一种选择能力,谁的权重大就选谁

                      A,选不中,走继承关系,(font,color,text)继承的权重是0 ,!impont不起作用

                           a,有多个父级都设置了这样的样式,走就近原则

                     B,选中了

                           a,权重问题,谁的权重大走谁的样式

                           b,权重相同,谁在后选谁

                           c,纯标签和类没有可比性,纯类和id也没可比性。

    3.标准文档流:浏览器分为块级和行级元素,以从上往下从左往右的形式以此排版。这就是标准文档流

                 1.   浮动folat

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

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

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

    行级加float

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

    Display就没有任何意义了。

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

                                C,浮动元素会文字环绕

    扩展:是元素脱离标准流的方法

                1.浮动float

                 2.绝对定位 position:absolute

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

    浮动带来的坏处

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

    清除浮动

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

               2.给父级添加overflow:hidden;

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

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

    这个类写的样式属性有

    伪类选择器

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

     

            a:link{}(正常颜色)    a:hover{} (鼠标悬浮)     a:visited{}(访问过后的颜色)      a:active{}  (鼠标点击的那一刻)  p:after{} p:before{}

            四种状态的顺序不能变,必须是(正常颜色,访问过后的颜色,鼠标悬浮,鼠标点击的时候)

    元素 和伪类选择器的区别

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

  • 相关阅读:
    MAVEN学习-第一个Maven项目的构建
    MAVEN学习笔记-maven的获取和安装
    Hibernate中的锁机制
    java进阶之反射:反射基础之如何获取一个类以及如何获取这个类的所有属性和方法(2)
    java进阶之反射:反射基础之如何获取一个类以及如何获取这个类的所有属性和方法(1)
    java中的文件读取和文件写出:如何从一个文件中获取内容以及如何向一个文件中写入内容
    开篇:勇敢踏上这第一步
    有关嵌入式linux的注意点总结
    《nodejs开发指南》微博实例express4.x版
    JavaScript中的数据类型转换
  • 原文地址:https://www.cnblogs.com/qinmengyang/p/q1234567.html
Copyright © 2011-2022 走看看