CSS
文章平均质量分 55
什么石头
这个作者很懒,什么都没留下…
展开
-
CSS学习:常见元素分类
常见元素分类在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。 常用的块状元素有:<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>常用的内联元素有:<a>、<span>、<br>、<i>、<e转载 2015-04-12 15:38:52 · 477 阅读 · 0 评论 -
响应式布局
响应式布局的实现媒介查询设备高度: device-width, device-height渲染窗口的宽高: width, height设备的手持方向: orientation设备的分辨率: resolution使用方法:用外联或者内嵌样式或者两者同时搭配使用。设备高度: device-width, device-height表示设备物理实际的宽高渲染窗口的宽高: width, heigh转载 2015-10-12 13:40:43 · 258 阅读 · 0 评论 -
布局
display属性block默认宽度为父元素的宽度:影响元素大小可设置宽高:影响元素大小换行显示:影响元素的位置 默认常见div p h1 ul form….属性inline默认宽度为内容宽度宽高设置无效同行显示属性:inline-block默认宽度为内容宽度可以设置宽高(会影响前续和后续元素的宽高)同行显示整块换行 默认display:inline-block元素:in原创 2015-09-19 11:21:17 · 303 阅读 · 0 评论 -
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况px:绝对单位,页面按精确像素展示em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/转载 2015-09-17 23:31:43 · 1106 阅读 · 0 评论 -
CSS简介
浏览器私有属性chrome, safari -webkit-firefox -moz-IE -ms-opera -o-.pic{ -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -ms-transform:rotate(-3deg); -o-transform:rotate转载 2015-10-05 10:10:04 · 347 阅读 · 0 评论 -
兼容性
css常见兼容问题H5标签兼容在IE6,7下的兼容HTML5的标签在IE6, 7下不能使用,比如 等HTML5下新增的标签。需要兼容方案解决方案:引用一个js的库文件。增加<script src="js/html5shiv.js"></script>的引用。<!DOCTYPE html><html> <head> <meta charset="utf-8">转载 2015-11-05 16:24:44 · 371 阅读 · 0 评论 -
动画animation
动画确定产生动画效果的帧名 - animation-name 定义关键帧名 - animation-name:<single-animation-name> [',' <single-animation-name>]* <single-animation-name> = none | <ID原创 2015-09-16 13:18:57 · 427 阅读 · 0 评论 -
变形
transformtransform:none | <transform-function>+transform:none; transform:<transform-function> 例如:<body style="transform:rotate(180deg)"> 表示body元素顺时针旋转180度 <transform-function>代表功能性属性值,作为一种方法标题方法原创 2015-09-15 22:45:43 · 306 阅读 · 0 评论 -
布局
position—设置定位方式top, right, bottom, left, z-index—设置元素位置如果定位元素没有设置宽高,使用top right left等会拉伸元素z-index:元素在z轴的位置,默认值为0;z-index栈:positionrelative相对定元素仍然在文档流中元素参照物为元素本身原来的位置最常用场景:改变层级和绝对定位元素的参照物absolu原创 2015-09-15 18:44:32 · 314 阅读 · 0 评论 -
IE6/IE7下:inline-block解决方案
IE6/IE7下对display:inline-block的支持性不好。 1、inline元素的display属性设置为inline-block时,所有的浏览器都支持; 2、block元素的display属性设置为inline-block时,IE6/IE7浏览器是不支持的; 对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行,允许空格。(准确地说,应用转载 2015-09-15 12:01:41 · 342 阅读 · 0 评论 -
CSS学习之:盒子模型
什么是盒子模型http://www.imooc.com/video/3225盒模型–边框(一)盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细、样式和颜色(边框三个属性)。 如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框: div{ border:2px solid red; } 上面是 border 代码的缩写形式,可以分开写:转载 2015-04-12 15:47:40 · 351 阅读 · 0 评论 -
CSS学习之布局模型
清楚了CSS 盒模型的基本概念盒模型类型, 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式。 CSS包含3种基本的布局模型,用英文概括为:Flow、Layer 和 Float。 在网转载 2015-04-12 16:25:36 · 406 阅读 · 0 评论 -
属性的继承以及样式优先级
并非所有的属性都能继承的,只有一部分具有继承继承属性子元素自动继承具有继承属性:colorfonttext-aligntext-indentlist-style...非继承属性非继承属性backgroundborderposition...CSS样式优先级对一个元素使用多个样式时,采用哪个个样式可以遵循I-C-E权重方法确定。 样式层叠 一个元素具有多个样式时,首先根据优先级转载 2015-09-25 17:26:25 · 891 阅读 · 0 评论 -
选择器
属性选择器-[att]<from action=""> <div> <input disabled type="text" value="张三" /> </div> <div> <input type="password" placeholser="请输入密码" /> </div></from><!--from是block元素,in原创 2015-09-25 16:54:46 · 297 阅读 · 0 评论 -
文本
文字font-size 大小font-size:<length> | <percentage> | ...字体单位采用em 或者百分比时,子元素中的文字大小是参照于父元素的文字大小按比例决定的。字体样式font-family:[<family-name> | <generic-family>]#<generic-family> = serif | sans-serif | cursive | fa转载 2015-09-25 22:50:59 · 341 阅读 · 0 评论