前端部分知识点---CSS

思想：这是一种分层设计的思想，css把和颜色，大小位置等信息剥离到<style>中，而html只用关心提供什么样的内容就行了。

强  化  基  础

一、语法：selector{property：value}----即选择器{属性：值}

二、选择器：选择器主要分3种：元素选择器，id选择器，类选择器

<style>
p{
  color:red;
}
#p1{
  color:blue;
}
.pre{
  color:yellow;
}
.after{
  color:greean;
}
</style>
 
<p>没有id的p</p>
<p id="p1">id=p1的p</p>

<p class="pre">前3个</p>
<p class="pre">前3个</p>
<p class="pre">前3个</p>
 
<p class="after">后3个</p>
<p class="after">后3个</p>
<p class="after">后3个</p>

还有一种更准确的选择但是相对繁琐:同时根据元素名和class来选择

<style>
p.bb{
  color:blue
}
</style>
<p  class="bb">完美世界</p>

三、注释：以/* 开始，以*/结束，被注释掉的文字会自动隐藏

四、尺寸：设置元素的尺寸：width;height

五、背景

背景颜色	属性名background-color 颜色的值可以采用3种方式 1. 预定义的颜色名字 比如red,gray,white,black,pink，参考颜色速查手册 2. rgb格式 分别代表红绿蓝的比例 rgb(250,0,255) 即表示红色是满的，没有绿色，蓝色是满的，即红色和蓝色混合在一起：紫色 3. 16进制的表示 #00ff00 等同于 rgb(0,255,0)		<style> p.gray {background-color: gray;} h1 {background-color: transparent} h2 {background-color: rgb(250,0,255)} h3 {background-color: #00ff00} </style>   <p class="gray">灰色</p> <h1>透明背景，默认即透明背景</h1> <h2>紫色</h2> <h3>绿色背景</h3>
图片做背景	background-image:url 注意这里使用的是url 这是id选择器所以用--#		<style> div#test {   background-image:url(/study/background.jpg);     width:200px;     height:100px;   } </style>   <div id="test">   这是一个有背景图的DIV </div>
本地测试	网页什么也不显示，后续再研究		<style> div#test{    background-image:url(background.jpg);    width:200px;    height:100px;} </style>
背景重复	属性：background-repeat 值可以选 repeat; 水平垂直方向都重复 repeat-x; 只有水平方向重复 repeat-y; 只有垂直方向重复 no-repeat; 无重复		<style> div#norepeat {    background-image:url(photo/background_small.jpg);     width:200px;     height:100px;     background-repeat: no-repeat;   } div#repeat-x{    background-image:url(photo/background_small.jpg);     width:200px;     height:100px;     background-repeat: repeat-x;   } </style>   <div id="norepeat">   背景不重复 </div>  <div id="repeat-x">   背景水平重复 </div>
背景平铺	属性：background-size 值：contain		<style> div#contain{    background-image:url(/study/background_small.jpg);     width:200px;     height:100px;     background-size: contain; } </style>    <div id="contain">    背景平铺，通过拉伸实现，会有失真 </div>

六、文本

关键字	简介	示例代码
color	文字颜色	也是三种办法
text-align	对齐 属性:text-align； 值：left,right,center	div是块级元素，其默认宽度是100%，所以文本有对齐的空间前提。但是，span却看不出右对齐效果，为什么呢？ 因为span是内联元素其默认宽度就是其文本内容的宽度 简单说就是文本已经粑在其边框上了，对齐是看不出效果来的
text-decoration	属性文本修饰	值：overline上划线   linethrough删除效果   underline下划线   blink闪烁效果    none去掉所有效果
line-height	行间距	属性：line-height         值：数字或者百分比
letter-spacing	字符间距	作用于每一个字符，值：数字
word-spacing	单词间距	作用于单词之间，区别上面的。值：数字
text-indent	首行缩进	值：数字
text-transform	大小写	值： uppercase 全部大写 capitalize 首字母大写 lowercase 全部小写
white-space	空白格	值： normal 默认。多个空白格或者换行符会被合并成一个空白格 pre 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器也不会换行。 pre-wrap 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器，会换行。 nowrap 一直不换行，直到使用br

