这是我参与第五届青训营伴学笔记的第二天
css工作
通过dom树来渲染页面
RGB模型不会和颜色有直接关联
所以我们采用HSL来更加直观的展示颜色
HSL
hue
色相 0-360
s饱和度
表示鲜艳的程度 %
l亮度
越高颜色越亮 %
它会更方便来判断颜色
alpha 透明度
通用字体族
衬线体 无衬线体（使用的比较多） 手写体 等宽字体 英文字体最好写在中文字体前
设置字体时，为了保证字体可以显示，可以写一个url来加载那个字体下载的网址
foot-weight 使用过高的字重时，不会显示出来，是因为不支持这种字重
foot-size 不写px 会用字体大小的几倍行高转换为px
空白符处理 white-space
继承
某些属性会自动继承其父元素的计算值，触发显示一个指定的值 一般是文字会继承，但是对于盒子模型不适用
初始值 每个元素没有设置属性时，会有初始值
可以用initial关键字重置为初始值
css求值过程
盒子模型 content(网页内容)-padding(内边距)-border（边框）-margin（外边框） padding,border,margin都有上下左右边框（top,bottom,left,right），都可以单独设置 一般在统一设置时，顺序为上，右，下，左
span的上下边距会融合
1.边框border
[1]color
单独设置一边的颜色：例如
border-top-color：；
统一设置
border-color:上，右，下，左;
如果设置时缺少某一边的属性就会设置成对边相同的颜色，比如缺少左边框，那么就会和右边框的颜色一致
【2】粗细width border-width 它的值有 thin(细)---medium（中等：默认值：2px）-------thick（粗）
单独一边设置
border-top-width: ;
统一设置：border-width: ;
[3]style
border-style
值有: none（无） dotted（点线） dashed（虚线） solid（实线）
单独设置一边
border-top-style: ;
统一设置
border-style: ;
简写属性：用于单独设置一边的样式 使用没有顺序限制
border-top:width color style;
.box{
width: 293px;
border: 1px solid #3A6587 ;
}
h2{
font-size: 16px;
color: #FFF;
height: 35px;
line-height: 35px;
background-color: #3A6587;
}
form{
background-color: #C8ECE3;
}
div:first-of-type input{
border: 3px solid black ;
}
div:nth-of-type(2) input{
border: 1px red dashed ;
}
div:nth-of-type(3) input{
border: 2px red dotted ;
}
/*写盒子模型的步骤
1.先在html(body部分)设置一个双标签用来装盒子
2.然后在css里面写.box，通过class把盒子加入进去
3.再使用各类选择器，向盒子添加样式
*/
</style>
</head>
<body>
<div class="box" >
<h2>会员登录</h2>
<form action="#">
<div>
<strong>姓名：</strong>
<input type="text" />
</div>
<div>
<strong>邮箱：</strong>
<input type="email" />
</div>
<div>
<strong>电话：</strong>
<input type="text" />
</div>
</form>
</div>
</body>
2.外边距：marign
外边距是与其他盒子的距离,元素与元素之间的距离
设置顺序与border一致
上，右，下，左
示例
marign-top marign没有其他属性，只能设置各个边的与其他的距离
示例 marign: 2px 2px 2px 2px;/设置上右下左外边框的距离/
如果设置时缺少某一边的属性就会设置成对边相同的距离，比如缺少左边框，那 么就会和右边框的距离一致
每个标签之间都有默认的外边距，且在每个浏览器都不一样，那么我们设置marign就是为了避免不必要的空隙
1.清除外边距，设置为0px
margin: 0px;
}/*清除body和h2的外边距*/
2.设置边距 marign px;
和border一样,marign也可以简写属性
marign-top 6px;/这样设置的话，这里面就只能填一个边距/
3.让盒子居中 auto
但是我们注意，
【1】auto这个属性，对非块元素不起作用，比如span，它就是非块元素，（并且span有个bug，两个span的上下边距会融合）
【2】auto只能用于id=box样式
【3】使用auto元素还必须要设置宽度，
width: 293px;/*设置宽度*/
border: 1px solid #3A6587 ;
margin: 0px auto ;/*在box里面且是对块元素div设置*/
}
3.内边距padding
上，右，下，左
单独设置一边
padding-top: ;
统一设置
padding: ;
设置边框与内容的距离，使显示的更为美观 如果设置时缺少某一边的属性就会设置成对边相同的距离，比如缺少左内边框，那么就会和右内边框的距离一致
在我们开发的过程中，如果本身没有边框，我们可以手动设置一个来方便调试，但是要记得删除
4.盒子模型的尺寸
关于尺寸 首先要有一个概念
width,height是设置内容的宽度，那我们理解了盒子模型就知道 如果想要内盒子的width为100px，就必须要先考虑内边距和边框宽度，才能计算出width写多少
内盒尺寸（高度或者宽度） =border+padding+width(height)
外盒尺寸=border+padding+width(height)+marign
5.box-sizing
如果每次都要计算的话，就不便于开发，这个时候我们使用box-sizing，就可以直接计算盒子的总尺寸 当我们加入了box-sizing，就可以直接设置width和height，这里的width和height并不是内容的宽度了，而是盒子的总尺寸
box-sizing:border-box 是设置内盒总尺寸,一般都是用这个
box-sizing:content-box 设置整个盒子的尺寸包括margin,用的少
box-sizing:inherit-box 继承父元素盒子模型的模式
我们这里再想要实现盒子的width为100px,就可以直接设置
width 100px;
box-sizing:border-box;
}
浮动（排版）
用于设计网页布局
标准文档流 就是按块元素或者行内元素的特性自然排列
1.display 指定标签的显示方式
各个属性值的作用
block 块级元素的默认值，前后带有换行符，显示为块级元素
inline 行内元素的默认值，前后不带换行符，显示为行内元素
inline-block 块级和行内的特性都有
/* 让两个元素同时具有块级元素的换行符变成一块（可以设置高度和宽度），并且会和行内元素一样排一排 */
none 不显示 /* 这个也十分有用 */
一个块级元素里面装的都是行级元素会按照IFC排版
行级排版上下文
只包含行级盒子的容器会创建一个IFC
IFC内的排版规则
盒子在一行内水平摆放
一行放不下时，换行显示
text-align决定一行内盒子的水平对齐
vertical-align决定一个盒子在行内的垂直对齐
避开浮动元素
块级排版上下文
某些容器会创建一个BFC
BFC内排版规则
盒子从上到下摆放
垂直margin合并
就比如说我们写两个盒子之间它的垂直距离margin会消失
BFC内盒子的margin不会与外面的合并
BFC不会和浮动元素重叠
div{
border: 1px red solid ;
width: 100px;
height: 100px;
display: inline-block;
}
span{
border: 1px red solid ;
width: 100px;
height: 100px;
display: inline-block;
}
</style>
</head>
<body>
<div>我是div</div>
<span>我是span</span><!--span为行内元素，此时我们添加block属性，就会拥有块级元素的特性-->
2.浮动
1.设置浮动
float的各个属性
left 元素向左浮动
right 元素向右浮动
none 元素不浮动
当设置为left和right,元素会向其父级元素的左侧或者右侧浮动，并且盒子宽度不动
浮动的文字会环绕在浮动元素周围显示
2.清除浮动
clear
left
right
both 两侧都不浮动
none
清除浮动可以避免对其他元素造成的影响
