css 基础 定位浮动的个人理解

html css总结2

继续写总结。
< datalist >与input标签配合使用。必须按照格式，不然没有效果。
< input list=”” >
< datalist id=”“>
< option value=”（点击显示的内容）”/>
< option value=”（点击显示的内容）”/>
< datalist/>

css部分

1.内联样式（行内样式）
直接写在标签内部，很少这样写的
2.内部样式
写在< head >内
3.外部样式
通过link标签从css中引入，基本都这么写
三种方式，就近原则，谁离标签近谁先起作用。

选择器

1. id选择器
2. class选择器

他们区别，class=“01 02”可以，但是id这样就不好使。且一个类的标签比如p最好只要用一次id，class无所谓。

1. 后代选择器
   .list p找到list后面所有p
2. 子元素选择器
   .list p找到list离它最近的p
3. 交集选择器
   < p class=”list” >
   p.list
4. 并集选择器
   加个“，”
5. 兄弟选择器
   h1+p 与h1相邻的p，不相邻不行。
6. 通用兄弟选择器
   h1~p h1后面所有p
7. *通配符选择器
   选到这个页面所有标签，很少用，性能差
8. 伪类选择器
   css3新增，现在我用到的就几个，p:last-child,p:fist-child顾名思义，p的第一个子元素和最后一个。li:child-of-type(4n),这几天用的最多的，定义li里面4的倍数的li
   ## 权重问题 ##
   先看id多少，再看class，一级一级写，别图省事一般没问题。

常用样式

字体：font-size；color；text-align；line-hight一般连着写这几个
使字体居中，行高与他盒子的高度相同正好居中。
文本：text-decoration下划线；text-transform设置大小写；text-indent：2em常用段落缩进俩字。vertical-align：center，文字与图片在一起时用他没错。
border：border：1px solid #000常用。
border-style：solid dashed
列表属性：list-style-type:默认disc圆点，decimal数字等等
背景：background导入图片时常用，先定好图片大小，再通过position定义它的位置，精灵图也用。这几天最常用的格式：background：url（../imges/**.png) no-repeat 0px -10px;width:;hight:,position:absolute; top:,left: ..
overflow:防止溢出，常用它来清除浮动，给背景margin：0 auto；
overflow：hidden，常用万能没错。
display：inline-block行内元素变成块级行内元素（行内元素不能定义宽高，这下可以）；block行内元素变块级元素，撑满一行。inline：定义成行内元素，还有个none他是他的位置没了，而visbility：hidden只是隐藏，不过用的最多还是none，配合hover。

盒子模型

div定义盒子，通过margin调整和他距离近的盒子的间距，这个盒子和他同级，若是套盒子，用padding较多吧，反正这几天写的四个页面感觉是这样。。padding时元素的大小会变化，padding相当于你长肉了，margin是相当于人与人之间距离，用padding时，配合box-sizing：border-box你就不长肉了，还能改变内部元素的位置。
margin：10px 10px 10px 10px，上左下右，简写时对面原则？反正就是哪个没写他就与他对面的值是一样的，不过感觉简写时总是出问题。
margin上下是会出现合并现象，第一个bottom=10px；第二个5px，那是10px最后，谁大听谁的。
border和padding最后都是你身上的肉，他是你的，margin就不算。
div定义网页布局，span修改内容

浮动流

就是给盒子左右浮动，那么他会在父盒子内左右浮动，设置浮动后，magin：0 auto失效~感觉向废话。浮动时不区分行内、块级元素，就是说span可以定义宽高了。浮动后脱离标准文档流，他后面没有设置浮动的元素，会寄到他的位置。li标签里常设置浮动，让li标签内容显示在一行。

position定位

想到这个浮动我就想到树叶飘在水面那种感觉。
absolute浮动后它的原有位置没了，是不是和float很像呢？它位置没了同样脱离标准文档流。后面元素占有它的位置，这段解释很好！！！｛父元素在默认情况下是position: static;就是静态定位，这时候如果子元素使用position: absolute;，那么子元素就会跳出父元素的范围，进入父元素的父元素范围，如果父元素的父元素依然是position: static;，那么就会继续跳出这个范围，一直到遇到一个position: absolute;或者position: relative;的祖先元素，才会在这个祖先元素的范围内进行定位布局。
如果子元素是position: absolute;，子元素的祖先元素都是position: static;，那么子元素就会不停往上跳出祖先元素的范围，直到body，然后在body内进行定位布局。重点内容｝，注意的是，如果absolute是
以body为布局，它只是已这个屏幕的首屏为布局。绝对定位会忽略父及元素padding值。
relative是他的原有位置不变，很自私。如果一个元素参照物，它会按照他原来的位置变化。不脱离标准文档流！
最后这周布置了三个小页面，加上自己找的一个才写了四个页面。除了睡觉基本都在码代码。一个月了，学的还行吧，再努力点~明天开始js，未来的路还很远，给自己加油吧~