七、字体

关键字	简介	示例代码
font-size	尺寸	值：数字或者百分比
font-style	风格	值：normal 标准字体       italic 斜体
font-weight	粗细	值：normal 标准粗细        bold 粗一点
font-family	字库	值：比如宋体黑体之类
font	声明在一起	p{font:italic bold 30px "Times New Roman";}

 八、鼠标样式（cursor）：鼠标移动到这段文字上，就会看到鼠标样式变化

属性：cursor

值：crosshair，default。。。。。。。

九、表格

属性：table-layout； 值：automatic单元格的大小由td的内容宽度决定        fixed：单元格的大小由td上设置的宽度决定	table-layout：automatic table-layout:fixed
属性：border-collapse 值：separate:边框分隔        collapse:边框合并	border-collapse:separate border-collapse:collapse

十、边框

属性	简介	示例代码
border-style	边框风          格	值：solid: 实线    dotted:点状    dashed:虚线    double:双线
border-color	边框颜色	依然是三种办法
border-width	边框宽度	数字
border	都放在一起	p{ border:1px dotted LightSkyBlue;}
border-top border-bottom border-left border-right	只有一个方向有边框	<style>  div{    width:150px;    height:150px;    border-top-style:solid;    border-top-color:red;    border-top-width: 50px;    background-color:lightgray;     } </style>
border-top border-left	有交界的边都有边框	就是多设置几个上楼的代码
div span	块级元素和内联元素的边框区别	块级元素div默认是占用100%的宽度 常见的块级元素有div h1 p 等 而内联元素span的宽度由其内容的宽度决定 常见的内联元素有 a b strong i  input

十一、内边距

属性和值	内边距和写一个和四个的区别	补充
属性:padding     padding-left... 值：数字 指的是，元素中的内容，与边框之间的距离	值：如果只写一个，即四个方向的值 值：如果写四个，即四个方向的值 上 右 下 左,依顺时针的方向依次赋值	当内边距的值少于四个的时候 如果缺少左内边距的值，则使用右内边距的值。 如果缺少下内边距的值，则使用上内边距的值。 如果缺少右内边距的值，则使用上内边距的值。

十二、外边距---指的是元素边框和元素边框之间的距离

属性：margin      margin-left... 值：数字

像span这样的内联元素，默认情况下，只有左右外边距，没有上下外边距。 为了观察上下外边距的效果，可以采用块级元素，比如div.

---

十三、边框模型---真正决定一个元素的表现形式是由其边框模型决定的

   自我理解就是做界面的时候写画一张图纸这个到理

十四、四种超链状态

伪类，所谓的伪类即被选中的元素处于某种状态的时候

link  初始状态，从未被访问过	<style> a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF} </style>    <a href="http://www.12306.com">超链的不同状态</a>
visited   已访问过
hover    鼠标悬停在超链的上方
active   鼠标左键点击下来但是尚未弹起的时候

十五、隐藏元素

属性：display （展现）   值：none	隐藏一个元素，这个元素将不再占有原空间 “坑” 让出来了
属性：visibility（可见性）  值：hidden（隐藏）	隐藏一个元素，这个元素继续占有原空间，只是“看不见”

十六、优先级

以最后设置的为主 优先使用style标签上的 ！important优先级最高

<style> .p1{   color:green !important;} </style>   <p class="p1" style="color:red">p1 颜色是绿色，优先使用!important样式</p>

布   局

一、绝对定位

设置了绝对定位的元素，相当于该元素被从原文档中删除了，所以原先元素不会留下空挡

 绝对定位是基于最近的一个定位了的父容器

属性：position 值：absolute

