6.前端CSS之布局属性(盒子,float,overflow,opsition,z-index,opacity)

1. 盒子模型(margin，padding)

2.浮动(float)

3.溢出属性(overflow)

4. 定位(position)【relative，absolute，fixed】

5.z-index模态框

6.opacity透明度

1. 盒子模型(margin，padding)

1.盒子模型（margin，padding）(1)概念margin：    外边距，标签与标签之间的距离 或 标签与浏览器边缘距离border：    标签的边框padding：   内边距，内容到边框的距离content：   内容大小注意：浏览器会自带8px的margin,即body标签到浏览器边缘为8px写页面时应先把body的margin去除：body{margin:o;}(2)margin：外边距a.margin有上(top)下(bottom)左(left)右(right),可以简写margin: 0;                  上下左右全是0margin: 10px 20px;          第一个上下 第二个左右margin: 10px 20px 30px;     第一个上  第二个左右  第三个下margin: 10px 20px 30px 40px;上 右 下 左b.两个标签之间同时用margin时，两个标签之间距离不叠加，取最大值作为两者距离c.margin: 0 auto;  只能做到标签的水平居中,无法垂直居中d.两个标签之间嵌套时，也可以使用(3)padding：内边距a.padding也有上(top)下(bottom)左(left)右(right),可以简写padding: 0;                   上下左右全是0padding: 10px 20px;           第一个上下 第二个左右padding: 10px 20px 30px;      第一个上  第二个左右  第三个下padding: 10px 20px 30px 40px; 上 右 下 左

2.浮动(float)

2.float浮动：float: left;左浮动float: right;右浮动(1)浮动让标签脱离了文档流，也不是块儿标签，本身多大浮起来之后就只能占多大(标签之间margin:0)例子：行内块儿标签之间原本有间隙，浮动后之间没有间隙(2)浮动多用在页面布局，一般都是用浮动来提前规划好(3)在使用浮动过程中，当标签嵌套，内标签用浮动时，内标签浮起，脱离文档流，造成父标签塌陷的问题例子代码：<div style="height:300px"><span style="float:left;height:300px;weight:300px">qwe</span><span style="float:left;height:300px;weight:300px">qwe</span></div>解决办法：cleara.给外标签设置更高的高度（傻瓜式做法）b.增加一个块儿标签放在浮动后，并指定样式：clear: left;clear: left;：该标签的左边(地面和空中)不能有浮动的元素（即以左边为准，左边有地面标签或浮动标签，默认继续向下移动扩张外标签）c.通用的解决浮动方法：伪元素选择器在布局就会用到浮动，先写好处理浮动css代码.clearfix:after {content: '';        内容为空display: block;     显示块儿标签特性(独占一行)clear:both;         左右两侧都不能有浮动}遇到标签出现了塌陷，就给该塌陷的标签加一个cass:clearfix属性

3.溢出属性(overflow)

1.溢出属性：在设置好高宽的块儿标签时，填入文本或图片过大，默认溢出
2.解决溢出：overflow: visible;  默认溢出可见，即溢出还是展示overflow: hidden;   溢出部分直接隐藏（常用）overflow: scroll;   无论溢不溢出，都显示成上下滚动条的形式overflow: auto;     溢出时才显示成上下滚动条的形式（常用）
3.应用：(1)文档内容溢出，使用滚动条(2)头像制作：溢出隐藏，图片调整width: 100%;让图片拉满文档溢出与头像制作例子：
<html><head><style>body{margin: 0;}p{height: 300px;width: 200px;border: blue solid 3px;overflow: auto;                /* overflow: scroll; */}div{height: 300px;width: 300px;border: red solid 4px;border-radius: 50%;overflow: hidden;               /*做头像一般与width: 100%;一起用*/}div>img{max-width: 100%;            /* width: 100%; */              /* 占标签100%比例 */}</style></head><body><p>运算符也叫操作符, 通果, 比如：typeof就是运算符，过运算符可以对一个或多个值进行运算,并获取运算结果, 比如：typeof就是运算符，可以来获得一个值的类型, 它会将该值的类型以字符串的形式返回:运算符也叫操作符, 通过运算符可以对一个或多个值进行运算,并获取运算结可以来获得一个值的类型, 它会将该值的类型以字符串的形式返回: number string boolean undefined object</p><div><img src="1.jpeg" alt=""></div></body>
</html>

4. 定位(position)【relative，absolute，fixed】

