按照CSS规范，浮动元素（floats）会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子（通常是文本）的排列。因此当其高度超出包含容器时，一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为，具体如何处理呢？ 有一种做法就是在父容器内再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而且通常是无语义的）标签，...
你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习： 第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。 另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align=left等等)束手无策，不知道该转换成对应的什么CSS语句。当你解决了第一种...
文章参考至一、前言&索引CSS Shapes布局可以实现不规则的文字环绕效果，需要和浮动配合使用。兼容性如下图：还是很不错的，移动端可用，内部中后台项目可用。CSS shapes布局相关属性并不多，学习成本比grid布局，flex布局小很多。二、详细了解shape-outsideshape-outside是不规则形状环绕布局的核心，支持的属性值分为如下四大类：none – 默认值<shape-box> – 图形盒子。<basic-shape> – 基本图形函数。<image> – 图像类。其中...
一、基础法则：类名的第一个字符不能使用数字，否则无法在Firefox中起作用；不要在属性值和单位之间留空格，否则在Firefox或Netscape中无法正常工作。 二、背景(background)：background-color不能继承，默认值是transparent。若一个元素未指定背景色，其背景为透明，其祖先元素的背景则可见，由此显现出来；background-position中若只出现一个关键字，则默认另一个是center；若只提供一个百分数，所提供的值作为水平值，垂直值默认...
1、各浏览器适用前缀 -webkit- 谷歌或苹果 -o- 欧朋 -moz- 火狐 -ms- IE92、边框（border） 属性：border-image 设置所有 border-image-* 属性的简写属性 border-radius 设置所有四个 border-*-radius 属性的简写属性（圆角） box-shadow 向方框添加一个或多个阴影： 格式：10px 20px 15px color（水平、垂直、模糊度、...
650) this.width=650;" src="/upload/getfiles/default/2022/11/14/20221114111400550.jpg" title="comtop.png" />650) this.width=650;" src="/upload/getfiles/default/2022/11/14/20221114111400692.jpg" title="dtu.png" />650) this.width=650;" src="/upload/getfiles/default/2022/11/14/20221114111400974.jpg" title="main001.png" />650) this.width=650;" src="/upload/getfiles/default/2022/11/14/202211141114014...
目录：1、Div+Css布局教程（-）CSS必备知识注：本教程要求对html和css有基础了解。一、CSS布局属性Width：设置对象的宽度（width:45px）。Height：设置对象的高度(Height:45px;)。Background：设置对象的背景颜色、背景图像。1.背景颜色background:#09F;2.背景图像background:url(file:///C|/Users/Administrator/Desktop/huipu.jpg) repeat-x;repeat-x代表横向重复，还可以设置repeat-y。Float: Float属性是DIV+CSS布局中最基本也...
font-size:18px;:设置字号color:#093:设置字色font-family:‘宋体‘;:设置字体（要尽量使用通用的字体，就是用大家电脑上一般都有的字体，常用的是中文字体是宋体英文字体是arial）设置字体的时候将英文字体设置在前，中文设置在后如果想用比较特殊的字体，可以将其转换为图片line-height:150%;:设置行与行之间的距离font-weight:bold:设置字体的粗细（粗：bold 正常：normal）font—style:设置字体样式(normal正常，italic斜体)te...
outline:这只轮廓样式，与border类似。写法参考border.overflow/overflow-x/overflow-y：visible/hidden/scroll/auto/no-display/no-contentoverflow:溢出显示方式。overflow-x：水平方向溢出显示方式overflow-y：垂直方向溢出显示方式注：一般设置overflow-x/y属性以后，不管内容有没有溢出，滚动条会一直出现。max-height/min-height注：有时候我们需要定义元素内容的最大宽高或者最小宽高，这样就可以实现页面内容多了以后自适应...
前言这是 React 系列教程的第一篇，我们将用 React 实现 Animate.css 官网的效果。对于 Animate.css 官网效果是一个非常简单的例子，原代码使用 jQuery 编写，就是添加类与删除类的操作。这对于学习 React 来说是一个非常简易的例子，但是我并不会在教程中介绍相关的前置知识，比如 JSX、ES6 等，对于小白来说可能还会有一些困惑的地方，所以还要了解一下 React 相关的基础知识。虽然 React 有很多值得深究的知识，但这个系列教程并...
px比em更加容易使用,em指字体高，任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px，所以10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。em的特性1. em的值并不是固定的；2. em会继承父级元素的字体大小。原文：http://www.jb51.net...
css预处理器赋予了css动态语言的特性，如变量、函数、运算、继承、嵌套等，有助于更好地组织管理样式文件，以及更高效地开发项目。css预处理器可以更方便的维护和管理css代码，让整个网页变得更加灵活可变。对于预处理器，广泛使用的有less和sass。在这不做对比，2者大同小异，sass基于Ruby语言编写，所以编译sass文件需要Ruby环境。我们使用sass并不需要过多了解Ruby语言，只需要安装Ruby环境即可，而less则主要是运行在node环境下...
有两天没发表文章了，今天来说说利用jQuery和CSS3制作一款类似阿里巴巴左侧商品菜单导航，这款菜单看起来非常大气，可以展示非常多的产品类目，如果你在设计电子商务网站，不妨可以拿来参考，一下是效果图：我们也可以到这里来查看这款菜单的DEMO演示。接下来还是分析一下源代码，源码由HTML、CSS和jQuery组成，先来看看HTML，东西很多，但结构非常简单：<div class="sidebar"><div class="sidebar_top sidebar_top_tc">全部产品分...
原文：http://www.planabc.net/2008/04/14/background-clip_background-origin/background-clip 和 background-origin 是 CSS3 中新加的 background module 属性，用来确定背景的定位。background-clip 用来判断 background 是否包含 border 区域。而 background-origin 用来决定 background-position 计算的参考位置。语法为：background-clip: [border | padding] [, [border | padding]]* background-origin: [border | padding...
一.浮动(float)1.文档流:是指盒子按照 html 标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列，先写的先排列,后写的排在后面,每个盒子都占据自己的位置.2.浮动的概念:所谓的浮动就是指元素脱离文档流,漂浮到文档流的上方,不会占据位置。3.浮动的特性:(1).浮动元素有左浮动(float:left)和右浮动(float:right)两种.(2).浮动的元素会向左或向右浮动,碰到父元素边界,浮动元素,未浮动的元素才停下...