css基本样式1（7.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主要参数：
1、width 2、样式（样式有直线solid、圆点dotted、短直线dashed） 3、颜色

//例子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 整体透明度为0
visibility:hidden; 隐藏，但还占用位置
display:none; 消失，不占用位置
rgba(255,255,255,0) 只是背景色透明