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 ...
随机推荐
- Harbor 1.8.0 仓库的安装和使用
安装的先决条件 硬件环境 1.CPU 至少2G,最好4G 2.内存 至少4G,最好8G 3.磁盘 至少40G,最好160G 软件环境 1.docker版本 17.03.0-ce ...
- CentOS7下搭建zabbix监控（一）——Zabbix监控端配置
zabbix 是一个基于 WEB 界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案.zabbix 能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统管理员快速定位 ...
- C，OC,C++语言对比
1.C与OC.C++的区别: C语言的特点:面向过程 1)C语言是结构化语言,层次清晰,调试和维护比较容易 2)表现能力和处理能力比较强,可直接访问内存的物理地址 3)c语言实现对硬件的编辑,c语言课 ...
- iOS-NSString值为Unicode格式（字符串编码转换成中文编码）
+ (NSString *)replaceUnicode:(NSString *)unicodeStr { NSString *tempStr1 = [unicodeStrs ...
- 写一个java常用的加密工具类
1.叙述 java security包下有很多加密算法类,我们可以很简单的调用它们.他们虽然功能很全,但是使用起来步骤有些繁琐.我在这里封装来一些常用的加密算法及他们常用的一些方法,来简化代码. 工具 ...
- (1)、JEasyUI 之 Datagrid的Combobox 显示 textField 值的问题
(1).JEasyUI 之datagrid的Combobox显示textField值的问题 官方的datagrid Demo Row Editing in DataGrid 中field 是否如下定义 ...
- fastadmin 后台view data-source关联报500错误问题
data-source 关联模型通过id关联被关联表的name字段,没有name字段就报500
- python 脚本定时删除 elk索引
脚本如下 一.python 脚本如下 #! /usr/bin/python # -*- coding=utf-8 -*- import urllib import urllib.request imp ...
- java积累的细节问题
一.将几个数字进行拼接,拼接成字符串 一定要将""放到几个数字之前,否则就会把数字相加之后的数转化成字符串 如你需要拼接年份,月份,和日 如果:2018+12+13+"& ...
- Postman和jmeter的区别
1.创建接口用例集(没区别) Postman是Collections,Jmeter是线程组,没什么区别. 2.步骤的实现(有区别) Postman和jmeter都是创建http请求 区别1:postm ...