11.1笔记

1、window.onload() 方法用于在网页加载完毕后立刻执行的操作,即当 HTML 文档加载完毕后,立刻执行某个方法。 通常用于 <body> 元素,在页面完全载入后(包括图片、css文件等等)执行脚本代码。

   widow.onload()与jQuery ready()两种方式都是在 HTML 文档完毕后再执行 DOM 操作,但它们还是有一定的区别,以下为两者的区别的区别:

 2、<a> 标签的 target 属性:规定在何处打开链接文档。几种属性值:

  target:-blank:在一个新的窗口打开被链接的文档。

  target:-parent:在父框架集中打开被链接文档。

  target:-top:在整个窗口中打开被链接文档。

  target:framename:在指定的框架中打开被链接文档。

3、css样式对于input下多个输入框如何进行选择:

  例如:对于文本输入框的选择为:input[type=text]

4、display:flex;以为弹性布局,可以为盒装模型提供很大的灵活性。

   flex的六种属性:1、flex-direction 容器内元素的排列方向(默认横向排列),其中有三种排列方式:

           a、flex-direction:row; 沿水平主轴让元素从左向右排列

                                 

                      a           b          c

           b、flex-direction:column; 让元素沿垂直主轴从上到下垂直排列

              c、flex-direction:row-reverse;沿水平主轴让元素从右向左排列         

        2、flex-wrap容器内元素的换行

           a、flex-wrap:nowrap:(默认)元素不换行,比如一个div的宽度为100%。设置此属性,2个div宽度自动变为50%。

           b、flex-wrap:wrap:元素换行,比如一个div的宽度为100%。设置此属性,第二个div就在第二行了。

        3、justify-content元素在主轴(页面)上的排列

           a、justify-content : center;元素在主轴(页面)上居中排列

                      

                        a                     b                          c

              b、justify-content : flex-start;元素在主轴(页面)上由左或者上开始排列

           c、justify-content : flex-end;元素在主轴(页面)上由右或者下开始排列

           d、justify-content : space-between;元素在主轴(页面)上左右两端或者上下两端开始排列

                     

                         d                            e

           e、justify-content : space-around;每个元素两侧的间隔相等。所以,元素之间的间隔比元素与边框的间隔大一倍。

          4、felx-flow:flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

             5、align-items 元素在主轴(页面)当前行的横轴(纵轴)方向上的对齐方式

            a、align-items : flex-start; 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界(靠上对齐)。

                   

                        a                        b

                                                  

                           c

              b、align-items : flex-end; 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。(靠下对齐)

              c、align-items : center; 弹性盒子元素在该行的侧轴(纵轴)上居中放置。(居中对齐)。
         6、align-content 在弹性容器内的元素没有占用交叉轴上所有可用的空间时对齐容器内的各项(垂直)。
                                                             
             a           b            c             d         e        f

              a、align-content: flex-start; 元素位于容器的开头。各行向弹性盒容器的起始位置堆叠

              b、align-content: flex-end; 元素位于容器的结尾。各行向弹性盒容器的结尾位置堆叠。

              c、align-content: stretch; 元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。

              d、align-content: center; 默认值。元素被拉伸以适应容器。各行将会伸展以占用剩余的空间。如果剩余的空间是负数,该值等效于'flex-start'

              e、:align-content: space-between;元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。

              f、align-content: space-around;元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行,该值等效于'center'。

5、document.querySelector(".title");//获取文档中class为title的元素。

   querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。

 

posted @ 2021-11-01 20:02  南瓜~  阅读(28)  评论(0)    收藏  举报