今天完成的事情：
对深度思考进行理解和实践 理解了一下几种布局方式 双飞翼布局 圣杯布局 flex布局 以及自己动手响应式布局
任务八九深度思考总结如下：
主流浏览器内核有哪几种？
1.Trident(IE内核)
IE内核主要使用在IE浏览器中。
2.Gecko(Firefox内核)
主要用于firefox浏览器中，特点是代码完全公开，开发程度高。
3.Webkit(Safari内核)
特点是不受IE、Firefox等内核的约束，比较安全。
4.Chromium（谷歌浏览器）
Chromium 是基于WebKit的。Chrome由Chromium开发而来。这个内核是国内众多浏览器所使用的内核，比如360浏览器、猎豹浏览器、腾讯浏览器等。
在众多的国内外浏览器中，谷歌浏览器的优势最为明显。
CSS中的写法一般是根据不同浏览器的自定义样式加前缀：
webkit内核浏览器 -Webkit
Gecko内核浏览器 -moz
Presto内核浏览器的 -o
以及Trident内核浏览器的 -ms
什么是外边距重叠，重叠的结果是什么
橙色为大盒子 绿盒子里放了一个红色的方块 红色方块的左右外边距可以移动
但是它的上外边距和绿色的上外边距重叠了。。。
空标签设置上下外边距30px 重叠之后有了30px的高度
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。
解决外边距重叠？
内层元素绝对定位 postion:absolute:
内层元素 加float:left;或display:inline-block;
——————下面这些试了没用。。。
外层元素padding代替
内层元素padding:1px;
外层元素 overflow:hidden;
内层元素透明边框 border:1px solid transparent;
div+css的布局较table布局有什么优点？
由于div+css的代码量比较少，
1：页面显示简洁，加载速度比较快。
2：对搜索引擎比较友好，过多的代码，容易造成爬行超时。
div只需要修改css就可以更改页面内容，易于维护和优化。
3.提高搜索引擎对网页的搜索效率。
table布局的好处
1.容易上手。
2.可以形成复杂的变化，简单快速。
3.表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。
垂直对齐方式
给父元素设置
display: table-cell; 加vertical-align 属性 垂直居中
middle把此元素放置在父元素的中部
这个属性可以对齐文字基线 父元素顶端和下端
在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
行高等于容器高度垂直居中 单行居中
行高等于容器高度 子元素内联块 多行居中
父元素相对定位 子元素绝对定位的top50% 减去自身一半居中
父元素相对定位 子元素绝对定位top50% 2D转换
transform：translate(x,y-50%)； 2D转换 X轴 Y轴
父元素相对定位 子元素绝对定位 margin：auto；自适应居中 父元素需要有高度
弹性盒子flex + align-items 垂直居中
弹性盒子 align-self
center居中
flex-start 顶点
flex-end 底部
弹性盒子display-flex margin：auto； 水平垂直居中
函数在知道宽度的情况下
元素宽度100px
margin-top：calc(50% - 50px);
margin负值在页面布局中有哪些应用？
这个理解了好一会，左右固定 中间自适应 三个元素都左浮动 用左右外边距控制中间元素的大小 留出位置，然后调整俩个方块的位置就好了
双飞翼布局再中间的位置添加了内容区，利用外边距防止中间内容区被覆盖
圣杯布局就是利用左右内边距配合相对定位 防止中间内容被覆盖
相对定位top0，移动本身宽度大小px
————————————————
还学到了用flex布局 父元素 包裹三个盒子 父元素display：flex；
第一个盒子设置高度 背景颜色 flex：1
flex属性是flex-grow, flex-shrink 和 flex-basis
第二个元素设置高度 背景颜色 用 order: -1; 调整位置 数值越小越靠前 flex： 0 0 200px；
第三个元素 设置高度 背景颜色 flex： 0 0 200px；
想要留空白可以 margin：0 10px； 这个自己定 也可以设置最小宽度 防止挤压
去除列表右边框
ul{ margin-right:-10px;
}
列表中最后一个li的border-bottom往往会与外边框重合，视觉上不雅观，
margin-bottom:-1px; 移除
可以通过padding-bottom：负内边距 撑起高度，再用负外边距统一高度，溢出的隐藏就好了
overflow: hidden;
以上为任务八深度思考总结
任务九深度思考总结
媒体查询如何使用
screen 计算机屏幕
可以 再一定范围使用 用 and
@media screen and (min-width:600px) and (max-width:900px) {
body {
background: red;
}
}
也可以 再大于多少宽度 小于多少宽度使用
使用关键词“not”是用来排除某种制定的媒体类型 用来排除符合表达式的设备。换句话说，not关键词表示对后面的表达式执行取反操作
@media not print and (max-width: 1200px){样式代码}
上面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。
only：指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器：
@media only screen and ( ){ }
媒体查询的引用样式
//第一种： @media sreen and (width:800px){ 样式 } //第二种： @import url(example.css) screen and (width:800px) //第三种： <link media="screen and (width:800px)" rel="stylesheet" href="example.css" />0
响应式的
优点：
1.在不同设备下能有不同的页面排版，这也是响应式最大的优点，在分辨率不同，设备环境进行一些不同的设计，所有开发维护和运营上，相对多个版本成本会降低很多。
2.兼容性好，能在不同的设备下浏览。
3.方便后期维护页面，只需要对必要的页面进行修改，不会影响其他页面。
缺点：兼容各种设备工作量大，效率低下；代码累赘，会出现隐藏无用的元素，加载时间加长；其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果；一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。
为了适配不同的设备，响应式设计需要大量专门为不同设备打造的css及js代码,这导致了文件增大，影响了页面加载速度
————————————————————
解决overflow: auto; 滚动条隐藏
::-webkit-scrollbar {
display: none;
}
object-fit: cover; 图片不失真
明天计划的事情：
深度思考再过一遍，看看哪里忘记了或还有疑惑，没问题就做任务十
遇到的问题：
暂时无
收获：
理解了一下 自己动手写响应式的方法 已经知道大框了，具体的内容就要动手实践了
返回列表
评论