css基本样式1（7.1）

1. 块级元素(block-level)和行内元素(inline-level)

(1)差别：

• 块级元素能包含行内元素和块级元素，行内元素只能包含行内元素和文本内容
• 块级元素能够占据一整行，行内元素只能占据内容的宽度
• 块级元素能够设置宽高margin，padding，行内元素不能设置宽高，设置上下margin和padding不生效，左右的margin和padding生效。(在设置背景颜色，border显示的状况下，padding和margin视觉上会被撑开，但实际的占用位置是不变的)

(2)经常使用的块级元素

div h1 h2 h3 h4 h5 h6 p form pre 
table tr th td ol li ul dl dd dt

(3)经常使用的行内元素

em strong span img a  button label
select input textarea  code

2.盒模型
盒模型内容的width、height、padding内边距、border、margin外边距。

3.宽高width/height
对行内元素不生效，只对块级元素生效

.box{
background-color:red;
width:100px;
height:20px;
}

4.边框 border
（1）border主要参数：
一、width 二、样式（样式有直线solid、圆点dotted、短直线dashed） 三、颜色

//例子1
.list {
  border: 1px solid #ddd;
}

//例子2利用border画三角形
.triangle {
  width: 0;
  height: 0;
  border-top: 100px solid deepskyblue;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom:100px solid transparent;// transparent让边框透明
}

demo：连接描述
（2）边框倒圆角border-radius

.control {
width:100px;
height:100px;
  border-radius: 4px 10px 8px 5px;
//分别表明的左上、右上、右下、左下的倒圆角直径
//能够用百分比作radius的参数
// border-radius：50%或者倒圆角直径大于半径，就能够获得圆
}

5.内边距padding

padding：10px 20px 30px 5px；
//分别表明的左上、右上、右下、左下的内边距宽度
//能够简写成上下10px，左右20px；
padding：10px 20px；

6.外边距margin
（1）基本用法

margin：10px 20px 30px 5px；
//分别表明的左上、右上、右下、左下的外边距宽度

（2）外边距合并

（3）块级元素的自动居中

margin：0 auto；//至关于左右外边距距离相等，就居中了

7.去除浏览器默认的样式

*{
margin：0；
padding:0;
}

8.display 指定用于元素的呈现框的类型
块级：block list -item table
行内：inline inline-block inline-table

• none 不显示元素。
• block 显示为块状元素。
• inline 显示为行内元素
• inline-block 显示为行内块，建立一个 BFC

9.font
font-size:30px 字体大小
chrome 的最小字体是16px，
font-weight:文字粗度（regular默认 bold粗体）
font-family:字体
line-height:行高

p {
  font:12px/1.5 "Source Han Sans", Helvetica, Arial, sans-serif;
}

10.文本
（1）text-align
text-align 属性用于设置文字对齐方式。

• left 左对齐
• right 右对齐
• center 居中，当设置在图片的父元素上时，可使图片居中
• justify 两端对齐

（2）text-indent 首行缩进距离

p { 
  text-indent: 2em;  /* 文章的每一段空两格开头 */
}

（3）text-docoration 用于设置文字划线样式

• text-docoration:none 取消划线
• text-docoration:underline 下划线
• text-docoration:overline 上划线
• text-docoration:line-through 中划线

(4)text-transform 属性用于改变字母的大小写。

• text-transform:none 取消转换效果
• text-transform:uppercase 转为大写
• text-transform:lowercase 转为小写
• text-transform:capitalize 转为首字母大写

(5)letter-spacing
letter-spacing 属性用于设置文字/字母的间距。

(6)word-spacing
属性用于设置单词/字的间距

11.文本超出省略
demo：连接描述

.card >h3{
  white-space:nowrap;//空白字符：文本不折行
  overflow:hidden;  //超出部分隐藏
  text-overflow:ellipsis;//文本超出的地方，添加省略号
  
}

12.颜色color
单词：red blue black pink
16进制：#fff #000 #0f0 #eee #333 #666 #f034ec
全部颜色均可以由红绿蓝三种颜色混合而成，就把每一个基色分红255份，按照16进制来展现。两个相同的字母是能够省略的，故#fffffff能够写成#fff。
rgb(255,255,255)分别表明是red green blue
rgba(255,255,255,0.5)分别表明是red green blue 透明度（0为透明，1不透明）

#000为黑色
#fff为白色
其余3个字母相同基本是灰色，不一样深浅的灰色

13.单位
px:固定单位，像素点之意
em：相对单位，相对于父元素大小
rem：相对单位，相对于html根元素大小
vm：相对单位，1vm相对屏幕宽度的1%，但兼容性不好

14.a连接样式

• （1）设置颜色

a连接的颜色是不能继承的，不能经过给父元素设置颜色，继承给a连接。
a连接的颜色只能经过选择a连接直接设置

a{
color:red;}

• 取消a连接下划线

a{ text-decoration:none;}

15.取消ul中li前面的.

li{ list-style:none;}

16.隐藏元素opacity:0 总体透明度为0visibility:hidden; 隐藏，但还占用位置display:none; 消失，不占用位置rgba(255,255,255,0) 只是背景色透明