CSS 常用属性

1.定位

CSS position 属性

1.默认定位：static 相对定位 绝对定位 固定定位
position：static | relative | absolute |fixed 

不定位 
static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。



相对于自己的原位置定位（占用偏离前原位置）
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
 

当前位置绝对定位  （不占位）
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。



浏览器绝对定位   （不占位）
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

2.然后用上下左右控制位置 
top: -100px; right: 0; bottom: 0; left: -50px; 
显示模式：块元素 行内元素 行内块元素
display: inline-block;

2.浮动

float
默认：没有浮动 

左浮动 右浮动
float：none | left | right 

clear去除浮动，给父元素设置宽高，就不需要去除浮动了
clear：none | left | right | both

3.显示隐藏

visibility
visibility：visible | hidden | collapse

4.溢出

overflow 
超出高度的的数据，隐藏，就不会占用页面了
           默认值 显示 隐藏 滑动 自动适配
overflow: visible | hidden | scroll | auto

5.尺寸

宽 width: 30px; 高 height: 30px;

6.外补白

外边距
margin: 0px;
margin-top: 0px;
margin-right: 0px; 
margin-bottom: 0px; 
margin-left: 0px;

7.内补白

内边距 
padding: 5px; 
padding-top: 5px; 
padding-right: 5px; 
padding-bottom: 5px; 
padding-left: 5px;

8.边框

   边框 1px 实线 颜色
border: 1px solid #008000; 
边框弯曲 border-radius: 3px; 
左边框 border-left: 4px solid transparent; 
右边框 border-right: 4px solid transparent; 
上边框 border-top: 6px solid #fff;

9. 背景

background: #008000;

10.字体

字体颜色
color:red 
字体合集 font 
设置或检索对象中的字体样式 
font-style 设置或检索对象中的文本是否为小型的大写字母 
font-variant 设置或检索对象中的文本字体的粗细 
font-weight 设置或检索对象中的字体尺寸 
font-size: 16px; 设置或检索用于对象中文本的字体名称序列 
font-family

11.文本

单行文字居中 
text-align: center; 
内缩进 text-indent:24px; 
行高 line-height:30px; 
超出部分隐藏 overflow: hidden; 
文字一行现实 white-space: nowrap; 
超出省略号 text-overflow: ellipsis; 
垂直对齐方式 把当前盒的垂直中心和父级盒的基线加上父级的半x-height对齐
vertical-align ：middle

12.文本装饰

清除下划线 text-decoration :none;

13.列表

清除列表前面的小点 list-style-type: none;

14.怪异盒子模型

正常盒子模型：设置padding,border会把盒子往外撑 
怪异盒子模型：设置padding,border不会撑大盒子,css3盒子模型 box-sizing:border-box;

15.flex布局

Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com) 
1.任何一个容器都可以指定为 Flex 布局 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效 display: flex; 
2.//属性决定主轴的方向（即项目的排列方向） 
//row（默认值）：主轴为水平方向，起点在左端。 
// row-reverse：主轴为水平方向，起点在右端。 
//column：主轴为垂直方向，起点在上沿。 
// column-reverse：主轴为垂直方向，起点在下沿。
flex-direction: column;
3.主轴对齐方式 justify-content: center; 4.侧轴对齐方式(单行) align-items: center; 
4.侧轴对齐方式(多行) align-content: center; 
5.放不下是否换行 flex-wrap: nowrap; 
6.合集 flex-flow 


子项的属性
1.排列顺序 order:1; 
2.单独自己在侧轴上的排列方式  align-self 
3.自己占多数位置，可以设置百分比来进行多余的换行 flex:1 （flex:20% flex-wrap: wrap;）

16.伪类选择器 （选择第几个元素）

/*第一个 */
:first-child{}

/*最后一个 */ 
:last-child{} 

//奇数 
:nth-child(odd){} 

//偶数 
:nth-child(even){} 

/* 选择了所有的标签 */ 
:nth-child(n) 

/* 选择列表中的偶数标签*/ 
:nth-child(2n) 

/*选择列表中的奇数标签 */ 
:nth-child(2n-1) 

/*选择前几个元素 /
/【负方向范围】选择第1个到第6个 */ 
:nth-child(-n+6){} 

/从第几个开始选择/ 
/*【正方向范围】选择从第6个开始的，直到最后 */ 
:nth-child(n+6){} 

/*两者结合使用，可以限制选择某一个范围 / 
/【限制范围】选择第6个到第9个，取两者的交集 */ 
:nth-child(n+6):nth-child(-n+9) 

/*选择列表中的倒数第n个标签 n为数字 */ 
:nth-last-child(n) 

/*选择倒数最后n个 */ 
:nth-last-child(-n+2){ }

17.伪元素选择器

1.前置元素
a::before{
 content: '';
width: 0px;
height: 0px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid #fff;
position: absolute;
top: 15px;
right: 10px;   
}

2.后置元素
.open_v::after {
content: '';
width: 0px;
height: 0px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid #fff;
position: absolute;
top: 15px;
right: 10px;
}

3.滑动
#button1:hover i {
color: green;
}

  
inputplaceholder
.serach_input::placeholder {
color: #757575;
padding-left: 10px; 
font-size: 12px;

}

18.特殊处理

1.给i标签设置背景图，直接设置文字居中，布局就居中了
i{
 display: inline-block;
 width: 30px;
 height: 30px;
 margin-top: 10px;
 background: url(a.jpeg) no-repeat;
 }
 
2.li标签内套用a标签，制作可点击的列表
 <li><a href="#">你好，我是哥哥</a></li>
 
 3.li标签内套用img标签，制作图片列表
 <li><img src="a.jpeg" ></li>
 
 4.图片点击效果
 <a href="#"><img src="a.jpeg" ></a>
 
 5.图片水平居中，也可以像文字那样
text-align: center;

行高等于高度（图片小点可以这么写）
vertical-align ：middle（图片大点就这么写）

6.css外边距合并问题(外边距塌陷)
给父元素添加 overflow:hidden ;

7.1 input去除默认的外边框
border: none;
7.2 input去除默认点击时的外边框
outline:none;

8.绝对定位和magin不能同时使用

9.单行文本显示省略号
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

10.多行文本显示省略号（了解）

11.边框重叠的处理办法
margin-left: -1px;
12.按11处理后，添加边框滑动效果的处理，添加相对定位
li:hover{
border: 1px solid  #0055ff;
position: relative;
}

移动端方案选择

1. 单独制作移动端页面（主流）
2. 响应式布局（bootstrap）

技术选型

1. 流式布局（百分比布局）
2. flex布局（推荐）
3. rem布局（推荐）
4. 响应式布局