css定位

【css定位】

 

 

 此4个属性只存在定位中，标准流和浮动都没有

 

 

 

 注：父元素是标准流或浮动，则会以浏览器为准，左上右上左下右下

 

注：用绝对定位做三个小盒子在父盒子里面 

 

 

 注：夫没有，爷有，看爷的；爷没有看曾爷的；再都没有，看浏览器的。

 

注：不占有原来的位置，实现固定盒子的功能

 

 ​​​​​​​

  注：要是浮动，里面 放了一张图片，再放浮动，会在标准流下面，不能实现压住盒子的效果

 

注：父亲加了绝对定位，则不占有位置，如果下面右面还有盒子，会跑到父亲的位置上，所以父亲是相对定位；父盒子保留相应的位置，就不会影响页面的布局，所以相对定位生下来就是给绝对定位当爹的。

 

 【new/hot小模块制作】

<div class="box-bd">
            <ul class="clearfix">
                <li>
                    <!-- 此处将把new图片加进来，可以把它放到一个标签里，和下面的img不冲突，
                    在样式ul li img中图片和父盒子宽度适应的地方，改成ul li的亲儿子> img，避免new图片也放大了
                    绝对定位的盒子在html中放哪里都行，因为它对其他盒子没有影响-->
                    <em>
                        <img src="images/new.png" alt="">
                    </em>
                    <img src="images/img1.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info"><span>高级</span> · 1125人在学习</div>
                </li>

.box-bd ul li {
    /* 子绝父相 */
    position: relative;
    float: left;
    width: 228px;
    height: 270px;
    background-color: #fff;
    margin-right: 15px;
    margin-bottom: 15px;
    
}
.box-bd ul li > img {
    width: 100%;
    /* ③li的宽度是228，但是图片是232，如果直接加进图片会多出来，所以要将图片宽度设置100%，和父盒子一样宽，高自适应 */
}
.box-bd ul li em {
    /* 如果不设置父相，则会以浏览器为准右上角
    top和right值为多少较好，可通过浏览器调试不断增大或减小值来判断*/
    position: absolute;
    top: 4px;
    right: -4px;
}

 ​​​​​​​​​​​​​​

  注：浏览器的可视窗口

注：一般在img里面放一个盒子，这样方便设置

  注：固定定位fixed跟父元素没有任何关系，不管是父元素有无定位

 

 

 注：必须加偏移量，不加就成别的定位了；绝对定位随页面滚动而滚动；

 position：sticky；top：0；意思是当往下滚动和上面距离为0时是改成粘性定位；

但是这个不常用，因为不支持，这种效果常用js来做；

s 

 

 

 

 

 

 

 ​​​​​​​

  

 注：绝对定位盒子居中父级为浏览器，调整浏览器窗口仍然居中，移动位置和固定定位、粘性定位一样，都是移动位置为浏览器可视区域；

其他定位，固定定位等也能这样设置

 

 

 

 

 

 

 

 

 注：图片具体怎么切换，用js来做

 

 

 注：相对定位不脱离标准流，仍然占有一定位置，所以在有相对定位的盒子，仍然可以使用margin让它水平居中，可以不加top等偏移量（或者默认为0）；而相对定位和固定定位不能只使用margin让它水平居中，它用了那个小算法

 

  注：小箭头按钮绝对定位，子绝父相；小算法垂直居中；把矩形右上右下设置圆角 ​​​​​​​​​​​​​

注：左侧按钮和右侧按钮大部分样式一样，可以把这些放到并集选择器中，其余的单独放到各个部分

 注意：在并集选择器中不用加左右left，right属性，在各自的选择器中分别加即可；如果在并集选择器也写了比如left，那么在左按钮盒子没事，都是left层叠，在右盒子出问题，相当于右按钮既有left也有right，此时执行left

 ​​​​​​​

 注：背景白色半透明；小圆角高度的一半

 

 注：给每个li小圆角50%，再给margin为3px，上下左右都是3px，也就是最边上的两端都是3px，两个li中间的空隙是6px，加起来正好是盒子宽度；高度和上下边距加起来大于高度；js，点了谁自动变成红色

 

 注：js下拉菜单，这个盒子也会用到定位

 ​​​​​​​

注：display之前常说模式转换外，其实最开始就是用于显示和隐藏的

  

 

注：这种display改成none就隐藏，并没有删除，还是存在页面之中，但并不占用原来位置

 

 

 

 

 注：一般情况下，会用overflow：hidden，但是有定位时，慎用，下面如果给盒子用了，会把定位盒子多出的地方隐藏，不符题意

 

 ​​​​​​​

 注：默认是visible

 

 

 

 注：auto是在需要的时候加滚动条；scroll总是显示滚动条

 

 ​​​​​​​

注：让图片和面罩的宽高和父盒子一样，只需要宽高设置100%即可；

面罩不占位置，子绝父相；

背景图片开关按钮，和面罩设置一起即可，直接在半透明设置后面写，其中写一个center即可，默认垂直居中；

平时面罩是隐藏的，当鼠标经过tudou盒子里面的面罩时再显示，针对与盒子里面的面罩，.tudou:hover .mask {display:block;}，注意，display:block;是显示而不是转换成块元素的意思

 ​​​​​​​

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 问题：

怎么适应浏览器大小？

共用一个版心.w类选择器，多次使用并修改后，到底以哪个为基准进行的修改