未来周记7

行内元素：
行内元素脱离文档流以后会变成块元素，特点和块元素一样
脱离文档流以后，不需要在去分行和块元素
转化为行内块元素: display:inline-block
照片：改为圆角：border-radius:lenght;
高度塌陷的问题:
在浮动布局中，父元素的高度默认是被子元素撑开的，
当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离
将会无法撑起父元素的高度，导致父元素的高度丢失
父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱
所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理
BFC:用hidden,left,float,可开启bfc
BFC(Block Formatting Context) 块级格式化环境
BFC是一个css中的一个隐含的属性，可以为一个元素开
开启BFC该元素会变成一个独立的布局区域
元素开启BFC后的特点:
1.开启BFC的元素不会被浮动元素所覆盖
2.开启BFC的元素子元素和父元素外边距不会重鲁
3.开启BFC的元素可以包含浮动的子元素
可以通过一些特殊方式来开启元素的BFC:
1、设置元素的浮动(不推荐)
2、将元素设置为行内块元素(不推荐)
3、将元素的overflow设置为一个非visible的值
- 常用的方式 为元素设置 overflow:hidden 
使用after伪类解决高度塌陷问题:
after:行内元素 
例: .box::after{
content:'';
display:block;//行元素转化为块元素;
clear:both;//清除浮动
}//after:表示元素的最后；
clearfix:
解决外边距重叠也可以解决高度塌陷:display:table
.clearfix://类名
.clearfix::before,
.clearfix::after{
content:'';
display:table;
clear:both;
}
text-align 文本的水平对齐
可选值:
left 左侧对齐
right 右对齐
center 居中对齐
justify 两端对齐
盒子:

margin:外边距设置，有单独的属性去设置单个边距。左(margin-left);右(margin-right);上(margin-top);下(margin-bottom)。我们可以通过margin直接写成简写模式： margin:上 右 下 左（四个属性值，就是按照顺时针设置）
margin:上 左右 下（三个属性值，中间就是左右的）
margin:上下 左右（两个属性值，前面表示上下，后面表示左右）
margin:上下左右（一个属性值，表示四个方位的值都相同）

border:边框   border-style: solid 实现边框 dashed 虚线边框 dotted 点线边框
content；内容  
 padding:内边距  内容到边框的距离  它也有四个方位单独的属性。左(padding-left);右padding-right);上(padding-top);下(padding-bottom)

盒子：宽高等于content+padding+border加在一起的宽高
#响应式布局
网页可以根据不通的设备或窗口大小呈现出不同的效果
使用响应式布局，可以使一个网页适用于所有设备
响应布局的关键就是 媒体查询
通过媒体查询，可以为不通的设备，或设备不同状态来分别设置样式
#使用媒体查询
语法: @media 查询规则{J
媒体类型:
all 所有设备
print 打印设备
screen 带屏幕的设备
speech  屏幕阅读器
可以使用,连接多个媒体类型,这样他们之间就是一个或的关系
#导航栏注意点:
实际开发中，我们不会直接用链接a 而是用 li 包含链接(i+a)的做法
1.li+a语义更清晰，一看这就是有条理的列表型内容
2.如果直接用a，搜索引警容易辨别为有堆砌关键字嫌疑(故意堆砌关键字容易被搜索引擎有降权的风险)
从而影响网站排名
注意
1.让导航栏一行显示,给li加浮动,因为i 是块级元素,需要一行显示
这个nav导航栏可以不给宽度将来可以继续添加其余文字
2.
3
因为导航栏里面文字不一样多,所以最好给链接a左右padding撑开盒子而不是指定宽度
#CSS3 过渡(重点)
transition:要过渡的属性 花费时间 运动曲线 何时开始
1.属性 : 想要变化的 css 属性
宽度高度背景颜色内外边距都可以。如果想要所有的属性都
变化过渡，写一个all 就可以。
2.花费时间:单位是秒(必须写单位)比如0.5s
3.运动曲线:默认是ease (可以省略)
4.何时开始:单位是秒(须写单位可以设置延迟触发时间 默认是s (可以略
记住过渡的使用口诀: 谁做过渡给谁
lineax
匀速
ease
逐慢下来
ease-in
加速
ease”out
减速
ease-in~out
先加速后减速
#图片阴影:
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离
spread 可选。阴影的尺寸
color 可选。阴影的颜色。请参阅 CSS 颜色值
inset 可选。将外部阴影(outset) 改为内部阴影

以上就是我这周学习的笔记，希望在以后的学习中能更进一步