[19/06/07-星期五] CSS基础_布局&定位&背景样式
一、固定布局（不适应设备的浏览器的变化）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单布局</title>
<style type="text/css">
/*清除默认样式*/
*{
margin: 0;
padding: 0;
}
.header{
width: 1000px;
height: 100px;
background-color: yellowgreen;
margin: 0 auto;
}
.content{
width: 1000px;
height: 400px;
background-color: orange;
margin: 10px auto;
}
.left{
width: 200px;
height: 100%;
background-color: skyblue;
/*设置向左浮动*/
float: left;
}
.center{
width: 580px;
height: 100%;
background-color: royalblue;
float: left;
margin: 0 10px; }
.right{
width: 200px;
height: 100%;
background-color: cyan;
float: left;
}
.footer{
width: 1000px;
height: 100px;
background-color: salmon;
margin: 0 auto;
} </style>
</head>
<body>
<!--头部信息-->
<div class="header"> </div> <!--主体内容-->
<div class="content">
<!--左中右3个div-->
<div class="left"> </div>
<div class="center"> </div>
<div class="right"> </div>
</div> <!--底部信息-->
<div class="footer"> </div> </body>
</html>
扩展：高度塌陷
在文档流中，父元素的高度默认被子元素撑开，也就是子元素多高，父元素就多高。
在浮动流中，当为子元素设置浮动以后，子元素会完全脱离文档流，此时会导致子元素无法撑起父元素的高度，即会导致父元素的塌陷。由于父元素的高度塌陷，所以
会导致父元素下边的元素向上移动，这样页面会很混乱。所以一定要避免高度塌陷。
解决方案1：可以将父元素的高度写死，但是这样父元素的高度不能自动适应子元素高度的改变。所以这种方案不推荐。
解决方案2：
根据W3C的标准，在页面中的元素都有一个隐含的属性叫Block Formatting Context 简称BFC，该属性可以打开或关闭，默认是关闭的。
当设置开启之后，元素会具有如下的特性：
1、父元素的垂直外边距不会和子元素重叠。
2、开启BFC的元素不会被浮动元素所覆盖；
3、开启BFC的元素可以包含浮动的子元素。
如何开启？（只能间接开启）
1、设置元素浮动（即让父元素也浮动起来）：可以撑开高度，但是可以导致父元素的宽度丢失，而且也会导致下边元素上移
2、设置元素的绝对定位：跟方案1一样效果
3、设置元素为inline-block：可以解决问题，但是也是导致父元素的宽度丢失。
4、将元素的overflow设置为一个非visible的值。一般设置为auto或hidden是最好的方案，推荐设置为hidden，副作用最小。
注意：IE6及以下不支持BFC,它具有一个隐含属性叫haslayout，作用和BFC类似，可以开启这个。
开启方式：直接将元素的zoom（放大）设置为1即可，副作用最小。zoom： 1 表示不放大元素，可以使用这种方式。只在IE中支持，其他不支持。
解决方案3：
前言：如何清除浮动的影响？
使用clear来清除其他浮动元素（上边元素）对当前元素（下边元素）的影响（即下边往上移动），其他元素该浮动还浮动，下边的不动即在原来的位置。
none：默认值，不清除浮动
left：清除左侧浮动
right：清除右侧浮动
both：清除两侧浮动元素对当前元素的影响，即清除对他影响最大的元素的浮动
可以在高度塌陷的父元素后边，添加一个空白的div,由于这个div没有浮动，可以撑开父元素的高度，然后再对它清除浮动，这样可以通过这个空白的div撑开高度，
基本没有副作用。使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。
通过after伪类，选中父元素的后边添加一个空白的块元素，然后清除浮动，原理跟div一样，效果一样，而且不会添加多余的div，最推荐的方式。在IE6不支持，所以
还需要使用haslayout来处理。
二、定位
指的是将指定的元素摆放在页面的任意位置。通过position属性来设置
可选值： static，默认值，元素没有开启定位
relative，元素开启相对定位
absolute，元素开启绝对定位
fixed，元素开启固定定位（也是绝对定位的一种）
当开启定位时，可以通过left、right、top、bottom来设置（是相对于自身定位位置的）左侧、右侧、上侧、下侧设置偏移量。通常只使用2个偏移量就可以对元素
定位。一般选择水平和垂直方向的偏移量来为元素定位。相对于自身定位的。
1、相对定位（relative）
当开启相对定位但是不设置偏移量时，元素不会产生任何变化。
相对定位的元素不会脱离文档流。
相对定位会使元素提升一个层级。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
position: relative;
left: 100px;/*开启左偏移，是相对于自身所在位置*/
}
.box3{
width: 200px;
height: 200px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<!--div.box$*3 快捷键 创建3个div名字叫box1-3 -->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
2、绝对定位（absolute）
绝对定位会使元素脱离文档流。
开启绝对定位如果不设置偏移量，元素的位置不会发生变化。
绝对定位是相对于窗口的左上角，即浏览器窗口的左上角坐标是（0，0），是相对于最左上角定位的。准确说是相对于离他最近的开启了定位的祖先
元素来定位的。如果祖先没有开启定位，是相对于浏览器窗口来定位，一般开启子元素的定位都会开启父元素的定位。
绝对定位会提升一个层级，会改变元素的性质。
3、固定定位（fixed）
固定定位也是一种绝对定位，是种特殊的绝对定位。IE6不支持。
不同点：永远都会相对于浏览器窗口进行定位。固定定位会固定在浏览器的位置不会随着滚动条向下的移动而移动，如网站的广告，二维码。
【扩展】元素的层级和透明度
如果元素的层级一样，则下边的元素会盖住上边的元素，这里的上下指的是代码结构上的上下。
通过z-index属性来指定元素的层级，可以设置为一个正整数来指定层级。层级越高，即整数的数字越大，越优先显示。对于没有开启定位的元素则不能使用z-index。
父元素的层级再高也盖不住子元素。
通过opacity来设置元素背景的透明度，它需要一个0-1之间的值。0，完全透明；1，完全不透明；0.5，半透明。在IE8及以下的浏览器不支持，需要使用如下属性：
filter（滤镜）属性。filter：alpha（opacity=50）；50表示半透明，它需要一个0-100之间的值。
三、背景相关的样式
1、使用图片做网页的背景（属性： background-image: url(../img/zhifou.jpg); ）
2、设置背景图片的位置（background-position）
3、设置背景图片是否随着页面滚动（background-attachment）
简写样式：background #bfa center no-repeat; 中间空格隔开，没有没有顺序要求，也没有数量的要求。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景图片</title>
<style type="text/css">
.box1{
width: 500px;
height: 500px;
margin: 0 auto;
/*这里：如果背景图片大于指定的尺寸500*500，默认显示左上角的部分
要显示全部：1、把指定尺寸设置为图片的大小，即一样大就可以全部显示
* */
background-image: url(../img/zhifou.jpg);
/*如果背景图片小于指定尺寸，则把图片平铺，就是把图片多复制几个充满指定的尺寸。
* 可以同时为一个元素指定背景颜色和图片，这样背景颜色会作为背景图片的底色。
* 一般都会同时设置背景颜色和图片
*
* 如果不想让图片平铺？
* 采取background-repeat: no-repeat; 不让图片重复，有多大显示多大。
* 默认双方向重复
* repeat-x:背景图片水平方向重复
* repeat-y:背景图片垂直方向重复
*
*/ /* background-position:
* 调整背景图片在元素中的位置、可选值：left、right、top、bottom、center 选择其中的2个值
也可以使用具体偏移量
* */
background-position:left top ;/* 实际上就是9宫格，使用这5个值来确定*/
background-position:100px 100px ;
/*2个值表示水平和垂直偏移量，正数表示向右和向下，负数表示相反的方向*/ /*background-attachment:设置背景图片是否随着页面滚动
fixed:背景图片固定在某个位置，不随着页面滚动。 如博客的背景图片
scroll：默认值，背景图片随着窗口滚动
不随窗口滚动的图片一般设置给body * */
background-attachment: fixed; }
</style>
</head>
<body>
<div class="box1"> </div> </body>
</html>
四、把图片做为按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>按钮</title>
<style type="text/css">
.more{
display: block;/*将a转成块元素*/
width: 200px;
height: 200px;
background-image: url(../img/更多.png);
background-repeat:no-repeat ;
}
.phone{
display: block;
width: 48px;
height: 48px;
background-image: url(../img/phone_black_48.png);
}
.phone:hover{/*伪类：设置鼠标放到图片上有变化的 可以换张背景图*/
background-image:url(../img/phone_blue_48.png) ;
}
/*同理也可以设置active这个伪类，当点击图片时有变化*/
/*问题：
* 背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独发送一次请求。
*但是浏览器的外部资源不是同时加载的，用的时候才会去加载。但是加载有时间差，有段时间背景图片
* 无法显示，一般不会注意到。解决措施将2个图片整合成一个图片，这样可以将3个图片同时加载出来，
* 然后使用图片的偏移量来切换图片的显示位置，这种技术叫图片的整合技术(CSS-Sprite,雪碧图)
* 优点：
* 1、浏览器只需发送一次请求，提高访问效率，提高用户体验。
* 2、将多个图片整合成一张图片即雪碧图，减小了图片的大小。注意找好雪碧图中每个小图片的坐标。
*
* */
</style>
</head>
<body>
<a class="more" href="https://www.baidu.com/"> </a>
<a class="phone" href=""></a>
</body>
</html>
[19/06/07-星期五] CSS基础_布局&定位&背景样式的更多相关文章
- [19/06/09-星期日] CSS基础_示例
一.图片格式&Hack(尽量不要使用) IE6对图片png-24的透明效果不支持,IE6中背景会发灰,可以使用png-8来代替.但是使用png-8代替之后清晰度会有所下降. 使用js来解决该问 ...
- [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器
一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...
- [19/06/06-星期四] CSS基础_盒子模型
一.盒子模型(框模型.盒模型) CSS处理网页时,它认为每个元素都在一个不可见的矩形盒子里. 为什么想象成盒子模型?因为把所有元素想象成盒子,那么我们对网页的布局就相当于摆放盒子.我们只需要把相应的盒 ...
- [19/06/08-星期六] CSS基础_表格&表单
一.表格 如生活中的Excel表格,用途就是同来表示一些格式化的数据,如课程表.工资条.成绩单. 在网页中也可以创建出不同的表格,在HTML中使用table标签来创建一个表格.table是个块元素. ...
- 一、HTML和CSS基础--网页布局--网页简单布局之结构与表现原则
结构.表现和行为分离,不仅是一项技术,更主要的是一种思想,当我们拿到一个网页时,先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式.,减少HTML与 ...
- 一、HTML和CSS基础--网页布局--网页布局基础
W3C标准: 由万维网联盟制定的一系列标准,包括: 结构化标准语言(HTML和XML) 表现标准语言(CSS) 行为标准语言(DOM和ECMAScript) 倡导结构.样式.行为分离. CSS 规定的 ...
- CSS基础和布局复习
table布局 div布局优势 浏览器支持完善 表现和结构分离 样式设计控制功能强大 可以继承,层叠处理 Transitional // 松散过度型 Strict //严格型 Fram ...
- 一、HTML和CSS基础--网页布局--实践--导航条菜单的制作
案例一:导航菜单的制作 垂直菜单
- 一、HTML和CSS基础--网页布局--如何用css进行网页布局
什么叫做布局? 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合. 网页设计的特点 网页可以自适应宽度 网页的高度理论上可以无限延长 网页分栏 分栏又称为分列,常见的布局分为:一列布局 ...
随机推荐
- 移动端 使用 vConsole调试
前言 用vue 写移动端代码,有个报名页面 就在iOS 9下出现问题,vue的循环渲染都正常,一开始的数据也能取到.证明不是vue的兼容性问题 但是在用户点击按钮发现不能点击进入跳转 工具 推荐使用 ...
- 2019.9.23JAVA动手动脑
1请看以下代码,你发现了有什么特殊之处吗? // MethodOverload.java// Using overloaded methods public class MethodOverload ...
- 2019.9.16JAVA课堂作业
public class TestDouble { public static void main(String args[]) { System.out.println(&qu ...
- sqli-lab（16）
现实证明 英语好才能学渗透 基于bool类型的时间盲注 双引号 0X01爱之初体验 说实话我还没有找到 盲注的时候怎么判断闭合的方法 so 这里我直接看源码 这里的语句应该是 (“”)这种的闭合形式 ...
- 【每日一包0002】array-first
github地址:https://github.com/ABCDdouyae... array-first 获取数组的第一项或者前几项 文档地址:https://www.npmjs.com/packa ...
- 如何用CSS3画出懂你的3D魔方？
作者:首席填坑官∙苏南公众号:honeyBadger8,群:912594095,本文原创,著作权归作者所有,转载请注明原链接及出处. 前言 最近在写<每周动画点点系列>文章,上一期分享了& ...
- 如何让css与js分离
在 webpack 我们如何让 css 与 js 分离: 我们需要安装插件:extract-text-webpack-plugin 1. 用:npm 下载插件 npm install extract- ...
- linux C 加载so文件 指定路径
在Linux C中动态加载.so文件用dlopen("libdemo.so", RTLD_NOW); 但是默认的so搜索目录不包括当前程序目录,所以必须复制到系统的so目录 才能运 ...
- 三、Jmeter生成HTML报告
1.执行jmeter -n -t [接口脚本地址] -l [test.jtl地址] -e -o [报告输出地址] 例如:jmeter -n -t C:\chushujin\youxinscript\j ...
- 八、RF的内置变量
1.表示“空”的变量 ${EMPTY} 空 适用输入空的案例 2.表示“空格”的变量 ${SPACE} 空格,如果是需要5个空格可以这样写${SPACE*5} 3.目录的绝对路径 ${CURDIR} ...