1css属性操作
2float属性
3position定位
1css属性操作
文本属性：
文本颜色：
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
- 十六进制值 - 如: ＃FF0000
- 一个RGB值 - 如: RGB(255,0,0)
- 颜色的名称 - 如: red
|
1
|
hi { color: rebeccapurple; } |
水平对齐方式：
text-align 属性规定元素中的文本的水平对齐方式。
- left 把文本排列到左边。默认值：由浏览器决定。
- right 把文本排列到右边。
- center 把文本排列到中间。
- justify 实现两端对齐文本效果。
- 其他属性：
-
font-size: 10px; line-height: 200px; 文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比 vertical-align:－4px 设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效 text-decoration:none text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线 font-family: 'Lucida Bright' font-weight: lighter/bold/border/ font-style: oblique text-indent: 150px; 首行缩进150px letter-spacing: 10px; 字母间距 word-spacing: 20px; 单词间距 text-transform: capitalize/uppercase/lowercase ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写
背景属性：
-
- background-color
- background-image
- background-repeat
- background-position
1234567background-color: cornflowerbluebackground-image: url('1.jpg');background-repeat: no-repeat;(repeat:平铺满)background-position: right top（20px20px）;
边框属性：
- border-width
- border-style (required)
- border-color
-
12345
border-style: solid;border-color: chartreuse;border-20px
也可以单独设置每个边框的属性：
|
1
2
3
4
|
border-top-style:dotted;border-right-style:solid;border-bottom-style:dotted;border-left-style:none; |
列表属性：
|
1
2
3
4
5
|
list-style-type 设置列表项标志的类型。list-style-image 将图象设置为列表项标志。list-style-position 设置列表中列表项标志的位置。list-style 简写属性。用于把所有用于列表的属性设置于一个声明中 |
ist-style-type属性指定列表项标记的类型：
|
1
|
ul { list-style-type: square; } |
使用图像来替换列表项的标记:
|
1
2
3
|
ul { list-style-image: url(''); } |
dispaly属性
noneblockinline- inline-block
none(隐藏某标签)
|
1
|
p{display:none;} |
注意与visibility:hidden的区别：
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
block(内联标签设置为块级标签)
|
1
|
span {display:block;} |
注意：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。
inline(块级标签设置为内联标签)
|
1
|
li {display:inline;} |
inline-block
display:inline-block可做列表布局，其中的类似于图片间的间隙小bug可以通过如下设置解决：
|
1
2
3
4
|
#outer{ border: 3px dashed; word-spacing: -5px; } |
2 float属性
先来了解一下block元素和inline元素在文档流中的排列方式。
block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性；
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效
- 常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
- 常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。此外，浮动的框之后的block元素元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置。 浮动的框之后的inline元素，会为这个框空出位置，然后按顺序排列。
float漂不是完全脱离文档流，所以会出现float陷阱：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .header{ /*height: 30px;*/ } .box1{ 200px; height: 80px; background-color: wheat; float: left; } .box2{ 200px; height: 30px; background-color: rebeccapurple; float: left; } .box3{ 100px; height: 50px; background-color: rosybrown; float: left; } .content{ 100%; height: 200px; background-color: royalblue; } /*.clearfix:after{*/#解决方法一 /*content: "";*/ /*display: block;*/ /*clear: both;*/ /*}*/ .header{#解决方法二 overflow: hidden; } </style> </head> <body> <div class="header clearfix"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> <div class="content"> Content </div> </body> </html>
清除浮动 clear :none|left |right|both
非完全脱离文档流：
左右结构div盒子重叠现象，一般是由于相邻两个DIV一个使用浮动一个没有使用浮动。一个使用浮动一个没有导致DIV不是在同个“平面”上，但内容不会造成覆盖现象，只有DIV形成覆盖现象。内容会出现推挤现象。
>>>>解决方法：要么都不使用浮动；要么都使用float浮动；要么对没有使用float浮动的DIV设置margin样式。
父级塌陷现象：解决方法就是上面的代码(方法一与方法二)
3position定位
position有四个值：static 、relative、absolute、fixed
（一）static 是默认的 无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。
(二)
relative: 相对定位。
相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。
absolute: 绝对定位。
定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。
另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } .c1,.c2,.c3{ 200px; height: 200px; } .c1{ background-color: gray; } .c2{ background-color: goldenrod; position: absolute; top: 200px; left: 200px; } .c3{ background-color: green; } .father{ position: relative; } </style> </head> <body> <div class="c1"></div> <div class="father"><div class="c2"></div></div> <div class="c3"></div> </body> </html>
总结：参照物用相对定位，子元素用绝对定位，并且保证相对定位参照物不会偏移即可。
（三）fixed
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .con{ 100%; height: 2000px; background-color: wheat; } .returnTop{ 100px; height: 40px; background-color: gray; color: white; text-align: center; line-height: 40px; position: fixed; right: 20px; bottom: 20px; } </style> </head> <body> <div class="con"></div> <div class="returnTop">返回顶部</div> </body> </html>
注：fixed完全脱离文档流，通过top、left来进行定位（2）absolute 完全脱离文档流，以已经定位了的父标签作为参照物如果父标签没有定位就网上找，如果没有就用body的（3）relative 不脱离文档流，以自己原来的位置作为参照物可以用top、left来进行定位