css样式

引入css方式

第一种
<标签名 style="属性1:属性值1;属性2:属性值2;...">内容</标签名>

第二种
<head>
<style type="text/CSS">
    选择器（选择的标签） {
      属性1: 属性值1;
      属性2: 属性值2;
      属性3: 属性值3;
    }
</style>
</head>

第三种
<head>
  <link rel="stylesheet" type="text/css" href="css文件路径">
</head>

选择器

标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p { color：red;}
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.nav { color: red; }
id选择器	一次只能选择器1个标签	只能使用一次	不推荐使用	#nav {color: red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	不推荐使用	* {color: red;}

font：字体

font-size: 12px;  //字体大小

font-family:"Microsoft Yahei"; //字体类型

font-weight:normal(默认值)/bold(加粗)/100~900 //字体粗细

font-style:normal(默认)/italic(斜体) //字体风格

font:font-style font-weight font-size/line-height font-family;

color：文本颜色

预定义的颜色值	red，green，blue，还有我们的御用色 pink
十六进制	#FF0000，#FF6600，#29D794
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

text-align：文本水平对齐方式

left	左对齐(默认值)
right	右对齐
center	居中对齐

line-height:行间距

设置行间距等于高度，可以让盒子垂直居中

text-indent：首行缩进

text-decoration：文本的装饰

none	默认。定义标准的文本。取消下划线（最常用）
underline	定义文本下的一条线。下划线也是我们链接自带的（常用）
overline	定义文本上的一条线。（不用）
line-through	定义穿过文本下的一条线。（不常用）

后代选择器

.class h3{color:red;font-size:16px;}

交集选择器

p.one 选择的是：类名为.one 的段落标签

并集选择器

并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明

链接伪类选择器

用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素

后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	符号是空格 .nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是> .nav>p
交集选择器	选择两个标签交集的部分	既是又是	较少	没有符号 p.one
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是逗号 .nav, .header
链接伪类选择器	给链接更改状态		较多	重点记住 a{} 和 a:hover 实际开发的写法

标签显示模式(display)

块级元素(block)

行内元素（inline)

行内块元素(inline-block)

块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或则其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

背景(background)

background-color:颜色值; //默认的值是transparent 透明的

background-image:url;

background-repeat:repeat/no-repeat/repeat-x/repeat-y

background-position:length(水平) length(垂直)
background-position:left/center/right top/center/bottom

background-attachment:scroll(背景图像是随对象内容滚动)/fixed(背景图像固定)

background:transparent url(image.jpg) no-repeat sroll center top;

// css3
background:rgba(0,0,0,0.3);  //最后一个参数是透明度

总结:
| 属性 | 作用 | 值 |
| --------------------- | :--------------- | :----------------------------------------------------------- |
| background-color | 背景颜色 | 预定义的颜色值/十六进制/RGB代码 |
| background-image | 背景图片 | url(图片路径) |
| background-repeat | 是否平铺 | repeat/no-repeat/repeat-x/repeat-y |
| background-position | 背景位置 | length/position 分别是x 和 y坐标，切记如果有精确数值单位，则必须按照先X 后Y 的写法 |
| background-attachment | 背景固定还是滚动 | scroll/fixed |
| 背景简写 | 更简单 | 背景颜色背景图片地址背景平铺背景滚动背景位置; 他们没有顺序 |
| 背景透明 | 让盒子半透明 | background: rgba(0,0,0,0.3); 后面必须是 4个值 |

css三大特性

层叠行
继承性
优先性(重点)
权重
继承或者 * 0,0,0,0
每个元素（标签选择器） 0,0,0,1
每个类，伪类 0,0,1,0
每个ID 0,1,0,0
每个行内样式 style="" 1,0,0,0
每个!important 重要的 ∞ 无穷大

值从左到右，左边的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
继承的权重是0

CSS注释

p{
    /* 注释 */
}

盒子模型

border边框

border: border-width(边框粗细) border-style(边框样式) border-color(边框颜色)
例:
border:1px solid #fff;

border-top
border-right
border-bottom
border-left

padding内边距:边框与内容之间的距离

padding:Top Right Bottom Left;

padding-left
padding-right
padding-top
padding-bottom

