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 ...
随机推荐
- mysql 对应数据库服务器配置 所能承受的tps和qps
总结: 吞吐量实际涵盖了TPS 和 QPS TPS 是指产生事物的请求,比如对数据库 增.删.改 QTP 是对数据库查询动作,无逻辑非事物,比如 查询 假如脚本里面都是get请求,那么出来的吞吐量就是 ...
- Python之queue模块以及生产消费者模型
队列 队列类似于一条管道,元素先进先出,进put(arg),取get() 有一点需要注意的是:队列都是在内存中操作,进程退出,队列清空,另外,队列也是一个阻塞的形态. 队列分类 队列有很多中,但都依赖 ...
- CDS视图篇 2
核心数据服务 (CDS) 公司希望使用 SAPS/4HANA 核心数据服务 (CDS) 视图技术.需要学习 CDS 视 图的概念和结构以及语法 . ● 核心数据服务是用于业务实体的 SAP 战略建模方 ...
- centos6.8下配置vsftp
几个小时的调试 终于OK了 以下配置就算开了selinux 也照样能正常上传 注意 默认的上传目录 在 /home/用户名目录 如果不能下载文件 设置下文件的权限 一.安装VSFTP # yum -y ...
- activity 工作流
https://blog.csdn.net/cs_hnu_scw/article/details/79059965 https://blog.csdn.net/xnf1991/article/deta ...
- curl 的用法指南
简介 curl 是常用的命令行工具,用来请求 Web 服务器.它的名字就是客户端(client)的 URL 工具的意思. 它的功能非常强大,命令行参数多达几十种.如果熟练的话,完全可以取代 Postm ...
- python 函数、参数及参数解构
函数 数学定义 y=f(x), y是x函数,x是自变量.y=f(x0,x1...xn) Python函数 由若干语句组成的语句块,函数名称,参数列表构成,它是组织代码的最小单位 完成一定的功能 函数作 ...
- 点击链接,取得href的值,但是不转向
点击链接,取得href的值,但是不转向 $('.list a').click(function (e) { e.preventDefault();//取消事件的默认动作. $.ajax({ ...
- 纯小白安装MongoDB的图形界面工具adminMongo
今天安了两个MongoDB的图形界面工具,robot3和adminMongo,至于为什么安两个....因为网上说啥好用的都有,我也很迷... 安装adminMongo的时候...和正常软件安装流程不太 ...
- php 获取文件mime类型的方法
php 获取文件mime类型的方法 使用fileinfo需要安装php_fileinfo扩展. 如已安装可以在extension_dir目录下找到php_fileinfo.dll(windows),f ...