css总结

css（cascading style sheets）层叠样式表

引入方式

1. 行内样式————写在html标签中。如：

<div style="width:100px; height:100px;”></div>

1. 内嵌样式————写在style标签中如：

<style type="text/css">
    div {
        width:200px;
    }
</style>

1. 链接样式————使用link标签，如：

<link type="text/css" rel="stylesheet" href="style.css" />

1. 导入样式

@import url("style.css")

如果需要写在style中，则在最上面引入

选择器

• 语法：选择器{规则}

1. 标签选择器（元素选择器）

div {
  width:100px;
}

1. 通配选择器

* {
  margin:0;
  padding:0;
}

1. id选择器

#box1 {
  width:100px;
}

1. 类选择器

.box {
   width:200px;
}

另一种情况：

div.box {
   width:100px;
}

意思为选中类名为box的div元素

1. 包含选择器————通过包含嵌套选择，只要包含就行

.box p a {
    color:red;
}

意思为类名为box的元素下的p元素下的a元素。一般情况下包含选择器不超过四层，上下层不一定是父子关系。

1. 子选择器————一个元素下的直接子元素

.box>p {
  color:red;
}

选择器的权重

*选择器         0.5
元素选择器      1
类选择器        10
id选择器        100
内联样式        1000
!important     最重要，优先级最高

长度单位和颜色表示

• 长度单位

1. px 像素
2. em 以当前字体的高度为基准，的倍数，受父元素的影响。如：当前为12px；则1em=12px

• 颜色表示

1. 英文单词 red blue green pink black 等

2. 使用三色的数值，数值范围在0-255之间。如：

rgb(120, 110, 100)
rgba(120, 110, 100,0.5)   // a为透明度，数值范围在0-1之间，0完全透明

1. 三色数值的十六进制
   如：#ffffff #00ff00 #cccccc

字体文本样式

• font-family 字体系别种族
• font-size 字体大小
• font-style字体倾斜效果

font-style: normal;  //不倾斜
font-style: italic;  //倾斜
font-style: oblique;   //让没有倾斜的字体倾斜

• font-weight 字体粗细
  值：

font-weight: normal;  // 正常
font-weight: bold;  // 粗体
font-weight: bolder;  //加粗体
font-weight: lighter;  //细体
font-weight: 400; // 数字100-900，数值越大越粗，400是正常

• text-transform 英文字母大小写转换
  值：

text-transform: capitalize;  //单词首字母大写
text-transform: uppercase;  //全部大写
text-transform: lowercase;  //全部小写

• text-decoration 文本装饰效果
  值：

text-decoration: underline;  //文字加下划线
text-decoration: line-through;  //删除线
text-decoration: overline;  //  上划线
text-decoration: none;  //无

• text-indent 段落内容首行缩进 可以为负值
• letter-spacing 字母间距，文字间距
• word-spacing 单词单词之间的间距
• line-height 段落内部的行高
  可以使用line-height的值与height的值相等，达到文本在一行内垂直居中的效果。
• text-align 文本水平位置
  值：

text-align: left;  //左对齐
text-align: right;  //右对齐
text-align: center;  //居中对齐
text-align: justify;  // 两端对齐

• vertical-align 垂直对齐方式: 一般定义行内块级元素和文本的垂直对齐
  值：

vertical-align: baseline;  //(默认) 基准线对齐
vertical-align: top;  //上
vertical-align: middle;  //中
vertical-align: bottom;  //下

盒子模型

盒子模型是由内容 内边距 边框和外边距组成的抽象模型

• padding 内边距

值分别有：

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

简写：

padding: 20px;  // 上下左右都为20px
padding: 20px 30px;  // 上下为20px，左右为30px
padding: 20px 30px 40px;  //上为20px 左右为30px 下为40px
padding: 20px 30px 40px 50px;  // 依次为上右下左

• border 边框

border-width   //边框的宽度
border-color   //边框的颜色
border-style   //边框的样式 （值：`solid`实心 ` dotted`小圆点  `dashed`虚线 ...）
border: border-width  border-color  border-style;
border-left:  border-width  border-color  border-style;
border-right、border-top、border-bottom

例如：

border: 2px solid red;
border-right: 1px dotted blue;
border:none;  //没有边框
border-bottom:none;  //没有下边框

• margin 外边距，用法同padding

注意：

