发表于: 2018-07-13 22:47:25

1 723


今日完成:


1.复习

2.了解弹性布局,浮动,定位,弹性布局以及各种居中

3.浮动那做了一个小demo


笔记:(划重点)

一、弹性布局:设为 Flex布局后,子元素的float、clear和vertical-align属性将失效。但是position属性,依然生效。

(一)、针对父元素,放在父元素容器中

1.flex-direction:col        竖着

                          row       横着

                          reverse  从后往前(元素顺序)

2.flex-wrap:nowrap        不换行,挤压

                    wrap             换行

                    wrap-reverse 换行,从下往上

3.flex-flow 是flex-direction和flex-wrap的缩写形式,默认值为:flex-flow: row wrap; 

4.justify-content: flex-start      默认    起点

        (主轴)     flex-end                  终点

                          center                     居中

                          space-between        两端对齐,项目之间的间隔都相等。(开头和最后的项目,与父容器边缘没有间隔)

                          space-around          两端对齐,项目之间的间隔都相等。所以,项目之间的间隔比项目与边框的间隔大一倍。(开头和最后的项目,与容器边缘有间隔)

5.align-items: flex-start:              起点

    (交叉轴)    flex-end:               终点

                        center:                  居中

                        baseline:                 项目的第一行文字的基线对齐。(文字的行高、字体大小会影响每行的基线)

                        stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

6.align-content:多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。(当项目换为多行时,可使用align-content取代align-items)

 flex-start、flex-end、center、space-between、space-around、stretch(默认值)

(二)、针对子元素:放在子元素css中


1.order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。


2. flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。


3.flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

<2、3>值为0时既不放大也不缩小


4.flex-basis定义项目占据的主轴空间。(如果主轴为水平,则设置这个属性,相当于设置项目的宽度。 原width将会失效。)优先级高


5.flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

此属性有两个快捷设置:auto=(1 1 auto)/none=(0 0 auto)


6.align-self:定义单个项目自身在交叉轴上的排列方式,可以覆盖掉容器上的align-items属性。

 属性值:与align-items相同,默认值为auto,表示继承父容器的align-items属性值。


二、选择器:

1.标签选择器:H1 {color:red}            1


2.类选择器(class):.     同一个标签可以使用多个类选择器。用空格隔开。      10


3.ID(值唯一):#             100


4.后代选择器:用空格隔开  不兼容ie6


5.交集选择器:用.隔开   交集选择器,我们一般都是以标签名开头,比如div.haha 比如p.special

  内联1000    !important权重最高,不建议使用


6.并集选择器(分组选择器):用逗号隔开


7.伪类选择器:唯一一个带交互效果 :hover 滑动   ie6中只支持给a类标签加链接,想加滑动,只能js

(数字表权重值)


三、a{}和a:link{}的区别:


a{}定义的样式针对所有的超链接(包括锚点)

a:link{}定义的样式针对所有写了href属性的超链接(不包括锚点)


<a>标签,其对应几种不同的状态:

link:超链接点击之前

visited:超链接点击之后

focus:是某个标签获得焦点的时候(比如某个输入框获得焦点)

hover:鼠标放到某个标签上的时候

active:点击某个标签没有松鼠标时


习惯:

(1)不要去试图用一个类名,把某个标签的所有样式写完。这个标签要多携带几个类,共同完成这个标签的样式。

(2)每一个类要尽可能小,有“公共”的概念,能够让更多的标签使用。

(3)尽可能css用class ,js用id,类上样式,id上行为


四、定位:

1.static:

2.relative:空间不释放,推荐

3.absolute:相对于最近的已定位祖先元素(一点一点往上找,不一定是父元素),若没有,则相对于浏览器一开始左上角 ,即最初包含块,空间释放 

4.fixed:相对于浏览器,即视窗   ie6不支持



五、浮动:

1.两列布局左侧宽度固定,右侧宽度自适应       左边的浮动,右边上去,给右边加个左边距,让出左边

