【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:默认值 ...
随机推荐
- 转: maven打可执行的jar包以及classpath设置
from: http://drizzlewalk.blog.51cto.com/2203401/416508
- Win10蓝屏代码
UNEXPECTED_STORE_EXCEPTION “意外存储异常”是Windows 10上的“停止错误”,表示存储组件发生意外异常. 原因 固态硬盘驱动与当前固态硬盘驱动程序不兼容或是当前固态硬盘 ...
- TestNG的參数化測试、共享线程池配置、參数默认值配置
在使用TestNG进行測试时,常常会使用到一些參数化配置,比方数据库.连接池.线程池数. 使用TestNG的參数@Parameter注解进行自己主动化读取 原创文章,版权全部.同意转载,标明出处:ht ...
- jq:正则表达式
var checkNum = /^[A-Za-z0-9]+$/; 注意没有引号 checkNum.test(这里添加待匹配的字符串); var textNull=/^\s*$/; if(textN ...
- jquery:after append appendTo三个函数的区别
1.查找元素节点 var $li = $(“ul li:eq(0)”);//获取ul标记下的第一个li,也可以写成 $(“#ulID li:eq(0)”); 2.查找元素属性 利用jq ...
- Java函数的基本知识
http://blog.csdn.net/cxwen78/article/details/7322891主要从Java函数的定义,函数的特点,函数的应用,函数的重载四个方面来讲解Java函数. 一.函 ...
- pojo和vo有什么区别
pojo 是Plain Old Java Object的缩写,就是javabean.vo是view object的缩写,就是用于页面显示的javabean.vo就是pojo.只是通途上的用于携带页面显 ...
- php解析带有命名空间的xml
xml如果带有命名空间我们将如何解析,例如: <ns1:CreateBillResponse xmlns:ns1="http://neusoft.com" xmlns:xsd ...
- sublime3 支持 jsx 语法
添加几个插件即可在js中快速写html babel 可以识别React,并高亮显示ES6 command+shift+p -> install package -> babel 使用 在打 ...
- 10 redis--频道发布与消息订阅
消息订阅 使用办法: 订阅端: Subscribe 频道名称 发布端: publish 频道名称 发布内容 客户端例子: redis 127.0.0.1:6379> subscribe news ...