1. 左右横排的盒子之间的间距是 两者的外边距相加
2. 上下排列的盒子之间的间距是 以最大的为准（大的会把小的给吞掉）
3. 一个盒子包着里一个盒子 他们都有margin-top 以最大的为准（大的会把小的给吞掉）
   解决方案:给父元素加overflow:hidden

1. 块居中 margin:0 auto;

背景

• background-color 背景颜色

background-color: #f00;

• background-image 背景图片

background-image: url('图片路径') 默认水平垂直都平铺

• background-repeat 背景图片的显示方式
  值：

background-repeat: repeat;  // 默认
background-repeat: no-repeat;  // 不平铺
background-repeat: repeat-x;  //水平平铺
background-repeat: repeat-y;  //垂直平铺

• background-position 背景图片的位置
  值：

background-position: 20px 30px;  //距左边20px, 距上边30px
background-position: left top; // 左上 可以写两个定位的单词（left right center top bottom）
background-position: 50% 100%;  //相当于 center bottom

• background-size 背景图片的大小

background-size: 20px 20px;  //宽度高度都为20px，宽高相同时，可以只写一个值
background-size: 100%；
background-size:  cover;  //把背景图片扩展至足够大，以使图像完全覆盖区域，等比例扩展可能会切割图片（显示不完整）
background-size: contain;  //等比例扩展至足够大，图片完整（可能会引起区域空白）

• background-origin背景图片的渲染位置
  值：

background-origin: padding-box;  //（默认）渲染从padding   开始
background-origin: content-box;  //在内容里渲染
background-origin: border-box;  //从边框往里渲染

• background-attachment背景图片是否滚动
  值：

background-attachment: scroll;  //(默认)背景图片随正常文档流滚动而滚动。
background-attachment: fixed;  //固定 不随文档流而移动

简写：

background: #f00 url('路径') no-repeat center center;

浮动

浮动
造成标签的浮动，影响正常文档流空间，脱离正常文档流会对后面的元素产生影响，不会对前面的元素产生影响

float: left;  //左浮动
float: right;  //右浮动
float: none;  //不浮动（默认）

元素浮动后自动变成块级元

清除浮动

• 给父元素加height

• 给父元素加overflow: hidden

• 在浮动元素后面加一个空的块级元素 给它加样式clear: both clear(left清除左浮动 right清除右浮动 both清除左右浮动）

• 给父元素加伪元素:after

父元素:after {
  content: "";
  display: block;
  clear: left;
}

定位

position：

position: static;  // 不定位 （默认正常文档流）
position: relative;  // 相对定位  （相对于自身）
position: absolute;  //绝对定位   (相对于外层定位元素定位，若没有则相对于浏览器)
position: fixed;  // 固定定位（相对于浏览器）

多个定位元素的覆盖次序 通过z-index来判断 z-index的值是一个没有单位的数值
谁的z-index的值越大，谁就在最上层

其他

• 元素类型的转换

display: block;  //任何元素转换为块级元素  
display: inline-block; //任何元素转换为行内块级元素（ie7及以下版本不支持）
display: inline;  //任何元素转换为行内元素   
display: none;  //任何元素消失不见        

• box-sizing 盒子大小（css3属性）
  值：

content-box //设置宽度为内容的宽度，加padding盒子会变大
border-box  //设置宽度为border之内的加padding不会增大盒子

• 内容溢出

overflow: visible;  //(默认)可见
overflow: hidden;  //隐藏
overflow: scroll;  //出现滚动条
overflow: auto  //浏览器自动处理

• text-overflow 文本溢出处理

clip  //不显示省略标记
ellipsis  //显示省略标记

• white-space 元素空白处理

normal  //默认
nowrap  //不换行
pre  //空白被保留

一般处理文本溢出，三者搭配使用
新标签：<nobr></nobr>强制不换行

• 元素消失（不可见）

display : none;  //元素在页面不显示  位置也不见了
visibility: hidden;  //元素在页面不显示  位置还在
opacity: 0;  //元素在页面看不见  位置还在
z-index : -999999;  //元素在页面也看不见

• 列表样式

1. list-style-type 列表样式类型
   值：

disc   //实心原点
none   //去掉样式
circle  //空心圆
square  //实心方形

1. list-style-image 列表样式图片
   值：url(图片路径)

1. list-style-position 列表样式的位置
   值：

outside   //列表样式在内容的外面
inside    //使列表样式在内容再里面

阿里云领红包