盒子模型和布局

Posted 2020-09-17 零语言

          提起盒子首先想到的是盒子的大小也就是所谓的边距，有边距就有位置，那么久涉及到position,在position中，fixed是固定的，相对于浏览器边框位置固定，absolute绝对位置，相对于父级元素（浏览器，绝对定位的上级），relative相对位置，相对于自身应该出现的位置，那么这里就会出现以前所学的知识也就是top,right,bottom,left，分别就是距离上，右，下，左，在代码中也要按照这个顺序，也就是顺时针个的顺序，然后还有个分层，z-index分层，值越大越靠上。

          说到盒子就是边距，肯定会有超出边距的时候，那么这个时候就会用到超出边距隐藏的功能，也就是overflow：hidden;这个属性，提到隐藏那么还有隐藏占空间和隐藏不占中间的属性，首先隐藏占空间的属性是visibility:hidden;，然后就是隐藏不占空间display:none;.在边框中还有一些属性，包括下拉框属性overflow:scroll; 透明属性opacity:0.4;以及文字阴影属性text-shadow:2px 2px 0px wheat;当然还有比较有意思的圆角属性，border-radius:50%;

           列表方块的作用有list-style:none;将前面的序号去掉，list-style-image可以将前面的序号变成图片。其中边框边界中margin是外边距和padding是内边距，他俩的顺序都遵循上右下左的规则。其中还有一些小属性，比如超出部分隐藏overflow: hidden;display:none; 是隐藏不占空间，visibility:hidden;是隐藏占空间。说完盒子那么就到布局了，布局内容今天学的不是很多，但是要多做东西应用才行，所以，页面布局有流失布局float:right，向右流失，那么向左流失就是float：left了，除了布局还有定位，分别为相对定位，position:relative,绝对定位，position:absolute,其中一个div中向右流失就是：

.item {
　　　　width: 100px;
　　　　height: 100px;
　　　　margin-right: 10px;
　　　　color: blueviolet;
　　　　border: 2px solid red;
　　　　float: right;
　　　　position: relative;
　　　　}

.container{
　　　　　　width: 50%;
　　　　　　border: 3px solid black;
　　　　　　position: relative;
　　　　　}

.sup{
　　　width: 100px;
　　　height: 100px;
　　　border: 2px solid blue;
　　　position: absolute;
　　　right: 0px;
　　　top: 0px;
　　　background-color: darkcyan;
　　　z-index: 1;
　　　}

<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="sup"></div>
</div>.

还有个如果用<ul>标签是前面序号超出边框，可以用 list-style-position:inside;将标号弄进去，今天按照老师要求做了斯坦福大学首页，布局总体完成，速度还是有点慢，以后多练习，就会慢慢讲速度提上来的。