如果没有给一个盒子指定宽度，此时，如果给这个盒子指定padding,则不会撑开盒子。

margin(外边距)

margin:top right bottom left;

margin-top
margin-right
margin-bottom
margin-left

例：
margin:50px auto;

文字居中和盒子居中区别

盒子内的文字水平居中是text-align:center,而且还可以让行内元素和行内块居中对齐

插入图片和背景图片的区别

插入图片，我们用的最多比如产品展示类移动位置只能靠盒模型 padding margin
背景图片我们一般用于小图标背景或者超大背景图片，背景图片只能通过background-position

margin塌陷

解决方法：

可以为父元素定义上边框
可以为父元素定义上内边距
可以为父元素添加overflow:hidden;

盒子模型布局稳定性

width>padding>margin

==优先使用width==

css布局

三种布局机制

1. 普通流（标准流）

块级元素会独占一行，从上向下顺序排列；
- 常用元素：div,hr,p,h1~h6,ul,ol,dl,form,table
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；
- 常用元素：span,a,i,em等
  2. 浮动
让盒子从普通流种浮起来，主要左右让多个块级盒子一行显示。
3. 定位
将盒子定在浏览器的某一个位置--CSS离不开定位。

浮动

float:none(默认值)/left(左浮动)/right(右浮动)

让盒子浮动起来，不占位置
任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。与行内块(inline-block)相似。

清除浮动

父级没高度
子盒子浮动了
影响下面布局了，我们就应该清除浮动了。

额外标签法（隔墙法）	通俗易懂，书写方便	添加许多无意义的标签，结构化较差。
父级overflow:hidden;	书写简单	溢出隐藏
父级after伪元素	结构语义化正确	由于IE6-7不支持:after，兼容性问题
父级双伪元素	结构语义化正确	由于IE6-7不支持:after，兼容性问题

css属性书写顺序

布局定位属性：display/position/float/clear/visibility/overflow
自身属性：width/height/margin/padding/border/background
文本属性：color/font/text-decoration/text-align/vertival-align/white-space/break-word
其他属性（CSS3）：content/cursor/border-radius/box-shadow/text-shadow/background:lingear-gradient...

.jdc {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

定位

css布局的三种机制

普通流（标准流）
浮动
- 让盒子从普通流中浮起来--让多个盒子（div）水平排列成一行
定位
- 让盒子定在某一个位置，自由的漂浮在其他盒子的上面

边偏移

在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）

`top`	`top: 80px`	顶端偏移量，定义元素相对于其父元素上边线的距离。
`bottom`	`bottom: 80px`	底部偏移量，定义元素相对于其父元素下边线的距离。
`left`	`left: 80px`	左侧偏移量，定义元素相对于其父元素左边线的距离。
`right`	`right: 80px`	右侧偏移量，定义元素相对于其父元素右边线的距离

定位模式

在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：

选择器 { position: 属性值; }

定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。
| 值 | 语义 |
| ---------- | :----------: |
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |

相对定位

相对于自己原来在标准流中位置来移动的
原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它

绝对定位

完全脱标——完全不占位置
父元素没有定位，则以浏览器为准定位（Document文档）
父元素要有定位
绝对定位是以带有定位的父级元素来移动位置，如果父级都没有定位，则以浏览器文档为准移动位置
不保留原来的位置，完全是脱标的

固定定位

完全脱标——完全不占位置
只认浏览器的可视窗口——浏览器可视窗口+边偏移属性来设置元素的位置
- 跟父元素没有任何关系；单独使用
- 不随滚动条滚动

定位的拓展（重点）

绝对定位的盒子居中

left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；
margin-left:-100px;：让盒子向左移动自身宽度的一半。

堆叠顺序（z-index）

属性值：正整数，负整数或0，默认值是0，数值越大，盒子越靠上；
如果属性值相同，则按照书写顺序，后来居上；
数字后面不能加单位。

注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

定位改变display属性

可以用inline-block 转换为行内块
可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
绝对定位和固定定位也和浮动类似，默认转换的特性转换为行内块。

所以说，一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。

同时注意：

浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。（我们以前是用padding border overflow解决的）

也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。

静态static	不脱标，正常模式	正常模式	不能	几乎不用
相对定位relative	不脱标，占有位置	相对自身位置移动	不能	基本单独使用
绝对定位absolute	完全脱标，不占有位置	相对于定位父级移动位置	能	要和定位父级元素搭配使用
固定定位fixed	完全脱标，不占有位置	相对于浏览器移动位置	能	单独使用，不需要父级

1). 标准流

