我要评论1.选择所有 子元素
.flex-column > *
2.选择所有子元素,除了最后一个
.nav :not(:last-child)
3.width 的百分比和height 百分比
大多数的宽度都是相对于父元素的,
设置100%就是吃掉自己的父亲
但是如果自己的父亲
4.rem的配置
就是先设置HTML,的像素,这里绝对需要用媒体相应来设置HTML的像素
5.如何设置这种样式
右边那个是ul li 不设置宽度,利用display:inline-block
.flex-column > * {
border: 1px solid red;
width: 100%;
height: 100px;
background:rgba(0, 0, 0, 0.3);
padding: 10px 0;
}
.header{
position: fixed;
top:0;
left: 0;
}
.logo {
display: inline-block;
height: 100%;
margin-left: 10%;
}
.nav {
display: inline-block;
position: absolute;
right: 10%;
top:calc(50% - 1.25rem);
}
.nav .tag {
margin: 9px;
display:inline-block;
}
.nav :not(:last-child) {
border-right:1px solid red;
padding-right:10px;
}
@media all and (max-width:1260px ) {
.logo {
display:none
}
}
@media all and (max-width:880px ) {
.nav {
right: 5%;
}
}
@media all and (max-width:800px ) {
.nav {
right: 1%;
}
}
@media all and (max-width:743px ) {
.nav {
display:none;
}
}
6.让图片样式居中
先垫下padding或者margin就好了
7.其实我们面临的问题就是两个
1.子元素是怎么吃父元素的范围的
2.子元素是怎么让父元素撑起来的
8.如何做到 整个视频高度宽度
用vh和vw
height: calc(100vh);
9.关于自动居中
使用
但是,我的两个都是使用inline-block,却发现它不行,我查看了下别人的demo,问题应该是出在inline-block中,然后我只能采用百分比形式,将最外面的div,限制他的宽度
10.处理居中布局
往外多包一层都会出bug
11.使用display-inline 会掉下来
我们使用
https://segmentfault.com/a/1190000006808606
或许这样可以解决img的居中问题.我决定去是一波
12.经过一些的响应式布局
一开始不限制height,height 至少在inline-block的过程中,正常的文档流中,是的,这时候我们应该仔细探讨下文档流的问题.
13.关于解决inline-block 和inline 这些行内居中的
最快的就是text-align:center
14.文档流
这是最后的一个大点,作为css解惑的结束
普通流,应该是怎么样的.
分成哪几种流
更深的对其他流的进一步探讨应该
1.普通流应该怎么样
1.子元素的宽高对父元素的影响
正常文档流下，如果不设置父级的宽度，子级会撑开父级的宽度，但是父级被撑开的宽度最大是屏幕的宽度！
我们只需要了解这个,在以后,我们都会用栅格和flex布局来解决问题.
2.父元素(容器)对各类元素的影响
就是关于margin 还有height 他们的auto 如何生效
margin:auto生效场景https://blog.csdn.net/linwei_ya/article/details/83505432
一定要在元素上设置block!!!!!!!
height:auto 生效场景 默认是使用auto height
height:auto，是指根据块内内容自动调节高度。
height:100%，是指其相对父块高度而定义的高度，也就是按照离它最近且有定义高度的父层的高度来定义高度。
3.
4.哪几种情况会脱离文档流
float
position:absolute
position:fixed
jQuery .height()获取为0可能的原因
元素脱离文档流了，除非你样式里定了height，不然是获取不到的，不过float还可以通过zoom:1，::after清除浮动
一些图片等尚未加载完毕，这种情况只需$(window).load()内执行即可
15.剩下的一些问题
我的第二个普通文档流使用ul li都是设置inline-block 但是,但是在最后
这很疑惑,期待以后能够解决
我使用vertical-align 但是是失败的,文字确实在动,但是img确实实际不动的.
本文地址：https://blog.csdn.net/jiaoqi6132/article/details/107361519
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论