第一次开发中的css疑惑点 排查1

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