可以让盒子上下排列或者左右排列的

2). 浮动

可以让多个块级元素一行显示或者左右对齐盒子浮动的盒子就是按照顺序左右排列

3). 定位

定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。但是每个盒子需要测量数值。

CSS高级技巧

display显示

display:none; 隐藏对象
display:block; 除了转换为块级元素之快，同时还有显示元素的意思

隐藏之后，不在保留位置。
visibility 可见性(了解)

  visibility：visible ; 　对象可视

  visibility：hidden; 　  对象隐藏

隐藏之后，继续保留原有位置。

overflow 溢出

visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

实际开发场景：

清除浮动
隐藏超出内容，隐藏掉, 不允许内容超过父盒子。

鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

default	小白默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

<ul>
  <li style="cursor:default">我是小白</li>
  <li style="cursor:pointer">我是小手</li>
  <li style="cursor:move">我是移动</li>
  <li style="cursor:text">我是文本</li>
  <li style="cursor:not-allowed">我是文本</li>
</ul>

轮廓线 outline

 outline : outline-color ||outline-style || outline-width

但是我们都不关心可以设置多少，我们平时都是去掉的。 li

最直接的写法是： outline: 0; 或者 outline: none;

 <input  type="text"  style="outline: 0;"/>

防止拖拽文本域resize

实际开发中，我们文本域右下角是不可以拖拽：

<textarea  style="resize: none;"></textarea>

vertical-align 垂直对齐

vertical-align 垂直对齐，它只针对于行内元素或者行内块元素

vertical-align : baseline |top |middle |bottom

注意：
vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，
特别是行内块元素， ==通常用来控制图片/表单与文字的对齐==。

去除图片底侧空白缝隙

原因：
图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。
就是图片底侧会有一个空白缝隙。
解决的方法就是：
- 给img vertical-align:middle | top| bottom等等。让图片不要和基线对齐。
- 给img 添加 display：block; 转换为块级元素就不会存在问题了。

溢出的文字省略号显示

  /*1. 先强制一行内显示文本*/
      white-space: nowrap;
  /*2. 超出的部分隐藏*/
      overflow: hidden;
  /*3. 文字用省略号替代超出的部分*/
      text-overflow : elli psis;

css精灵技术

background-image、
background-repeat
background-position属性进行背景定位，
其中最关键的是使用background-position 属性精确地定位。

精确测量，每个小背景图片的大小和位置。
给盒子指定小背景图片时，背景定位基本都是负值。

滑动门

为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。最常见于各种导航栏的滑动门。

核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。

一般的经典布局都是这样的：

<li>
  <a href="#">
    <span>导航栏内容</span>
  </a>
</li>

总结：

a 设置背景左侧，padding撑开合适宽度。
span 设置背景右侧， padding撑开合适宽度剩下由文字继续撑开宽度。
之所以a包含span就是因为整个导航都是可以点击的。

margin负值之美

负边距+定位：水平垂直居中

咱们前面讲过，一个绝对定位的盒子，利用父级盒子的 50%，然后往左(上) 走自己宽度的一半，可以实现盒子水平垂直居中。

压住盒子相邻边框

margin-left:-1px;

css三角形之美

我们用css 边框可以模拟三角效果
宽度高度为0
我们4个边框都要写，只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
为了照顾兼容性低版本的浏览器，加上 font-size: 0; line-height: 0;

 div {

    width: 0;

    height: 0;
    line-height:0；
    font-size: 0;
    border-top: 10px solid red;

    border-right: 10px solid green;

    border-bottom: 10px solid blue;

    border-left: 10px solid #000;

 }

继承或者 *	0,0,0,0
每个元素（标签选择器）	0,0,0,1
每个类，伪类	0,0,1,0
每个ID	0,1,0,0
每个行内样式 style=""	1,0,0,0
每个!important 重要的	∞ 无穷大

元素

css学习笔记