【css学习整理】浮动,清除
- css内边距属性: padding padding-top right bottom left
- 如果是两个数字,指的是上下,左右 padding: 10px 20px 上下10 左右20
- 如果是三个数字,指的是上,左右,下 padding: 10px 20px 30px 上10 左右20 下30
- css外边距属性:margin
- 两个数字: 上下 左右
- 三个数字: 上 左右 下
- 居中: 0 auto
- css背景: background
- background-color: 背景色
- background-img: 背景图
- background-repeat: 背景图是否重复
- background-position: 背景图定位 left right bottom top center
- background-attachment: 背景图是否固定
- css浮动和清除
浮动的元素可以理解为该元素已经脱离文档流。‘已经不存在了’
浮动只有两个方向:left 。 right Float:left (左浮动) 。 Float right
浮动的位置:浮动到包含元素的边界。或具有浮动属性的边上
浮动元素的层级高于普通元素。
凡是浮动的元素都是块元素。如果浮动前行内元素,浮动后自动转为块元素。备注:行内元素没有宽高,只有块元素才有宽高
<style type="text/css">
.box{
width: 960px;
height: 500px;
margin: 0 auto;
border: 1px solid black;
}
.left{
width: 200px;
height: 400px;
border: 1px solid red;
float: left;
}
.right{
width: 750px;
height: 400px;
border: 1px solid blue;
float: right;
}
</style>
【css学习整理】浮动,清除的更多相关文章
- CSS学习摘要-浮动与清除浮动
以下从浮动到BFC的段落 摘自MDN 网络开发者 float 浮动 float CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它.该元素从网页的正常流动中移除,尽管仍然保持部 ...
- CSS学习之浮动
首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...
- CSS中的浮动清除
先来看一个实验:现在有两个div,div身上没有任何属性.每个div中都有li,这些li都是浮动的. 理想的效果:可实际的效果: 这个地方就涉及到浮动,因为两个父元素div都没有高度(或者小于子元素的 ...
- css基础(浮动 清除f浮动)
文档流(标准流) 1.元素自上而下,自左而右 2.块元素,独占一行,行内元素在一行上显示,碰到父级元素的边框换行 浮动left 浮动的框可以向左或是向右移动,直到它的边缘碰到包含框或是另个浮动框 ...
- css学习_css浮动
1.文档流介绍 网页布局的核心就是利用css来摆放盒子, 把盒子摆放在合适的位置. css的定位机制有以下3种(网页布局一般需要3种搭配使用): a.普通流(标准流) b.浮动 1.浮动只有左右. 2 ...
- 【css学习整理】css基础(样式,语法,选择器)
CSS是什么? cascading 层叠样式表 sheet 样式文件 style 外观个性化 CSS语法? 声明方法: 选择器(属性: 值; 属性: 值) 选择器: 通过名称制定对哪些标签进行样式设置 ...
- css中的浮动以及清除浮动
对于css中的浮动问题,曾经有一段时间我是懵懵懂懂的感觉,对于float这个属性一直是似懂非懂的赶脚,对于这种让我们一直懵懵懂懂的知识点,我们就需要找个时间点,仔仔细细的去将它搞懂,从这个过程中我们也 ...
- CSS学习笔记08 浮动
从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...
- 【CSS学习】--- float浮动属性
一.前言 浮动元素以脱离标准流的方式来实现元素的向左或向右浮动,并且浮动元素还是在原来的行上进行浮动的.float浮动属性的四个参数:left:元素向左浮动:right:元素向右浮动:none:默认值 ...
随机推荐
- ArcGIS教程:面积制表
摘要 计算两个数据集之间交叉制表的区域并输出表. 插图 使用方法 · 区域定义为输入中具有同样值的全部区.各区无需相连. 栅格和要素数据集都可用于区域输入. · 假设区域输入和类输入均为具有同样分辨率 ...
- JAVA Eclipse ActivityManager Warning Activity not started, its current task has been brought to the front怎么办
Eclipse运行提示Activity not started,因为当前程序已经在运行,需要退出当前程序再测试
- Android开发系列(二十三):实现带图片提示的Toast提示信息框
Android中的Toast是非经常见的一个消息提示框.可是默认的消息提示框就是一行纯文本.所以我们能够为它设置一些其它的诸如是带上图片的消息提示. 实现这个非常easy: 就是定义一个Layout视 ...
- OSX:设置用户默认浏览器
近期我们遇到的情况是,须要统一设置用户的默认浏览器为Google Chrome.而系统默认的是Safari. 这个设置是系统Launch Services基于用户管理的. 意思就是说,即便是改动了系统 ...
- VUE 路由变化页面数据不刷新问题
出现这种情况是因为依赖路由的params参数获取写在created生命周期里面,因为相同路由二次甚至多次加载的关系 没有达到监听,退出页面再进入另一个文章页面并不会运行created组件生命周期,导致 ...
- UNP学习笔记(第六章 I/O复用)
I/O模型 首先我们将查看UNIX下可用的5种I/O模型的基本区别: 1.阻塞式I/O 2.非阻塞式I/O 3.I/O复用(select和poll) 4.信号驱动式I/O(SIGIO) 5.异步I/O ...
- 笔记本WIFI卡简介
1.Intel AC9560(CNVI) AC9260(pcie) 3165D2W(pcie) 2.Realtek瑞昱 RTL8822be(pcie) RTL8723BU(USB) 英特尔在300系主 ...
- MySql(四):备份与恢复
一.数据库备份使用场景 下面我就列举一下我个人理解的我们能够需要用到数据库备份的一些比较常见的情况吧. a.数据丢失应用场景 1.人为操作失误造成某些数据被误操作:2.软件BUG 造成数据部分或者全部 ...
- 使用构建工具gradle打包时,遇到的中文问题和解决方式
1.使用gradle clean war 命令将项目打成war包.这一过程gradle没有提示报错. 2.将得到的myapp.war复制到tomcat下webapps(部署war包) 3.启动to ...
- css3动画学习资料整理
现在主流浏览器(先不管IE8,IE9吧),尤其是移动端浏览器基本都支持css3了,为了增强页面的表现力,css3动画必不可少了.这篇文章主要整理一下我在学习css3动画所查阅的一些好的资料,并附上两个 ...