2.两边固定,中间自适应        先左右浮动,最后中间浮动        、

如果左浮动,中间浮动,右浮动,结果是左中在上面,右在下面

3.块状元素 一但浮动就是靠内容撑开,宽高是内容的宽高

4.假如后面还有元素,后面元素会跟着上来,可以在后面元素加clear;

5.把竖块横过来的方法:浮动

6.左20%有外边距  浮动  右80%   浮动      右会在左的下面


补充:关于文本流和文档流:

文档流是相对于盒子模型讲的

文本流是相对于文子段落讲的

元素浮动之后,会让它跳出文档流,也就是说当它后面还有元素时,其他元素会无视它所占据了的区域,直接在它身下布局。但是文字却会认同浮动元素所占据的区域,围绕它布局,也就是没有拖出文本流。

但是绝对定位后,不仅元素盒子会拖出文档流,文字也会出文本流。那么后面元素的文本就不会在认同它的区域位置,会直接在它后面布局,不会在环绕。

当然你可以使用 index-z 来让底部的元素到上面来,类似于一个图层的概念


各种居中:

1.行元素(例文字):水平:text-align:center;

                               垂直:line-height=height;

2.块元素:水平:margin:0 auto;

               垂直:无直接语法,(1).如果元素定位了,只能通过:

                                                   position:absolute;

                                                   left:50%;

                                                   margin-left:负的宽度的一半

                                                   margin-top:负的高度的一半(已知宽高)

                                                   transform:translateX(-50%)(不知宽高)

                                           (2).加入 table 标签:在想居中的块状元素外面加入table,tr,td,把它放在一个td里面,然后对table设置margin:0 auto;

                                           (3).设置 display: inline 方法:与第一种类似,显示类型设为 行内元素,进行不定宽元素的属性设置:与第一种情况不定宽内                                                  联元素居中差不多,把块状元素设置为行内元素,然后设置这个行内元素的父元素text-align:center;

3.图片和文字垂直方向上对齐:在图片上使用vertical-align:middle;


快捷键:

如果在sublime中输入<st或者<style然后按tab键,可以自动生成的格式如下:(建议)

    <style type="text/css"></style>

字体颜色:(c)

字号大小:(fos)

背景颜色:(bgc)

加粗:(fwb)

不加粗:(fwn)

斜体:(fsi)

不斜体:(fsn)

下划线:(tdu)

没有下划线:(tdn)

p#haha,<p id="haha"></p>。

p.haha,<p class="haha"></p>。


实践:

属性名和冒号之间最好不要有空格(经验)

如果一个属性有多个值的话,那么多个值用 空格 隔开

任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

inherit 规定应该从父元素继承字体的粗细。

/* */注释



常用语句:

css引入   

引入外部样式表css文件的方式。这种方式又分为两种:

(推荐)1、采用<link>标签。例如:<link rel = "stylesheet" type = "text/css" href = "a.css"></link>

2、采用import,必须写在<style>标签中,并且必须是第一句。例如:@import url(a.css) ;

两种引入样式方式的区别:外部样式表中不能写标签,但是可以写import语句。



 * {

    magin:0;

    padding:0;

    }

    ul,ol{

        list-style:none;

    }

    a{

        text-decoration:none;

     }

    img{

    border:0;

    }

html {    

  font-size: 62.5%;  

}  

  

body {    

  font-size: 1.4rem; /* =14px */  

}  

  

h1 {    

  font-size: 2.4rem; /* =24px */  

}  



遇到的问题:

1.浮动一开始不太清楚,但是通过小demo,了解了各种释放,文本环绕之类浮动方式

2.试着上传了一下GitHub,但是没有成功

3.弹性布局属性虽然了解,但是还没用过,明天找demo做一做


明天计划:

1.弹性布局实践

2.上传GitHub

3.九宫格代码编写


收获:看例子挺顺利的,但是自己布局的时候很多问题,还是要通过实践和百度,好好思考,才能清楚一些坑,以及怎么避免还有知识漏洞



返回列表 返回列表
评论

    分享到