仿写一个知乎
1.观察发现知乎很像学习的双飞翼布局 就用双飞翼模板
并不适合 ，还是老老实实写吧
index.html
<!DOCTYPE html>
<html>
<head>
<title>首页-知乎</title>
<link href="https://static.zhihu.com/static/favicon.ico" rel="icon" type="image/x-ico">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
<!--双飞翼布局-->
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="main">
<div id="center">
<div id="inner">inner</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
</div>
</body>
</html>
reset.css
*{padding: 0;margin: 0}
html,body{height: 100%}
a{text-decoration: none}
li{list-style: none}
main.css
#container{
height: 100%;
100%;
margin: 0;
}
#header{
height: 5%;
background: lightblue;
}
#main{
height: 95%;
}
#center,#left,#right{
float: left;
height: 100%;
}
#center{
100%;
background: lightgreen;
}
#inner{
padding: 0 25%;
}
#left{
25%;
margin-left: -100%;
background: red;
}
#right{
25%;
margin-left: -25%;
background: yellow;
}
2.加一点细节
冗談冗談
3.看一下注意的点
vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式
注意 vertical-align 只对行内元素、表格单元格元素生效：不能用它垂直对齐块级元素
1.实现水平居中 div中img居中 试了好多还不行
就使用transform那一套了
2.让搜索框更加舒服的方式 设置padding：0 5px
input{ display: inline-block; height: 30px; 330px; border:1px solid rgb(246,246,246); padding: 0 5px; }
3.发现一个问题 div中的input会导致div出现不符合希望的问题如图
设置div的vertical-align为top就变成
再设置line-height与height等高就可以居中了
4.有些input的框是不支持伪元素的
譬如text框
5.还有一个问题 我写的这个不适应缩小浏览器器宽度与高度 之后得解决这个问题
像这样
正常情况
非正常情况
上面这个问题 是因为我没有显式的设置 浮动元素的父元素的宽度 导致缩小浏览器后 会导致元素下移 (这种说法好像并不准确 应该有专门的术语)
那么 设置宽度后 就是这样子了 （margin是不包含在你设置的width中的)
6.写的过程中发现其实这个界面并不适合双飞翼
我现在发现利用百分比实现双飞翼会带来一个问题 就是如果我们想让所有元素固定在页面中 不想在缩放页面后导致出现奇怪的表现 利用百分比好像并不是一个明智的选择当然也有可能是我道行太浅
现在要实现对我来说能想到的只有 写死格局大小 (应该大部分都写死了大小 譬如好多页面都会设置 980px)
这图真的是绝了
7.flex-wrap:warp设置元素多行显示 flex真好用
8.下一篇总结一下元素居中方式 vertical-align text-align 图片 transform什么的
9.使用css border实现一个边框
看到{{uploadi zhezng-image-781015.png(uploading...)}}这个
就想到了可以利用css border实现一个三角形
这是利用了border不是由四个矩形边框拼接成的 实际上是以梯形拼接的(当上底为0 梯形也就变成了三角形 也就是说 设置元素的宽度高度为0 而是border大一些 就可以实现这样的效果)
10·margin border-color 接收三个值代表 上 右和左 下 (这个我给忘了)
11.伪元素:after 需要有content属性 不然可能会不显示
12.遇到img标签无法和p标签并列 设置p标签为inline也不行
测试后发现 并不是无法并列 是p标签底边与img标签底边对齐了
像这样
解决方法是使用改变img的 vertical-align属性 为top 就可以了
同理, middle bottom 也有类似效果
13.也是和上面类似的问题 div中包裹img 与另一个div对齐于一行
同样也是利用 设置 vertical-align的方法 不过要设置到img的那个div上
如果设置到img上 会出现
搜了一下据说是因为 图片文字等inline元素默许是和父级元素的baseline对齐之类的(大概是这个原因)
(要写的博客逐渐增加)