1.定位(position)(1)静态static：所有的标签默认都是静态的static，无法改变位置（即使加top/right/bottom/left等参数也不会影响）所有标签默认position: static;(2)相对定位relative(了解)：用处:在相对于标签原来的位置做移动relative,设置此属性之后仍然处在文档流中，不影响其他元素的布局用法:把默认静态定位改为相对定位position: relative;然后相对原来位置调整位置top/right/bottom/left(3)绝对定位absolute(常用)a.概念:相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照),本质脱离文档流b.用处:当不知道页面其他标签的位置和参数，只知道一个父标签的参数，基于该标签进行位置调整c.用法：1)首先在使用绝对定位时，该标签的父标签不可以是静态标签，父标签要设置position: relative;或position: absolute;否则标签会以body为位置参照2)然后把该标签的默认静态定位改为绝对定位position: absolute;3)最后以父标签位置做参照调整位置top/right/bottom/left(4)固定定位fixed(常用)a.概念：相对于浏览器窗口固定在某个位置,本质脱离文档流b.用处：如右下侧回到顶部c.用法：position: fixed;  写了fixed之后 定位就是依据浏览器窗口，上下滑动位置不变然后以浏览器为参照调整位置top/right/bottom/left2.补充：标签由static变为relative或absolute，它的性质就从原来没有定位的标签变成了已经定位过的标签浏览器是优先展示文本内容的3.改变位置标签与文档流(1)不脱离文档流1.相对定位(2)脱离文档流1.浮动2.绝对定位3.固定定位4.相对定位relative例子代码
<html><head><style>body{margin: 0;}#d1{height: 500px;width: 500px;background-color: burlywood;}#d2{background-color: aquamarine;height: 300px;width: 300px;position: relative;top: 50px;right: 30px;}</style></head><body><div id="d1"><div id="d2">df</div></div></body>
</html>5.绝对定位absolute例子代码：
<html><head><style>body{margin: 0;}#d1{height: 500px;width: 500px;background-color: burlywood;position: relative;            /*f父标签不可以是静态标签，要改relative或absolute*/}#d2{background-color: aquamarine;height: 300px;width: 300px;position: absolute;top: 50px;right: 30px;}</style></head><body><div id="d1"><div id="d2">一起学python</div></div></body>
</html>

5.z-index模态框

1.概念：浏览器显示页面其实有层次分布，即页面布局除了xy轴还有z轴：z-index,最上层称之为模态框
2.用法：z-index:数字数字越大，层次越高，离用户越近（普通写的页面层默认是0）在做三层时，中间层往往为透明层例如登录页面：3.登录页面例子代码
<html><head><style>body {margin: 0;}.cover {position: fixed;left: 0;top: 0;right: 0;bottom: 0;background-color: rgba(31, 14, 14, 0.6);z-index: 99;}.modal {background-color: white;height: 200px;width: 400px;position: fixed;left: 50%;top: 50%;z-index: 100;margin-left: -200px;        /*调整位置居中*/margin-top: -100px;}h1,p{text-align: center}</style></head><body><div>这是最底层的页面内容</div><div class="cover"></div><div class="modal"><h1 >登陆页面</h1><p >username:<input type="text"></p><p >password:<input type="text"></p><p ><button>登录</button></p></div></body>
</html>

6.opacity透明度

1.透明度有两个参数rgba：只能影响颜色 opacity:不仅可以修改颜色的透明度，还同时修改字体的透明度2.例子代码：
<html><head><style>#p1{background-color:rgba(153, 130, 130, 0.5);}#p2{opacity: 0.5;background-color: rgb(153, 130, 130);}</style></head><body><p id="p1">这是rgba</p><p id="p2">这是opacity</p></body>
</html>

6.前端CSS之布局属性(盒子,float,overflow,opsition,z-index,opacity)相关推荐

前端css弹性布局各种属性
前端css弹性布局各种属性一.基本概念 Flexbox 是 flexible box 的简称(注:意思是"灵活的盒子容器")又叫弹性布局,是 CSS3 引入的新的布局模式.它决定 ...
前端css弹性布局，响应式布局，多列布局
前端css弹性布局,响应式布局,多列布局主页 <!DOCTYPE html> <html><head><meta charset="utf-8&q ...
web前端 --- CSS（04） -- 盒子模型、div+css网页布局、css3新特性
盒子模型 (1)网页标签分类: 行内元素: 块级元素:有宽高,可以设置大小,同时不会让其他块元素默认占据当前行 (2)内边距: 内容和边线之间存在空白区域,空白区域被称为:内边距(padding) 盒 ...
前端 CSS day03-核心属性
核心属性:css文本属性 1.font-size9pt = 12px; 1em=16px 0.75em=12px=9pt2.font-family浏览器默认为宋体,但是在谷歌浏览器里面默认字体是微软雅 ...
WEB前端 CSS(非布局)
目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器直接选择器组合选择器分组选择器也叫并集选择器属性选择器伪类选择器伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...
一、CSS弹性布局[弹性盒子、弹性元素]
一.CSS弹性布局 1.弹性盒子弹性盒子的属性全都是写在父元素上面 1.1基础解释:在父元素上写上display:flex;或者display:inline-flex;子元素就会出现弹性效果,其中 ...
前端——CSS：浅谈对float的理解
我之前仿做百度首页,将整个页面整体布局完并写好之后,发现我的网页中的部分块会随着网页大小的变化而移位.我尝试了很多方法,调完之后,还是发现有一个块始终没有办法乖乖到我预想的位置.如下所示: div_f ...
2021-04-05 web前端CSS之权重，盒子边框内外边距
视频学习:黑马程序员pink老师笔记:层叠性相同选择器给设置相同的样式--如果样式冲突,就近原则样式不冲突,不会层叠 <!DOCTYPE html> <html lang=&q ...
CSS页面布局之盒子模型
目录 1 盒子模型 1.1 看透网页布局的本质 1.2 盒子模型组成 1.3 边框(border) 1.4 表格的细线边框 1.5 边框会影响盒子实际大小 1.6 内边距(padding) 案例:新浪 ...

6.前端CSS之布局属性(盒子,float,overflow,opsition,z-index,opacity)

1. 盒子模型(margin，padding)

2.浮动(float)

3.溢出属性(overflow)

4. 定位(position)【relative，absolute，fixed】

5.z-index模态框

6.opacity透明度

6.前端CSS之布局属性(盒子,float,overflow,opsition,z-index,opacity)相关推荐

最新文章

热门文章