zoukankan      html  css  js  c++  java
  • 对前面知识的重新理解

    浮动:

    1.当为一个元素设置浮动以后,元素会立即脱离文档流,他下边的元素会立即向上移动。

    2.元素浮动以后,会尽量向页面的左上或右上浮动,直到遇上父元素的边框或其他的浮动元素

    3.如果浮动元素上面是一个没有浮动的块元素,则浮动元素不会超过块元素。

    4.浮动元素不会超过他上边的兄弟元素,最多一边齐。

    溢出处理:

    overflow可以处理子元素溢出父元素。

    1.overflow:visible:是默认值,不会做处理,元素会在父元素外显示。

    2.overflow:hidden:溢出的内容会被裁剪,不会显示。

    3.overflow:scroll:添加垂直竖直滚动条,不论内容是否溢出。

    4.over:auto:会根据需求添加。

    5:overflow:hidden与display:none的区别:hidden消失后仍会占据位置,none则不会。

    元素在文档流中的特点:

    块元素;

    1.块元素在文档流中会独占一行,块元素会自上向下排列。

    2.块元素在文档流中的默认宽度是父元素的100%。

    3.块元素在文档流中的高度默认被高度撑开。

    内联元素:

    1.内联元素在文档流中只占自身的大小,会默认从左向右排列。

    2.如果一行中不足以容纳所有的元素,则会换到下一行,继续由左向右。

    3.在文档流中,内联元素的宽度和高度都会被内容撑开。

    display的作用:

    display可以修改元素的类型。

    1.diplay:inlinne:可以将元素作为一个内联元素显示。

    2.display:block:可以将一个元素转换为块元素显示。

    3.diplay:Inline-block:将一个元素转换为行内块元素,既有行内元素的特点又有块元素的特点。既可以设置宽高,又不会独占一行。

    span元素当被浮动以后可以设置宽高。

    块元素与内联元素:

    块元素里可以包含块元素,但p标签里不可以包含任何元素。div主要用来网页的布局.

    内联元素span主要用来选中文本内容将其进行修改。a标签属于内联元素,可以包含任何元素,除了他自己。

    选择器:

    选择器分组(并集选择器):语法:选择器1逗号选择器2逗号选择器3逗号   表示同时选中多个满足同样css样式的选择器。

    复合选择器(交集选择器):语法:选择器紧紧贴在一起,不用加任何东西。表示可以满足多个选择器的元素。

    父元素指直接包含子元素的元素。子元素直接被父元素包含的元素。向这种情况则表示span的父元素是p,祖父是div.

    <div>

    <p><span></span></p>

    </div>

    祖先元素指直接或间接包含后代元素的元素。后代元素指直接或间接被父元素包含的元素。比如div也可以是p的祖先元素。

    父元素可以是祖先元素。子元素也可以是后代元素。

    兄弟元素指拥有相同父元素的元素。

    后代元素选择器:父元素空格子元素{}    子元素选择器:父元素>子元素{}

    伪类元素指元素的状态。如link,visited,hover,active.    伪元素指原则元素中的一些特殊的位置。如first-letter表示第一个字.p:first-letter{}  如first-line表示第一行.p:first-line{}

    属性选择器。根据元素的属性来选择元素   如p:[tittle](如tittle属性可以给任何标签添加)。选取含有指定属性值的元素如p:[tittle="hello"]。  p:[tittle^="ab]表示以ab 开头。

    兄弟元素选择器:

    语法:前一个+后一个。可以选中一个元素紧挨着的指定的兄弟元素。

    语法:前一个~后一个。选中一个元素后紧挨着的所有的兄弟元素。

    否定伪类:

    语法:p:not(选择器){} 。可以从已选择的元素中剔除特定的某些元素。

    css子元素会继承祖先元素的样式,但背景相关的样式除外。

    优先级的规则:

    内联样式:优先级1000. id选择器:优先级100. 类和伪类:优先级10. 元素选择器:优先级1. 通配:优先级0. 继承的样式:没有优先级。

    如果选择器的优先级一样,则使用靠后的样式。

    并集选择器中的优先级是单独计算。

    涉及到a的伪类共有4个:link,visited,hover,active.这四个选择器的优先级是一样的。

    定位元素:

    定为元素的层级如果一样,则下边的元素会盖住上边的。可以用z-index来设置元素的层级,层级越高,越优先显示。如z-index:1。

    父元素的层级在高也盖不住子元素。

    定位:

    定位的默认值static.

    相对定位相当于元素在原来的文档流之中的位置,不会脱离文档流,但元素开启相对定位之后会提高一个层级,也就是说,会盖住原来的兄弟元素。并且元素开启相对定位不会改变元素的性质,块级还是块级,内联还是内联。

    绝对定位开启会使元素脱离文档流,绝对定位是相当于离他最近的开启了定位的祖先元素进行定位的。如果所有的祖先元素都没有开启定位,则相对于浏览器窗口进行定位。绝对定位也会使元素提升一个层级。

    并且绝对定位会改变元素的性质。内联元素变为块元素。块元素的宽高会被内容撑开。

    固定定位也是一种绝对定位,他的大部分特点与绝对定位相同。

    元素的层级问题:

    如果元素都开启了定位,且层级一样,则下面的会盖住下面的。所以可以通过z-index可以设置层级,也就是说可以设置z轴。可以把z-indez设置成正整数,同时层级越高,越优先显示。并且没有开启定位的元素,则不可以使用z-index.还有一点就是父元素的层级在高,也不会盖住子元素。

    透明:

    设置元素的透明背景可以通过opacity设置一个0-1的数来设置,离0越近,则越透明。还有一种方式是filter:alpha(opacity=0-100);

  • 相关阅读:
    学习笔记5_Day09_网站访问量统计小练习
    学习笔记4_ServletContext(重要整个Web应用的动态资源之间共享数据)
    学习笔记03_Day09-----Servle与反射()
    学习笔记2_Day09_servlet的细节
    学习笔记1_Day09_Servlet
    OC对数组排序的方法
    sqlite事务处理
    封装数据库
    JsonModel的使用
    RBAC表
  • 原文地址:https://www.cnblogs.com/maxuefeng/p/13599752.html
Copyright © 2011-2022 走看看