【css通用小笔记02——浮动、清除（三个例子）】的更多相关文章

css通用小笔记02——浮动、清除（三个例子）

css中通常会用到浮动与清除,也是一个必须掌握的知识点,概念性的东西不多说,下面举几个例子,来说明它的用法:1.文字环绕效果  2.多个div并排显示 3.清除浮动(默认显示) 一.文字环绕效果: html代码如下: <body> <style type="text/css"> #big img {float: left;padding: 10px;border: 1px solid red;} #big span {font-size: 24px;font-w…

css通用小笔记01——导航背景

很多刚接触前端的可能遇到一些css能解决的小问题,我现在总结了一些,将会逐渐和大家分享,先是导航的背景问题,在网页中常常看到,当鼠标放到一个导航按钮上面是,就会出现一些特效,比如背景,这是最常用的,我们就来解决一下,这是所有导航都能用到的方法,能够去一反三的方法. html代码如下: 1 <html> ......... 2 <body> 3 <div id="nav"> 4 <ul> 5 <li><a href=&qu…

css通用小笔记03——浏览器窗口变小 div错位的问题

我最近写网页的时候,经常碰到一个普遍的问题,经过我的查阅和尝试,终于解决了这一问题,这里有两种方法提供给大家,如果博友还有更好的方法,欢迎补充. 一.使用min-width属性: 我们先看看下面这段代码(html): <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>无标题文档</title&…

HTML+CSS基础小笔记再整理

1. font的两个必须要写的:font-size 和 font-family text-indent 首行缩进(em)1em=一个文字大小 text-algin 对齐方式:left.center.right text-decortion 文本修饰: underline(下划线)overline(上划线)line-through(删除线)none(无) letter-spacing 字间距(为0时字间距本身为1个像素,若为5px则字间距实际为6px) word-spacing 词间距(先用空格将…

Css技术入门笔记02

第一篇见Css入门笔记01http://blog.csdn.net/qq_32059827/article/details/51406674 4.其他选择器 4.1.关联选择器 有时在页面上会出现我们需要让CSS样式作用在某个标签中的标签上. 格式: 父标签名 子标签名 <div> div中的数据 <span>div中的span中的数据</span> </div> <span>span中的数据</span> 当前的CSS要作用在div…

html+css常用小笔记（持续更新）

1 去掉input点击时的蓝色边框 outline:none; 2 禁止文本选中 -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ -khtml-user-select: none; /* Konqueror */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Inte…

css中的浮动与三种清除浮动的方法

说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top,那么两个margin会发生合并现象,合并以后的值较大的那个. 对于这种现象一般不用处理. 2,margin塌陷现象: 如果一个大盒子中包含一个小盒子给小盒子设置margin-top大盒子会一起向下平移. 解决方案: 1.0给大盒子加一个边框border属性. 2.0给大盒子设置一个overflow…

CSS技巧（一）：清除浮动

什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象.这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动. 引用W3C的例子,news容器没有包围浮动的元素. .news { background-color: gray; border: solid 1px blac…

css随堂笔记（三）

Css随堂笔记(三) 1 关于背景图片   A 设置背景图片:background-image:url(“图片的路径”):   B 背景图片位置: background-position:1 方位名词 背景位置: 1.如果只设置一个方位词,另外一个默认居中 2.如果设置的值是两个方位词,与顺序无关 2 数值:背景位置: 1.如果设置的值是数字: 1.一个值得时候,表示水平方向的位移,垂直方向默认居中 2.两个值得时候,第一个表示水平位移 第二个表示垂直方向的位移 C 背景图片是否平铺:backg…

HTML&CSS精选笔记_浮动与定位

浮动与定位 元素的浮动 元素的浮动属性float 什么是浮动? 元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制,移动到其父元素中指定位置的过程. 如何定义浮动? 在CSS中,通过float属性来定义浮动,其基本语法格式如下: 选择器{float:属性值;} float属性值 left 元素向左浮动 right 元素向右浮动 none 元素不浮动(默认值) 清除浮动 为什么要清除浮动? 由于浮动元素不再占用原文档流的位置,所以它会对页面中其他元素的排版产生影响,这时就需要在该元素中清除浮…