<style> img#i1{   position: absolute;   left: 60px;   top: 20px;   z-index:1; }       img#i2{   position: absolute;   left: 60px;   top: 120px;   z-index:-1; }

通过绝对定位可以把一个元素放在另一个元素上，这样位置就重复了。 重复了，就存在一个谁掩盖谁的问题。 这个时候就可以使用 z-index属性， 当z-index的值越大，就表示放上面，z-index:越小就表示放下面

二、相对定位

属性：position 值：relative

与绝对定位不同的是，相对定位不会把该元素从原文档删除掉，而是在原文档的位置的基础上，移动一定的距离

三、浮动---浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框。

向右浮动 float：right	向右浮动后，原来的“坑”就让出来了并且是在原来的高度的基础上 向右浮动，和相对队伍有些类似
向左浮动 float：right	首先，向左浮动后，会把“坑”让出来，这个时候下面的元素 就会过来试图占这个坑，但是，发现 并没有走，结果，就只好排在它后面了
文字围绕图片	运用上楼的作用，向左浮动照片即可，文字自然就是包围照片
文字不想围绕图片 属性:clear 值: left right both none	不允许出现浮动元素 如果p左边的元素也就是图片出现了向左浮动，那我们设置文字的属性clear:left 即达到不允许浮动元素出现在左边的效果
水平排列div 默认的div排列会换行	如果使用float就可以达到水平排列的效果，通常会用在菜单，导航栏等地方 如果超出了父容器，还会有自动换行的效果

四、 显示方式

关键字	简介
隐藏   display:none	前面说过
块级   display:block	块级元素会自动在前面和后面加上换行，并且在其上的width和height也能够生效，div默认是块级元素 span默认是内联元素(不会有换行,width和height也不会生效)，所以多用span
内联   display:inline	内联元素前后没有换行，并且在其上的width和height也无效。 其大小由其中的内容决定
内联-块级 display:inline-block	有时候，需要元素处于同一行，同时还能指定大小，这个时候，就需要用到内联-块级 inline-block
其他（不常见）	list-item 显示为列表                               table 显示为表格 inline-table 显示为前后无换行的表格    table-cell 显示为单元格

 

五、水平居中

内容居中	有两种方式 通过设置属性align="center" 居中的内容 通过样式style="text-align:center" 居中的内容
元素居中	比如想让span居中可以把span放置在div中，然后让div 设置style="text-align：center"实现居中

六、左侧固定-----还是利用浮动的作用

<style>
 .left{
   width:200px;
   float:left;
   background-color:pink
  }
  .right{
    overflow:hidden;
    background-color:lightskyblue;
  }
</style>
 
<div class="left">左边固定宽度</div>
 
<div class="right">右边自动填满</div>

七、垂直居中（三种办法）

line-hight方式	p{line-hight:100px;}
内边距方式	借助设置相同的上下内边距，实现垂直居中效果，可以用在多行文本上 p{padding:30  0;}
table方式	首先通过display: table-cell;把div用单元格的形式显示，然后借用单元格的垂直居中vertical-align: middle; 来达到效果。 这样对图片也可以居中，上一步 line-height就不能对图片居中。

八、左右固定——还是利用浮动的作用，左右div分别设置左右浮动，中间块就会自适应

九、贴在下方——原理是一个块镶嵌在另一个块里面，利用定位的作用来设置下面块的外边距

<style>
#div1
        {
            position: relative;
            height: 300px;
            width: 90%;
            background-color: skyblue;
        }
        #div2
        {
            position: absolute;
            bottom: 0;
            height: 30px;
            width: 100%;
            background-color: lightgreen;
        }
    </style>
 
<div id="div1">
    <div id="div2"> 无论蓝色div高度如何变化，绿色div都会贴在下面
    </div>
</div>

十、块之间的空格

为什么会出现空格	用span举例，敲多个span一般都会换行，因为为了不混乱，但是网页上就会出现空格
解决办法	还是利用float来解决，设置左浮动就能解决span{float:left;}