使用css的方式
1.内联样式/行内样式-直接在标签里使用-开发时不提倡使用
<p style="color:red">我是嫩爹</p>
2.内部样式
写在head里面的<style></style>标签里面，仅当前页面可用不可跨页面复用
3.外部样式-开发时最佳实践
单独建立一个css文件，使用需要的样式用标签<link rel="stylesheet" href="css路径">进行调用，可复用
css的语法
选择器 声明块
元素选择器 根据标签名选中指定元素-标签名{}
id选择器 根据元素的id属性值选择一个元素---#id{}
类选择器 根据元素的class属性值选择一组元素---.class{}
通配符选择器 选择页面中的所有元素---*{}
交集选择器 选中同时复合多个条件的元素--选择器1.选择器2.选择器n{}-开头必须是元素选择器
并集选择器 同时选择多个选择器对应的元素--选择器1，选择器2，选择器n{}
子元素选择器 选中指定父元素的指定子元素--父元素 > 子元素{}
后代元素选择器 选中指定元素的指定后代元素--祖先元素 后代元素{}/兄弟选择-前一个+后一个--兄~弟
属性选择器
[属性名]含有指定的元素
[属性名=值]含有指定属性和值的元素
[属性名^=值]属性值以指定值开头的元素
[属性名$=值]属性值以指定值结尾的元素
[属性名*=值]属性值中含有某个值的元素
伪元素
重点——::before（元素的开始）/::after(元素的最后)---结合content的属性使用
div::before{
content:"添加需要的内容"}
选择器的权重
内联样式-1，0，0，0
id选择器-0，1，0，0
类选择器和伪类选择器-0，0，1，0
元素选择器-0，0，0，1
通配选择器-0，0，0，0
继承的样式没有优先级
//权重越高则优先显示，权重的累加不会超过最大的数量级，如优先级相同则显示靠下的样式（分组选择器不能累加计算）——加!important则为最优先级
边框
主要用boder
border:10px red solid;
border-with/color（with不设置值默认3个像素）
四个值；上 右 下 左
三个值；上 左右 下
两个值；上下 左右
一个值；上下左右
边距
内边距padding，值设置如上
值得注意的是盒子的大小是由 边框+内边距+内容区(content)合在一起的
外边距margin
水平布局
一个子元素在父元素中必须满足一个等式
margin-left+border-left+padding-left+width+padding-rigth+border-right+margin-right=父元素内容区的宽度（如果开启绝对定位则需要加上left和right）
如果把宽度设置为固定的值，外边距左右设置为auto则其会平分剩余的宽度，可实现居中效果。
元素转换
display：设置元素显示类型
block(块元素)，inline-block(行内块元素)，none(页面中不显示)
visiblity：设置元素显示转态
visible(默认值，正常显示)，hidden(在页面中隐藏，不显示)
box-sizing:设置盒子可见区的计算方式
border-box:width和height为多少可见区就是多少
content-box：默认值,w和h设置内容区的大小
box-shadow:设置盒子的阴影
前两个值可正可负，第一个正右负左，第二个正下负上
第三个个值是对阴影的羽化
border-radius：设置盒子的边角是否为圆角
四个值 左上 右上 右下 左下
三个值 左上 右上左下 右下
两个值 左上右下 右上左下
使用伪类解决高度塌陷问题
.box1::after{ content: ""; clear: both; display: block; }
.clearfix::before,.clearfix::after{ content: ""; display: table; clear: both; } //这个方法可以解决高度塌陷和外边距重叠
定位position
reletive:相对定位/ /top-right-bottom-left设置位置
相对于原来的位置进行偏移，提升层级，不会脱离文档流，不会改变元素性质
absolute:绝对定位
相对于包含块进行定位，提升层级，会脱离文档流，行内变成块，块被内容撑开
fixed:固定定位
固定定位也是一种绝对定位,参照于浏览器视窗口进行定位。
z-index控制开启定位的元素的层级，整数越大则越优先显示，父子关系的元素子元素不会受层级影响而被父元素覆盖
背景
background-color背景颜色
background-img背景图片
backgroun-repeat：背景重复方式
background-position背景位置（l/r/t/b 两个值只写一个第二个为center）
过渡
transition-property:指定属性
transition-duration:过渡的时间
transition:property duration/s
flex
flex弹性盒
display:flex块级弹性容器
display:inline-flex设置为行内弹性容器
flex-direction：弹性元素的排列方式
row:水平左右
row-reverse:水平右左
column：纵向上下
column-reverse：纵向下上
