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 ...
随机推荐
- jmeter分布式遇到的问题记录
遇到的问题记录: 问题一: 配置好执行机和调度机后,调度机跑执行机器出现下面的报错 java.io.FileNotFoundException:rmi_keystore.jks(系统找不到指定的文件) ...
- python基础之模块(一)
概述 模块,用一砣代码实现了某个功能的代码集合.一个功能可能由 N 个函数来组成,这些函数写到一个py文件中,那么这个Py文件就是传说中的模块. 模块可将代码归类,让你的代码看着条理清晰,当然还需要你 ...
- 【转载】利用Amazon ECR和ECS部署容器应用
众所周知现在容器的技术越来越火,很多企业已经将整个业务架构容器化,利用容器的灵活性.可移植性.轻量等优势为企业开发和运维带来很大的优势,目前整个容器编排服务中最吃香的当然是Kubernetes (简称 ...
- 【数据库开发】C++测试redis中的publish/subscribe
运用 http://blog.csdn.net/xumaojun/article/details/51558237 中的redis_publisher.hredis_publisher.cpp red ...
- 最新 乐游网络java校招面经 （含整理过的面试题大全）
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.乐游网络等10家互联网公司的校招Offer,因为某些自身原因最终选择了乐游网络.6.7月主要是做系统复习.项目复盘.Leet ...
- Celery—分布式的异步任务处理系统
Celery 1.什么是Clelery Celery是一个简单.灵活且可靠的,处理大量消息的分布式系统 专注于实时处理的异步任务队列 同时也支持任务调度 Celery架构 Celery的架构由三部分组 ...
- 记crt 在windows与linux服务器之间利用ftp进行文件的上传下载
我们首先来熟悉一些相关的命令以及操作: ls #展示linux服务器当前工作目录[你连接sftp时所处的目录]下的所有文件以及文件夹 lcd F:\niki #绑定你在windo ...
- 【牛客网】Longest Common Subsequence
[牛客网]Longest Common Subsequence 发现只有d数组最格路 于是我们把前三个数组中相同的数记成一个三维坐标,同一个数坐标不会超过8个 从前往后枚举d,每次最多只会更新不超过8 ...
- go 实现每次生成不同随机值
直接使用rand.Intn(10) 多次运行发现每次的随机值都是一样的 查看 Intn方法的源码说明 // Intn returns, as an int, a non-negative pseudo ...
- 【5号课堂】scratch制作电子生日贺卡
贺卡在我国的使用由来已久,在古代,上层士大夫有用名帖互相问候的习俗 唐宋以后,贺卡的名称及功能有所进步,称为”门状“或“飞帖“,到了明清,又叫“红单“.“贺年帖“等等,听着名字就知功能越来越世俗化,文 ...