CSS基础常用属性

css列表

ul li{
    list-style:    //列表项
    list-style-image:url('')  //图片作为列表项
    display:    设置元素如何显示以及是否显示
    display:block;  成为单个块级元素
    display:inline;  一行显示
    visibility:   设置元素是否可见（不可见仍然可以点击）
}

可以改变列表标识，或者图像作为列表标志
li标签默认有一个一像素的边框，如果需要给li加边框，先把li原来的边框设置为透明色 transparent，然后重新设置颜色

---

css字体

font-size:40px  //改变大小
font-family: fantasy  // 改变字体样式
font-style:   //字体风格（斜italic，标准normal）
font-weight:50px  //粗细
text-align:center // 居中，大盒子加居中，子元素全部拥有

---

文档流

什么是文档流：将窗体自上而下分成若干行,并在每行中按从左至右的依次排放元素,即为文档流，页面总是一行一行的排列。假如我们需要更自由的布局方式呢？这时候就需要脱离文档流了。脱离文档流本质上是以独立块元素的形式浮动在文档中。本身不占据文档空间。

---

css定位

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

改变元素在页面上的位置
给子元素添加绝对定位，最好给父元素添加相对定位

css定位机制：
普通流：元素按照其在HTML中的位置顺序决定排布的过程
浮动
绝对布局

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。行内元素需要设置为块级元素，才能设置宽高

CSS position属性：
static    静态定位
relative  相对定位
absolute  绝对定位
fixed     固定定位

• 静态定位
  默认属性，不受偏移量影响，元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中
• 相对定位
  元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留，不可层叠。----相对定位的真实位置还在老家，只不过影子出去了，可以到处飘。
• 绝对定位
  脱离文档流，受偏移量影响，绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:
• 固定定位
  跟随页面滚动，其包含块是视窗本身。固定定位要有宽度，和父级无关，以屏幕为主
• z-index：1
  设置层叠，除非设置了position属性，否则z-index不会起作用…

---

css文本

color: #81ff3d;      //设置颜色
text-align: center;  //对其方式
text-indent: 2em  //首行缩进  2em = 32px  也可以是负数
text-transform: capitalize;  //所有单词首字母全部大写
text-transform: lowercase;  //所有单词字母全部小写
text-transform: uppercase;  //所有单词字母全部大写
text-shadow: 5px 5px 1px #FF0000//文字阴影效果
第一个参数居左的位置，第二个参数居右的位置  第三个参数浮影清晰度  第四个参数颜色
p{
    width: 100px;
    text-wrap: normal;  /p标签宽度为100时自动换行
}



line-height:100px   设置行高，常用于p标签，（只对内联元素有用）
text-overflow：ellipsis; 超出部分点号显示
white-space: nowrap 强制一行显示
max-width:300px  最大宽度为
max-height:300px  最大高度为
min-width:300px  最小宽度为
min-height:300px 最小高度


图片和文本基线对齐，如果一起设置定位的话，需要为图片设置于文本对齐 vertical-align：middle；

user-select:none | text | all | element
设置用户是否能够选中文本，可用于除替换元素外的所有元素
select  文本是否处于选中状态

---

css浮动

浮动元素之间是不会出现z-index重叠的

浮动float属性值：
left     左浮动
right    右浮动
none     不浮动
inherit  从父级继承浮动属性

clear属性
  去掉浮动属性（包括继承来的属性）
  
  clear 属性的值：
  left、right:去掉元素向左、向右浮动
  both  去掉左右两侧的浮动
  inherit  从父级继承来clear的值

---

css背景

body{
    background-color: aquamarine;
    background-image: url("css背景.PNG");  图片作为背景
    background-repeat: repeat;    允许背景图片重复
    background-repeat: repeat-x;  允许x轴背景图片重复
    background-repeat: repeat-y;  允许y轴背景图片重复
    background-repeat: no-repeat;  不允许背景图片重复
    background-position: right top;   从右边顶部显示
    background-position: left top;   从左边顶部显示
    background-position: center top;   从中间顶部显示
    background-position: 100px 100px;   使用数值
    background-position: 50% 50%;   使用百分数
    background-attachment: fixed; 随着屏幕滚动
    background-size: 100px 100px   设置图片大小
    background-size: cover      图片以等比例缩放直到完全覆盖背景盒子，可能有部分图片显示不全
    background-size: contain    图片以等比例缩放直到宽度和高度完全适应内容区域，高或宽有一个铺满就不再拉伸了，可能有部分空白区域
}


  背景颜色线性渐变（添加浏览器的私有前缀）
  语法：（起始位置 默认为top）
  background: -webkit-linear-gradient(top,#232020,#3A3535)

• 透明度设置

     opacity:1设置透明度  0-1
     子元素会继承父元素的透明度，所以透明度可以用rgba来做
     background-color: rgba(0, 0, 0, 0.4);

---

css轮廓

• 用作突出元素的作用，可以去掉input的框

p{
	outline：none		 轮廓为空
    outline-style:       设置轮廓
    outline-color: red   设置轮廓颜色
    outline-width:px     设置轮廓粗细
}

---

css边框

• css边框可以帮我们极大的改善表格的外观

tr,td{
   border: 1px solid blue;  	设置外边框的像素样式和颜色(solid 实线，dotted点线)
   border-collapse: collapse;  		 设置折叠边框，一条线
   border-color:red            		 颜色
   border-top-style:1px solid blue   单边框
   border-color: transparent;        透明边框
   border-width:100px      			边框的宽度
}

---

css超链接

• 一般情况下，a标签如果包含有宽度的盒子，a标签都要转换为块级元素

<a href='www.baidu.com'>百度</a>  跳转地址
href = ‘javascript:；’       	 阻止链接默认跳转
text-decoration: none;       	去掉超链接的下划线
属性title：    					设置鼠标移上去a标签的描述


css链接的四种状态：(伪类选择器)
a:link     		普通的，未被访问的链接
a:visited   	用户已经访问的链接
a:hover    	 	鼠标指针位于链接的上方
a:active   		链接被点击但不松手的时刻
a:focus     	是某个标签获得焦点时的样式（比如某个输入框获得焦点）

---

overflow当内容溢出元素框

• overflow:

 visible  默认值。内容不会被修剪，会呈现在元素框之外。             
 hidden   内容会被修剪，并且其余内容是不可见的。                   
 scroll   内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 
 auto     如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
 inherit  规定应该从父元素继承 overflow 属性的值。                 

---

初始包含块概念

• 对于浮动元素，其包含块的定义为最近的块级祖先元素。

-对于定位元素，情况则没有这么简单

-根元素的包含块（也称为初始包含块）由用户建立，在HTMl中，根元素就是html标签元素，不过有些浏览器会使用body作为根元素，在大多数浏览器中，初始包含块是一个视窗大小的矩形