CSS基础 布局
1、布局的基本位置
top 距离上边的距离
right 距离右边的距离
bottom 距离下边的距离
left 距离左边的距离
去掉布局时 html 的3mm 边框
*{
padding:;
margin:;
}
2、流式布局
float
最基本的布局方式
float： left // 向左流
float： right // 向右流
clear： both // 清掉流
在流式布局中，默认往下流动，并且占据整行位置，只有在给 float 一个方向时模块才会浮动起来
举例：
*{
padding:0px;
margin:0px;
}
#div1{
width:100px;
height:100px;
background-color:red;
float:lefr;
}
#div2{
width:100px;
height:100px;
background-color:green;
float:left
}
#div3{
width:100px;
height:100px;
background-color:blue;
}
<body>
<div id="div1"></div>
<div id="div2"></div>
<div style="clear:both;"></div>
<div id="div3"></div>
</body>
3、定位布局
position
（1）固定定位
position： fixed
锁定位置（相对于浏览器的位置），例如有些网站的右下角的弹出窗口。
（2）绝对位置
position： absolute
相对于父级元素（浏览器，绝对定位的上级）
absolute 是为一个浮动的模块，占不住位置，
可以随意排列位置，不会对其它任何布局位置有影响
（3）相对位置
position： relative
相对于自身应该出现的位置
是一个固定模块，能占住自己的位置
在 模块位置根据上下左右位置发生变化时，其自身应该出现的位置保留，不被其他模块占据
-- 常常用来作为 absolute 的父集使用
4、分层
z-index： 数字
值越大越靠上
CSS基础 布局的更多相关文章
- CSS基础布局
目录 css基础布局 1.布局相关的标签 2.盒子模型 2-1 什么是盒子模型 2-2 块级元素和内联元素(行内元素) 2-3 盒子模型之间的关系 盒子模型相关CSS属性 3.浮动 3-1 什么是浮动 ...
- CSS基础布局--居中对齐，左侧定宽右侧自适应
CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容.本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一 ...
- HTML+CSS 基础布局（案列一）
刚html刚讲完马上就接着css,周末的任务就是高仿案例,结果有点遭 图文布局 代码 css(内部样式) html <!DOCTYPE html><html><head& ...
- 前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- CSS基础选择器(选择器的优先级)，CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成，盒模型-block，盒模型布局
CSS基础选择器 (1)id选择器: # => 标签拥有 id="user" 属性 <style> #user { width: 200px; ...
- css基础 引用方式 标签选择器 优先级 各式布局
今天讲的css基础,了解了css即层叠式表,是美化网页,控制页面的样式. 样式表引进网页的3种方式1内联式,语法例子:<div style="width: 100px;height: ...
- CSS基础篇之了解CSS和它的基本属性
CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...
- 奇妙的CSS之布局与定位
前言 关于布局与定位是Web前端开发里非常基础而又重要的部分.介绍相关知识的文章,很容易就可以找到.虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有 ...
- css 基础---选择器
1.css基础 selector {property: value} eg: h1 {color:red; font-size:14px;} p { text-align: center; color ...
随机推荐
- 【418】C语言ADT实现Quack(stack+queue)
quack.h #include <stdio.h> #include <stdlib.h> #include <assert.h> typedef struct ...
- vue-cli 引入stylus报错
在App.vue页面添加以下代码报错: <style lang="stylus" rel="stylesheet/stylus"> </sty ...
- 【c# 学习笔记】接口与抽象类
抽象类经常与接口一起使用,共同服务于面向对象的编程,这里简单地分析一下接口与抽象类的区别,如下: 1.抽象类使用abstract关键字进行定义,而接口使用interface进行定义:它们都不能进行实例 ...
- 【计算机视觉】Object Proposal之BING++
本文是对 BING 算法的升级,主要是在快的同时保持定位精度 两个 + 分别对应: edge-based recursive boxes as one "+", and MTSE ...
- SCART概念
SCART(Syndicat des Constructeursd' Appareils Radiorécepteurs et Téléviseurs)接口是一种专用的音视频接口,它是由法国公司Per ...
- 【leetcode算法-简单】28. 实现strStr
[题目描述] 实现 strStr() 函数. 给定一个 haystack 字符串和一个 needle 字符串,在 haystack 字符串中找出 needle 字符串出现的第一个位置 (从0开始).如 ...
- 乐字节Java反射之四：反射相关操作
大家好,乐字节小乐继续为Java初学者讲述Java基础知识.上次说到乐字节Java反射之三:方法.数组.类加载器,这次是Java反射之四:反射相关操作 1.操作属性 //1.获取Class对象 Cla ...
- Linux中查找最耗CPU的Java代码问题
第一步: 查看消耗CPU最高的进程PID [lolaage@web2 tomcat-ns]$ top top - 13:23:32 up 42 days, 19:11, 3 users, load ...
- EventLoop介绍
在Netty中使用EventLoop接口代表事件循环,EventLoop是从EventExecutor和ScheduledExecutorService扩展而来,所以可以讲任务直接交给EventLoo ...
- list列表
list列表 list:一个有序的集合 创建列表 语法格式: 列表名 = [元素1, 元素2, 元素3…….,元素n] 注:列表中的元素⽤逗号隔开. 注:列表⾥⾯的元素可以是不同类型的数据. 列表元素 ...